我有一个包含多个表单的网页。表格是动态生成的,表格的数量是变化的。
我使用 jQuery AJAX 在不刷新页面的情况下提交表单,但它没有为某些表单提交正确的信息。我遇到的问题是 jQuery 似乎只从页面上的第一个表单中获取信息。所以,如果第一种形式有 <input value="sentence A" name="sentence">
,那么“句子 A”将作为所有表格的句子提交,即使页面上的其他表格应该有不同的句子与之关联。
我见过一些涉及使用表单 ID 的多表单 jQuery 解决方案,但我认为我不能使用 ID,因为表单是生成的并且数量各不相同。
如有任何建议,我们将不胜感激!下面提供了我的 jQuery 和示例表单 html。
我正在使用以下 jQuery 提交页面上的表单(基于 this tutorial )
$(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 返回 first 匹配 input
类 gene1
.
您在这里想要的是选择类 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)
表示在此上下文中单击的按钮
关于javascript - 如何使用 jQuery Ajax 指定正确的输入以提交多个表单(可变数字),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19967430/