從模態傳遞按鈕值

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意味着獨特。速戰速決將使用類名來代替編號，這裏有一個例子：

<?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而不是class，我認爲瀏覽器只選擇了第一個匹配的id，而忽略了其餘的。希望能幫助到你。