如何使用 jQuery Ajax 指定正确的输入以提交多个表单(可变编号）

How to specify correct input using jQuery Ajax to submit multiple forms (variable number)

本文关键字：表单 提交 编号 输入 Ajax jQuery 何使用      更新时间：2023-09-26

我有一个包含多个表单的网页。表单是动态生成的，表单数量各不相同。

我正在使用jQuery AJAX在不刷新页面的情况下提交表单，但它没有为某些表单提交正确的信息。我遇到的问题是jQuery似乎只从页面上的第一个表单中获取信息。因此，如果第一种形式有<input value="sentence A" name="sentence">，那么"句子A"将作为所有表格的句子提交，即使页面上的其他表单应该有不同的句子与之关联。

我见过一些涉及使用表单ID的多形式jQuery解决方案，但我认为我不能使用ID，因为表单是生成的并且数量各不相同。

任何建议将不胜感激！下面提供了我的jQuery和一个示例表单html。

我正在使用以下jQuery提交页面上的表单（基于本教程）

$(document).ready(function() {
$(".button").click(function() {
    var gene1 = $.trim( $("input.gene1").val() );
    var gene2 = $.trim( $("input.gene2").val() );
    var sentence = $.trim( $("input.sentence").val() );
    var suggested_label = $.trim( $("input.suggested_label").val() );
    var dataString = 'gene1='+gene1 + '&gene2=' + gene2 + '&sentence=' + 
    sentence + '&suggested_label=' + suggested_label;
    $.ajax({
        type : "POST",
        url : "/submit_label",
        data : dataString,
        success : function(){
            alert(dataString);
        }
    });
    return false;
});
});

我的表单如下所示。在给定页面上，句子和suggested_label的表单内容会有所不同。

<form action="" name="label_form">
<input value="  5058 " name="gene1" type="hidden" class="gene1">
<input value="  8411 " name="gene2" type="hidden" class="gene2">
<input value="To further demonstrate..." name="sentence" type="hidden" class="sentence">
<div class="textbox">
    <input placeholder="Suggested Label" name="suggested_label" type="text" class="suggested_label">
</div>
<div>
    <button class="button">Submit</button>
</div>
</form>

这里的问题是你有几个输入类gene1，几个输入类gene2，等等......如前所述，当您调用$("input.gene1").val()时，jQuery 返回与类gene1的第一个匹配input的值。

此处要选择类gene1最接近单击的按钮的input。您可以通过从按钮开始并访问 DOM 结构来实现它

例如，在代码中，将

var gene1 = $.trim( $("input.gene1").val() );

跟

var gene1 = $.trim( $(this).parent().siblings("input.gene1").val() );

以此类推，用于其他输入

suggested_label输入需要额外的工作，因为它是嵌套的：您可以使用 children() 方法：

var suggested_label = $.trim($(this).parent().siblings("div").children("input.suggested_label").val());

注意：$(this)表示此上下文中单击的按钮

这是一个完整的示例

我认为从

概念上讲，解决方案如下：

  1. 循环浏览页面上的表单（使用 $('form').each( function(){ ... }) ）
  2. 保留一个计数器来动态地为每个表单分配一个 ID（设置一个变量，如 var formNum = 0 然后在表单循环中的每次迭代中添加它，如：formNum++ ）
  3. 然后，做.attr('id','ajax_form_' + formNum)
  4. 现在，您可以引用每个特定表单的字段：$('#ajax_form_' + formNum + ' input[name="sentence"])...

如果您需要有关如何执行此操作的更多指导，请告诉我！

相关文章：