Jquery submission on two forms

Question

I have two forms, one one is validated it hides and shows the next form, then submits. However by doing this, it only posts one forms variables.

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.

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:

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

Answer 1

First, your not using thelabel element correctly. 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.

Next, div elements do not have a name attribute. Only form fields that can and will submit their data via form submission can have a name .

Also, there is no need for multiple JQuery document.ready() handlers. You can place all the code you want run when the document is ready inside of a single 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.

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.

As for your main question, just use a single form but hide sections of it as needed. It's best to define sections of a form using the fieldset element, which also aids in accessibility.

 $(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>