从模态传递按钮值

问题描述：

我想将按钮值从模态传递到主窗口上的输入值。从模态传递按钮值

$('#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来排序。

当我点击按钮（用户名）是在模式弹出，输入名称不被我想要的值满了，我没有看到铬控制台

答

你对任何错误在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>

非常感谢关于重复ID的提及。我按照你的建议改变。但仍然如Andrew Halpern回答所述，缺少“pickCustomer”类的等号“ – Gumilar

@Gumilar我没有注意到这一点。我编辑了我的答案以添加缺少的'='。 – Titus

答

而且，你错过了等号在<button id"pickCustomer" ... 这应该是<button id="pickCustomer" ...

非常感谢，是的，我忘记了等号。和Titus答复提到关于重复的id也解决了我的问题 – Gumilar

答

请尝试在按钮中使用类，如下所示。

<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，而忽略了其余的。希望能帮助到你。

从模态传递按钮值

相关推荐