Wert der Eingabe ist leer nach dem Klicken auf die Schaltfläche

Question

Ich benutze modale Bootstrap-Dialog. Mein 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> 

Ich habe Tasten:

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

Und ich habe Skript: ("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> 

Nach Anruffunktion $ klicken Element $ ('# colorData'). val() ist nicht leer. Aber! Wenn ich auf die Schaltfläche "Modal" klicke, wird ein leerer Wert und der Wert der Eingabe colorData ist leer. Warum? Ich möchte Daten an den Controller senden, aber der Wert wird zurückgesetzt. Entschuldigung für mein Englisch.

Answer 1

Sie <button> Element mit id="postAnswer" auch class="btn" hat, so dass, wenn Sie darauf klicken, die $(".btn").click(function() { Verfahren auch genannt wird und var color = $(this).val(); kehrt null (weil diese Taste nicht value Attribut hat.

dies richtig zu handhaben, geben ein zusätzlicher Klassennamen an die 3 'Farbe' Buttons (sagen wir)

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

und ändern Sie das erste Skript