从模态传递按钮值

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对其进行排序。

当我单击模式弹出窗口中的按钮（客户名称）时，输入名称未填充我想要的值，并且我在 chrome 控制台上看不到任何错误

Answer 1

另外，您缺少<button id"pickCustomer" 中的等号... 这应该是<button id="pickCustomer"...

Answer 2

您正在 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 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 而忽略了其余的。希望对您有所帮助。