[英]How to specify correct input using jQuery Ajax to submit multiple forms (variable number)
我有一个包含多种形式的网页。 表单是动态生成的,表单的数量也有所不同。
我正在使用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>
这里的问题是,您有多个输入class gene1
,多个输入类gene2
,等等...正如您提到的,当您调用$("input.gene1").val()
jQuery返回的值。 首先将input
与class gene1
匹配。
您要在此处选择类gene1
的input
,该input
与被单击的按钮最接近 。 您可以通过从按钮开始并运行DOM结构来实现
例如,在您的代码中,替换
var gene1 = $.trim( $("input.gene1").val() );
同
var gene1 = $.trim( $(this).parent().siblings("input.gene1").val() );
对其他输入依此类推
describe_label输入是嵌套的,因此需要额外的努力:您可以使用children()
方法:
var suggested_label = $.trim($(this).parent().siblings("div").children("input.suggested_label").val());
注意 : $(this)
表示此上下文中的单击按钮
我认为从概念上讲,解决方案如下:
$('form').each( function(){ ... })
) var formNum = 0
,然后在表单循环中的每个迭代中添加一个变量,例如: formNum++
) .attr('id','ajax_form_' + formNum)
$('#ajax_form_' + formNum + ' input[name="sentence"])...
让我知道您是否需要更多有关此操作的指导!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.