logo标签列表

在一个页面上使用多个表单模态窗口

javascriptjquerytwitter-bootstraptwitter-bootstrap-3bootstrap-modal
3
我需要帮助处理Javascript问题。我正在尝试在模态框内使用多个表单显示动态名称。这是我目前的代码，但是它会显示“您确定要删除Bob吗？”，而我想点击删除Tom按钮时显示Tom。

表单：

<form role="form" id="formfield" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<input type="hidden" name="username" id="username" value="bob" /> 
<input type="hidden" name="delete_id" id="delete_id" value="45" /> 
<button type="button" name="btn" value="Delete" id="submitBtn" data-toggle="modal" data-target="#confirm-delete" class="btn btn-xs btn-danger tooltip-error no-border" style="padding:5px; width:30px; height:30px;" /><i class="fa fa-trash-o bigger-120"></i></button>
</form>

<form role="form" id="formfield" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<input type="hidden" name="username" id="username" value="tom" /> 
<input type="hidden" name="delete_id" id="delete_id" value="48" /> 
<button type="button" name="btn" value="Delete" id="submitBtn" data-    toggle="modal" data-target="#confirm-delete" class="btn btn-xs btn-danger tooltip-error no-border" style="padding:5px; width:30px; height:30px;" /><i class="fa fa-trash-o bigger-120"></i></button>
</form>

模态框：

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                Confirm Submit
            </div>
            <div class="modal-body">
                Are you sure you want to delete <span id="deletename_id">?
            </div>
            <div class="modal-footer">
                <button type="button" id="cancel" class="btn btn-default success" data-dismiss="modal">Cancel</button>
                <a href="#" id="delete" class="btn btn-danger success">Delete</a>
            </div>
        </div>
    </div>
</div>

Javascript: 

<script>
$('#submitBtn').click(function() {
     $('#deletename_id').text($('#username').val());
});

$('#delete').click(function(){
    $('#formfield').submit();
});
</script>
首先，您需要为每个表单赋予一个唯一的ID，并展示一小段您的后端代码。我假设必须有一个循环来生成这些表单。 - Adam Azad
2个回答
1

首先，您需要使用 submitBtn 类，因为您有两个具有相同 id 的元素。 请尝试以下操作：

$('.submitBtn').click(function() {
    $('#deletename_id').text($(this).parents('form').find('input').eq(0).val());
});

另一种方法是使用这种方法：

$('#deletename_id').text($(this).parents('form').find('#username').val());

In both methods, you need to find the form which contains the button clicked and , then, you need to find the input. 

$('.submitBtn').click(function() {           
  $('#deletename_id').text($(this).parents('form').find('input').eq(0).val());
});

$('#delete').click(function(){
    $('#formfield').submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<form role="form" id="formfield" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<input type="hidden" name="username" id="username" value="bob" /> 
<input type="hidden" name="delete_id" id="delete_id" value="45" /> 
<button type="button" name="btn" class="submitBtn" data-toggle="modal" data-target="#confirm-delete" class="btn btn-xs btn-danger tooltip-error no-border"><i class="fa fa-trash-o bigger-120"></i>Delete</button>
</form>

<form role="form" id="formfield" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<input type="hidden" name="username" id="username" value="tom" /> 
<input type="hidden" name="delete_id" id="delete_id" value="48" /> 
<button type="button" name="btn" class="submitBtn" data-toggle="modal" data-target="#confirm-delete" class="btn btn-xs btn-danger tooltip-error no-border"><i class="fa fa-trash-o bigger-120"></i>Delete</button>
</form>
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                Confirm Submit
            </div>
            <div class="modal-body">
            Are you sure you want to delete <span id="deletename_id"></span>?
            </div>
            <div class="modal-footer">
                <button type="button" id="cancel" class="btn btn-default success" data-dismiss="modal">Cancel</button>
                <a href="#" id="delete" class="btn btn-danger success">Delete</a>
            </div>
        </div>
    </div>
</div>

我会将点击事件处理程序更改为 $('#deletename_id').text($(this).parents('form').find('#username').val()); - 这样，如果隐藏元素的顺序发生变化，处理程序仍然可以找到正确的值（或类似地，使用所需输入字段的类）。 - blurfus
同一页面上有多个表单怎么办？ $('.submitBtn').click(function() {
$('#deletename_id').text($(this).('#formfield').find('#<?=$delete_name?>_id').val()); }); - user1282355
如果在不同的表单中怎么办？你如何使JavaScript对于每个表单都是唯一的？ - user1282355
你能给我一个例子吗？ - Mihai Alexandru-Ionut
我不懂JavaScript，但是大概是这样的。让formfield_1变成动态的，这样每个表格都会有不同的名称，例如formfield_1、formfield_2等等：<form role="form" id="formfield_1" action="<?=$_SERVER['PHP_SELF']?>" method="post"> $('.submitBtn').click(function() { $('#deletename_id').text($('#formfield_1').closest('form').find('#<?=$delete_name?>_id').val()); }); - user1282355
0
如果要使javascript獨特，則需要像動態一樣思考，例如以一種可以通過更改字符來從不同表單中獲取不同字段數據的方式來提供ID。
我的意思是，如您所見，在代碼中我在您的ID“用戶名”和“delete_id”後附加了“_1”和“_2”。此外，我還使用了一種生成引導模態框的高級方法。因此，您無需自己編寫整個代碼，即可清楚地了解此方法，請參閱此鏈接。
現在，注意，點擊按鈕後，我調用了一種方法，在此方法中，我傳遞了一個ID。如果該ID變化，那麼我可以獲得該ID上的名稱。
為了測試目的，複製任何表單並更改下劃線後的每個ID中的數字為您最喜歡的數字，並將其放在“deleteForm”函數調用之後的括號中作為參數。 

function deleteForm(formid) {
  var name = $('#username_' + formid).val();
  console.log(name);
  BootstrapDialog.show({
    title: 'Confirm Submit',
    message: 'Are you sure you want to delete '+name+' ?',
    buttons: [{
      label: 'Cancel',
      action: function(dialog) {
        dialog.close();
      }
    }, {
      label: 'Delete',
      cssClass : 'btn btn-danger',
      action: function(dialog) {
        // Do whatever you want to do here
        console.log('Do whatever you want to do here');
        dialog.close();
      }
    }]
  });

}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>





<form role="form" id="formfield_1" action="" method="post">
  <input type="hidden" name="username" id="username_1" value="bob" />
  <input type="hidden" name="delete_id" id="delete_id_1" value="45" />
  <button type="button" name="btn" value="Delete" id="submitBtn_1" class="btn btn-xs btn-danger tooltip-error no-border" style="padding:5px; width:30px;height:30px;" onclick="deleteForm(1)" /><i class="fa fa-trash-o bigger-120"></i>
  </button>
</form>

<form role="form" id="formfield_2" action="" method="post">
  <input type="hidden" name="username" id="username_2" value="tom" />
  <input type="hidden" name="delete_id" id="delete_id_2" value="48" />
  <button type="button" name="btn" value="Delete" id="submitBtn_2" class="btn btn-xs btn-danger tooltip-error no-border" style="padding:5px; width:30px; height:30px;" onclick="deleteForm(2)" /><i class="fa fa-trash-o bigger-120"></i>
  </button>
</form>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接