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而不是类，我认为浏览器只选择第一个匹配的ID并忽略其余的ID。希望它有所帮助。

从模态传递按钮值

3 个答案: