ボタンの値をモーダルから渡す

Question

メインウィンドウのボタン値をモーダルから入力値に渡したいとします。

私は、検索ボタンをクリックし

$('#pickCustomer').click(function() { 
 
    var id = $("#customerID").val(); 
 
    var name = $("#pickCustomer").val(); 
 
    $("#kodep").val(id); 
 
    $("#namap").val(name); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<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.7/js/bootstrap.min.js"></script> 
 

 
<div style="width:32%;min-height:400px;border:1px solid #ccc;border-radius:5px;float:left;padding:1%;"> 
 
    <table> 
 
    <tr> 
 
     <td>Customer Name:</td> 
 
     <td> 
 
     <input id="kodep" name="kodep" type="hidden" value=""> 
 
     <input style="float:left;width:75%;margin-right:7px;" id="namap" name="namap" type="text" value=""> 
 
     <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#customertable">Search</button> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div> 
 

 

 
<div style="width:80%;left:30%;display:none;" id="customertable" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
     <table id="tablehasil" class="display" style="width:100%;"> 
 
      <thead> 
 
      <tr> 
 
       <th>Customer ID</th> 
 
       <th>Name</th> 
 
       <th>Address</th> 
 
       <th>Telp</th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr> 
 
       <td>1001<input id="customerID" type="hidden" value="1001"></td> 
 
       <td><button id "pickCustomer" style="background:none;border:none;font-size:13px;" value="test" data-dismiss="modal">testing</button></td> 
 
       <td>USA</td> 
 
       <td>0000000000</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

は、モーダルポップアップが表示され、私はそれをソートするのdataTable JSを使用して、加入者のリストがあります。

私はモーダルポップアップにあるボタン（顧客名）をクリックすると、入力された名前は、私が欲しいの値で満たされていない、と私はあなたがしているクロームコンソール

Answer 1

上の任意のエラーが表示されませんPHPループの中にいくつかのHTML要素を構築し、複数の要素に同じID（customerIDとpickCustomer）を設定しています。 IDは一意であることを意味します。クイックフィックスではなく、IDのクラス名を使用するようになり、ここでの例です。また

<?php 
    $sqlpeg="select * from customer_table"; 
    $qpeg=mysql_query($sqlpeg); 
    while($aspeg=mysql_fetch_assoc($qpeg)){ 
     echo' 
      <tr> 
       <td>'.$aspeg["customer_id"].'<input class="customerID" type="hidden" value="'.$aspeg["customer_id"].'"></td> 
       <td><button class="pickCustomer" style="background:none;border:none;font-size:13px;" value="'.$aspeg["customer_name"].'" data-dismiss="modal">'.$aspeg["nama"].'</button></td> 
       <td>'.$aspeg["address"].'</td> 
       <td>'.$aspeg["telp"].'</td> 
      </tr> 
     '; 
    } 
?> 

<script> 
    $('.pickCustomer').click(function() { 
     var id = $(this).parents("tr").find(".customerID").val(); 
     var name = $(this).val(); 
     $("#kodep").val(id); 
     $("#namap").val(name); 
    }); 
</script> 

Answer 2

、あなたが不足しているが<button id"pickCustomer"で等号... は、これは... <button id="pickCustomer"でなければなりません

Answer 3

次のように入力要素のボタンでクラスを使用してみてください。

<td>'.$aspeg["customer_id"].'<input class="customerID" type="hidden" value="'.$aspeg["customer_id"].'"></td> 
       <td><button class="pickCustomer" style="background:none;border:none;font-size:13px;" value="'.$aspeg["customer_name"].'" data-dismiss="modal">'.$aspeg["nama"].'</button></td> 
       <td>'.$aspeg["address"].'</td> 
       <td>'.$aspeg["telp"].'</td> 

また、コードのjqueryセクションで次の変更を行ってください。

$('.pickCustomer').click(function() { 
      var id=$(this).prev().val(); 
      var name=$(this).val(); 
      $("#kodep").val(id); 
      $("#namap").val(name); 
    }); 

それはクラスpickCustomerとボタンで現在クリックされた（これを使用して）要素を選択します、それはそれはすぐに入力された要素に先行年代の値を取得し、ID変数に代入します。あなたがクラスの代わりにidを使っていたので、ブラウザは最初に一致するidを選択して残りを無視していたと思います。それが役に立てば幸い。