Girdi değeri, düğmeyi tıkladıktan sonra boştur

Question

Bootstrap modal iletişim kutusunu kullanıyorum. Benim modal:

<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> 

Ben düğmeleri:

<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> 

Ve senaryo vardır:. ("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> 

çağrı işlevi sonra $ eleman tıklayın $ ('# colorData') val() boş değil.Ama! Eğer modal butona bastığımda boş değer ve colorData giriş değeri boş ise boştur. Niye ya? Denetleyiciye veri göndermek istiyorum, ancak değer sıfırlandı. İngilizcem için üzgünüm.

Answer 1

Sen <button>id="postAnswer" ile eleman ayrıca, class="btn" bunu tıkladığınızda o düğme value niteliği olmadığından bu yüzden, $(".btn").click(function() { yöntem ayrıca (denilen ve var color = $(this).val(); döner null edilir sahiptir.

doğru bu işlemek için vermek

-3 'renk' düğmeleri (diyelim)

<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> 

ve değiştirmek ilk komut için ek sınıf adı

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