按钮单击后输入值为空

问题描述：

我使用引导模式对话框。我的模式：按钮单击后输入值为空

<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       <h4 class="modal-title">Hello</h4> 
      </div> 
      <div class="modal-body"> 
       Your name: 
       <input id="colorData" name="colorData" type="hidden" value=""/> 
       <input id="nameData" name="nameData" class="input-lg" type="text" value=""/> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button id="postAnswer" type="submit" class="btn btn-primary">Submit</button> 
      </div> 
     </div> 
    </div> 
</div>

我有按钮：

<div align="center" style="margin-bottom: 20px"> 
     <button value="all" type="button" class="btn btn-lg btn-default">All</button> 
     <button value="green" type="button" class="btn btn-lg btn-success">Green</button> 
     <button value="blue" type="button" class="btn btn-lg btn-info">Blue</button> 
    </div>

，我有脚本：（ “BTN”）。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".btn").click(function() { 
      var color = $(this).val(); 
      $(".modal-body #colorData").val(color); 
      // $('#colorData').val() - is not empty 
      $("#myModal").modal('show'); 
     }); 

     $('#postAnswer').click(function (e) { 
      e.preventDefault(); 
      $.ajax({ 
       // $('#colorData').val() is empty 
       // $('#nameData').val() is not empty (I write this on dialog) 
       url: "@Url.Action("WriteAnswer", "Home")?name=" + $('#nameData').val() + "&color=" + $('#colorData').val(), 
       type: 'POST', 
       data: $('#nameData').serialize(), 
       success: function (data) { 
        //alert('successfully submitted'); 
       } 
      }); 

      $("#myModal").modal('hide'); 
     }); 

    }); 
</script>

后通话功能$单击元素$（'＃colorData'）。val（）不为空。但是！如果我点击模式上的按钮，然后输入空值和输入值colorData为空。为什么？我想将数据发布到控制器，但值被重置。对不起我的英语不好。

因为你的'postAnswer'按钮也是'class =“btn”'（so'var color = $（this）.val（）;''null'） –

@StephenMuecke，你说得对！谢谢））） –

@DenisBubnov，更好地处理'ID'属性，你必须始终保持ID独特.. – Rayon

答

您<button>与id="postAnswer"元素也有class="btn"，所以当你点击它时，$(".btn").click(function() {方法也被称为和var color = $(this).val();回报null（因为该按钮没有value属性。

要正确处理这个问题，给一个附加的类名的3“颜色”按钮（比如说）

<button value="all" type="button" class="color btn btn-lg btn-default">All</button> 
<button value="green" type="button" class="color btn btn-lg btn-success">Green</button> 
<button value="blue" type="button" class="color btn btn-lg btn-info">Blue</button>

和改变所述第一脚本以

$(".color").click(function() { 
    var color = $(this).val(); 
    $(".modal-body #colorData").val(color); 
    $("#myModal").modal('show'); 
});

按钮单击后输入值为空

相关推荐