[英]Jquery submission on two forms
I have two forms, one one is validated it hides and shows the next form, then submits.我有两个 forms,其中一个经过验证,它隐藏并显示下一个表单,然后提交。 However by doing this, it only posts one forms variables.
然而,通过这样做,它只发布了一个 forms 个变量。
I came up with one solution to input form one inputs into hidden inputs in form2, but i'm wondering if there's a better solution as ill be adding loads more inputs eventually.我想出了一个解决方案,将表单 1 输入输入到 form2 中的隐藏输入,但我想知道是否有更好的解决方案,因为最终会添加更多的输入。
Html: Html:
<div name="div1" style="display:block;">
<label>Div1</label>
<form name="form1" method="post">
<input type="text" name="testa">
<input type="text" name="testb">
<input type="submit" value="Submit">
</form>
</div>
<div name="div2" style="display:none;">
<label>Div2</label>
<form name="form2" method="post">
<input type="" name="testa">
<input type="" name="testb">
<input type="text" name="testc">
<input type="text" name="testd">
<input type="submit" value="Submit">
</form>
</div>
js: js:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
$("form[name='form1']").validate({
rules: {
testa: "required",
testb: "required"
},
submitHandler: function(form) {
//form.submit();
alert('Going to next step...');
var value1 = $('input[name="testa"]').val();
var value2 = $('input[name="testb"]').val();
$('input[name="testa"]').val(value1);
$('input[name="testb"]').val(value2);
$('[name="div1"]').hide();
$('[name="div2"]').show();
return false;
}
});
});
$(document).ready(function () {
$("form[name='form2']").validate({
rules: {
testc: "required",
testd: "required"
},
submitHandler: function(form) {
alert('Submitting');
form.submit();
}
});
});
</script>
First, your not using thelabel
element correctly.首先,您没有正确使用
label
元素。 It needs a for
attribute that has a value that is the id
of the form element that the label is "for" or it needs to wrap the element it is for.它需要一个
for
属性,该属性的值是 label 是“for”的表单元素的id
,或者它需要包装它所针对的元素。
Next, div
elements do not have a name
attribute.接下来,
div
元素没有name
属性。 Only form fields that can and will submit their data via form submission can have a name
.只有能够并且将要通过表单提交提交数据的表单域才能有
name
。
Also, there is no need for multiple JQuery document.ready()
handlers.此外,不需要多个 JQuery
document.ready()
处理程序。 You can place all the code you want run when the document is ready inside of a single document.ready()
.您可以将文档准备就绪时要运行的所有代码放在单个
document.ready()
中。 And speaking of JQuery, unless you need something very specific to the JQuery validation library, regular HTML can do the same thing you are doing but without the JQuery. You could just add the required
attribute to the required elements.说到 JQuery,除非您需要一些非常特定于 JQuery 验证库的东西,否则常规 HTML 可以做与您正在做的相同的事情,但没有 JQuery。您可以将
required
属性添加到所需的元素。
And, you should not use the same name
for multiple elements within a form, except in the case of checkboxes and radio buttons as they act as groups of related choices.并且,您不应该对表单中的多个元素使用相同的
name
,但复选框和单选按钮除外,因为它们充当相关选择的组。
As for your main question, just use a single form
but hide sections of it as needed.至于您的主要问题,只需使用一个
form
,但根据需要隐藏其中的部分。 It's best to define sections of a form using the fieldset
element, which also aids in accessibility.最好使用
fieldset
元素定义表单的各个部分,这也有助于提高可访问性。
$(document).ready(function () { $("form[name='form']").validate({ rules: { test1a: "required", test1b: "required", test2a: "required", test2b: "required" }, submitHandler: function(form) { //form.submit(); alert('Going to next step...'); var value1 = $('input[name="testa"]').val(); var value2 = $('input[name="testb"]').val(); $('input[name="testa"]').val(value1); $('input[name="testb"]').val(value2); $('#first').hide(); $('#second').show(); return false; } }); });
.hidden { display:none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script> <form name="form" method="post"> <fieldset id="first"> <legend>First Set of Questions</legend> <input type="text" name="test1a"> <input type="text" name="test1b"> <input type="submit" value="Submit"> </fieldset> <fieldset id="second" class="hidden"> <legend>Second Set of Questions</legend> <input type="" name="test2a"> <input type="" name="test2b"> <input type="text" name="testc"> <input type="text" name="testd"> <input type="submit" value="Submit"> </fieldset> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.