删除按钮发送另一个表单的值

本文关键字：表单 另一个 按钮 删除 | 更新日期: 2023-09-27 18:34:06

我有以下代码，它在 for 循环中创建多个不同的表单以删除数据库中的不同值：

    @foreach (var item in Model.value)
        {
            <script>var temp = {'value' : '@item.name'}</script>
            <form class="formStyle" id="allCurrentNames_@item.name" method="post" action="">
                <input type="hidden" id="part_name_@item.name" value="@item.name"/>
                <button class="partDelete" onclick="deletePart(temp);return false;">Delete</button>
            </form>
        }

以下是 deletePart（temp） 函数： 

function deletePart(temp) {
    var personName = $("input#part_num_"+temp.value).val();
    var dataString = 'partnumber=' + partnumber;
    $.ajax({
        AJAX STUFF
    })
}

假设我将有如下所示的内容：

Person Name1       [DELETE]
Person Name2       [DELETE]
Person Name3       [DELETE]
Person Name4       [DELETE]
Person Name5       [DELETE]
Person Name6       [DELETE]
如果我单击"人名3"，

无论我单击哪个"删除"按钮，它都会始终发送"人名"6的值。

任何帮助都非常感谢！谢谢你的时间！

删除按钮发送另一个表单的值

从 html 中删除你的 JavaScript

 @foreach (var item in Model.value)
        {
            <form class="formStyle" id="allCurrentNames_@item.name" method="post" action="">
                <input type="hidden" id="part_name_@item.name" value="@item.name"/>
                <button class="partDelete">Delete</button>
            </form>
        }

并像这样更改您的JavaScript代码

$('.partDelete').click(function(){
    var $this = $(this);
    var partnumber = $this.parent().find('input').val();
    var dataString = 'partnumber=' + partnumber;
    //ajax
    return false;
});


$('.partDelete').click(function(){
		var $this = $(this);
    var partnumber = $this.parent().find('input').val();
    var dataString = 'partnumber=' + partnumber;
		alert(dataString)
    
    return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="formStyle" id="allCurrentNames_1" method="post" action="" onsubmit="return false;">
  <input type="hidden" class="part_name" value="1"/>
  <button class="partDelete">Delete</button>
</form>
<form class="formStyle" id="allCurrentNames_2" method="post" action="" onsubmit="return false;">
  <input type="hidden" class="part_name" value="2"/>
  <button class="partDelete">Delete</button>
</form>
<form class="formStyle" id="allCurrentNames_2" method="post" action="" onsubmit="return false;">
  <input type="hidden" class="part_name" value="2"/>
  <button class="partDelete">Delete</button>
</form>

一个更简单的操作可能是为每个人的姓名设置一个唯一的 ID。您只需要替换两行代码。构建表单时，请替换：

<input type="hidden" id="part_name" value="@item.name"/>
<button class="partDelete" onclick="deletePart();return false;">Delete</button>

有了这个：

<input type="hidden" id="part_name_@item.name" value="@item.name"/>
<button class="partDelete" onclick="deletePart(@item.name);return false;">Delete</button>

并在 deletePart js 中，替换：

function deletePart() {
var personName = $("input#part_num").val();

有了这个：

function deletePart(id) {
var personName = $("input#part_name" + id).val();

你的问题出在你这行的javascript中：

var personName = $("input#part_num").val();

由于您在循环中呈现这些表单，因此您将有多个输入字段，其中 part_num 作为 id。 JQuery 将为您提供找到的第一个与您的选择器匹配的实例，这就是为什么您总是发布第一人称的值。

您可以通过找出事件来自哪种形式然后选择正确的part_num来轻松解决此问题。

var personName = $('#correct_form_id #part_num').val();

希望这有帮助！

编辑：添加一些示例代码

一种方法可能是捕获表单提交并自行处理。例如：

$( "form" ).submit(function( event ) {
  var personName = $(this).find('#part_num').val();
  // Do what you want with this information
  // prevents the form from posting, if that is desired
  event.preventDefault(); 
});

现在，您的页面上可能还有其他不希望被此处理程序捕获的表单，因此您可以向在循环中生成的表单添加一个类，以验证是否仅捕获正确的事件。然后，您的定义将如下所示：

$('form.some_class').submit(function(event)) { 
...
});
相关文章：