Question

我有以下代码在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]

如果我单击Person Name3，它会发送Person Name6的值，无论我点击哪个Delete按钮。

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

Answer 1

从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>

Answer 2

你的问题出现在这行的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)) { 
...
});

Answer 3

更简单的操作可能是为每个人的姓名设置一个唯一的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();

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

3 个答案: