Question

我有动态按钮

当我点击按钮时，弹出框应该出现一个文本框。

我的按钮代码是

echo '<button type="submit" class="btn btn-success"  data-toggle="modal" data-target="#myModal" value='.$row['country_id'].' id="update" >Update</button>';

我的jQuery代码是

<script>
$(document).ready(function(){
  $("#update").click(function(){ 
      var butval = $("#update").val();
      $("#ctext").val(butval);
  });
});

模态弹出窗口是

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <input type="text" id="ctext" value="<?php  ;?>">
            </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-default" name="update">
            </div>
        </div>
    </div>
</div>

Answer 1

对于这种情况，您必须使用HTML5的数据属性。

echo '<button type="submit" class="btn btn-success"  data-toggle="modal" data-target="#myModal" data-btn="'..$row['country_id']..'" value='.$row['country_id'].' id="update" >Update</button>';

在Modal弹出窗口中，

这是解决问题的神奇脚本。

<script>
$(document).ready(function(){
  $("#update").click(function(){ 
      // this is the value you get which is in data attribute of update button.
      var btn_value= $(this).data('btn');
      $('#myModal')
      .find('#ctext').val(btn_value).end()                            
      .modal('show'); 
  });
</script>

Answer 2

使用类更新了多个按钮：您可以尝试以下操作。首先从按钮中删除data-target="#myModal"然后获取值并将其写入输入然后打开模态：

    $(document).ready(function(){
    	  $(".update").click(function(){ 
    	      var butval = $(this).val();     
    	      $("#ctext").val(butval);
    	      $("#myModal").modal('show');
    	  });
    	});

<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/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <button type="submit" class="btn btn-success update"   value='2'  >Update</button> 
<button type="submit" class="btn btn-success update"   value='3'  >Update</button> 
  <!-- see the button attributes changes  -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <input type="text" id="ctext" >
            </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-default" name="update">
            </div>
        </div>
    </div>
</div>

Answer 3

@suchit感谢您的帮助。这段代码正在运作

strcpy

如何在模型的文本框中弹出按钮值？

3 个答案: