將模態值傳遞到引導表

Question

我寫了一個表，其中有Promo code個細節和一個按鈕。當點擊該按鈕時，彈出窗口（模態）將打開。輸入所有彈出的數據後（模態）應該被複制到表中，並且應該創建一個包含New按鈕的新行。下面是代碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="well">Promo code</div> 
 
<table class="table table-bordered"> 
 
    <thead> 
 
    <tr> 
 
     <th>Promo code</th> 
 
     <th>Price</th> 
 
     <th>Total allocation</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>INFSG7089</td> 
 
     <td>USD 450</td> 
 
     <td>1000</td> 
 
    </tr> 
 
    <tr> 
 
     <td>GENSI1517</td> 
 
     <td>USD 400</td> 
 
     <td>500</td> 
 
    </tr> 
 
    </tbody> 
 
    <tfoot> 
 
    <tr> 
 
     <td> 
 
     <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="">New</button> 
 
     </td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    </tfoot> 
 
</table> 
 
<!-- Modal --> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Promo code details</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <form action="#" method="post"> 
 
      <div class="login-fields"> 
 
      <div class="field"> 
 
       <label for="promocode">Promo code:</label> 
 
       <input type="text" id="promotitle" name="promotitle" value="" class="login username-field form-control" /> 
 
      </div> 
 
      <!-- /field --> 
 
      <div class="field"> 
 
       <label for="password">Price:</label> 
 
       <div class="row"> 
 
       <div class="col-md-3 col-xs-3"> 
 
        <select class="form-control"> 
 
        <option value="USD">$ USD</option> 
 
        <option value="SGD">$ SGD</option> 
 
        <option value="EUR">€ EUR</option> 
 
        <option value="AUD">$ AUD</option> 
 
        <option value="JPY">¥ JPY</option> 
 
        <option value="CHN">¥ CHN</option> 
 
        <option value="THB">฿ THB</option> 
 
        <option value="MYR">RM MYR</option> 
 
        </select> 
 
       </div> 
 
       <div class="col-md-9 col-xs-9"> 
 
        <input type="number" id="a_fee" name="admin fee" value="" class="login password-field form-control" /> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="field"> 
 
       <label for="password">Total allocation:</label> 
 
       <input type="number" id="allocation" name="allocation" value="" class="login password-field form-control" /> 
 
      </div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-primary" data-dismiss="modal" id="addToTable">Submit</button> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

的jsfiddle：​​
我該怎麼辦呢？

Answer 1

這裏：如預期

$('#addToTable').click(function() { 
 
    var prom = $('#promotitle').val(), 
 
     cur = $('select').val(), 
 
     price = $('#a_fee').val(), 
 
     allocation = $('#allocation').val(); 
 

 
    $('table tbody').append('<tr><td>' + prom + '</td><td>' + cur + ' ' + price + '</td><td>' + allocation + '</td></tr>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="well">Promo code</div> 
 
<table class="table table-bordered"> 
 
    <thead> 
 
    <tr> 
 
     <th>Promo code</th> 
 
     <th>Price</th> 
 
     <th>Total allocation</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>INFSG7089</td> 
 
     <td>USD 450</td> 
 
     <td>1000</td> 
 
    </tr> 
 
    <tr> 
 
     <td>GENSI1517</td> 
 
     <td>USD 400</td> 
 
     <td>500</td> 
 
    </tr> 
 
    </tbody> 
 
    <tfoot> 
 
    <tr> 
 
     <td> 
 
     <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="">New</button> 
 
     </td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    </tfoot> 
 
</table> 
 
<!-- Modal --> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Promo code details</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <form action="#" method="post"> 
 
      <div class="login-fields"> 
 
      <div class="field"> 
 
       <label for="promocode">Promo code:</label> 
 
       <input type="text" id="promotitle" name="promotitle" value="" class="login username-field form-control" /> 
 
      </div> 
 
      <!-- /field --> 
 
      <div class="field"> 
 
       <label for="password">Price:</label> 
 
       <div class="row"> 
 
       <div class="col-md-3 col-xs-3"> 
 
        <select class="form-control"> 
 
        <option value="USD">$ USD</option> 
 
        <option value="SGD">$ SGD</option> 
 
        <option value="EUR">€ EUR</option> 
 
        <option value="AUD">$ AUD</option> 
 
        <option value="JPY">¥ JPY</option> 
 
        <option value="CHN">¥ CHN</option> 
 
        <option value="THB">฿ THB</option> 
 
        <option value="MYR">RM MYR</option> 
 
        </select> 
 
       </div> 
 
       <div class="col-md-9 col-xs-9"> 
 
        <input type="number" id="a_fee" name="admin fee" value="" class="login password-field form-control" /> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="field"> 
 
       <label for="password">Total allocation:</label> 
 
       <input type="number" id="allocation" name="allocation" value="" class="login password-field form-control" /> 
 
      </div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-primary" data-dismiss="modal" id="addToTable">Submit</button> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>