1

我有一个包含多个表单的网页。表格是动态生成的,表格的数量会有所不同。

我正在使用 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;
});
});

我的表格如下所示。在给定页面上,句子和建议标签的表单内容会有所不同。

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

2 回答 2

2

这里的问题是你有几个输入与 class gene1,几个输入与 classgene2等等......正如你所提到的,当你调用$("input.gene1").val()jQuery 时返回第一个input与 class匹配的值gene1

您在这里想要的是选择最接近单击按钮的inputwith 类。您可以通过从按钮开始并遍历 DOM 结构来实现它gene1

例如,在您的代码中,替换

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

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

以此类推其他输入

建议标签输入需要额外的努力,因为它是嵌套的:您可以使用该children()方法:

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

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

这是一个完整的例子

于 2013-11-14T01:18:30.097 回答
0

我认为从概念上讲,解决方案如下:

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

如果您需要更多关于如何执行此操作的指导,请告诉我!

于 2013-11-14T00:51:11.610 回答