Question

我搜索过（相信我！）但由于某种原因，我还没有找到我想要的答案，尽管我很确定我不会问一个独特的问题。

背景：我根据一个人的婚姻状况动态创建一些更新表格。鉴于一个人一生中可以多次合作或结婚，可能会有多个合伙人与一个人相关联。行。

所以 HTML 表单（不是真实的，而是模拟的）：

<form id="updateDetails" action="..." method="...">

<input type="text" id="partnerName" value="John Smith" name="partnerName">
<input type="text" id="marriageDate" value="01-01-1987" name="marriageDate">
...
<input type="submit" id="updatePartner" ...>

</form>

此页面上可能有多个副本，所有副本都具有相同的表单ID和相同的表单元素。只有价值不同。

jQuery ：

$(function() {

    $("#updatePartner").click(function(event) {
    event.preventDefault();
//Some form validation is done here - if field not filled in, spit out error message

    var partnerName = $("partnerName").val();
    var marriageDate = $("marriageDate").val();
    var data_string = 'partnerName='+ partnerName+ '&marriageDate=' + marriageDate;

    $.ajax({
    type: "POST",
    url: "theProcessFile.php",
    data: dataString,
    success: function() {
            // do some fancy jQuery stuff here
           }
    });
    return false;
    });
    });

我的问题：我如何对现有的jQuery代码进行操作，以确保仅选择并提交单击提交按钮（#updatePartner）的表单元素。

我相信我应该使用像

这样的东西

var form = $(this).closest('form');

但对于我的生活（我不是最流利的javascript）不能完全弄清楚我将如何使用此变量提交（绑定）仅适用于此特定表单的表单值。不要求任何困难，我认为这是真正的基础。

注意：所有代码都有效（包括用于更新数据库的php处理脚本） - 如果只有一个表单，它就会完成它应该做的事情。一出现第二个表格，就会感到困惑。

在此先感谢您的帮助，但请不要认为我会理解简短的答案： - （

干杯

Answer 1

首先，您不能拥有两个或多个具有相同ID的元素。

您应该将代码更改为：

<form action="..." method="..." class="ajaxed">

<input type="text" value="John Smith" name="partnerName">
<input type="text" value="01-01-1987" name="marriageDate">
...
<input type="submit"  ...>

</form>

和

$(function() {

    $("form.ajaxed").submit(function(e) {
        e.preventDefault();

        $.ajax({
        type: "POST",
        url: "theProcessFile.php",
        data: $(this).serialize(),
        success: function() {
            // do some fancy jQuery stuff here
           }
        });
        return false;
    });
});

Answer 2

您不能拥有多个ID相同的元素。它看起来不像你甚至通过id引用表单，所以只需完全放弃它。

我想说选择相关表格的最佳方式是：

var form = $(this).parent("form");

Answer 3

尝试使用

$('form').submit(function(){
    //this prevents the form from submitting correctly
    return false;
})

改为

在页面上提交多个动态创建的from之一

3 个答案: