CODEWITHSUNDEEP
javascriptjqueryhtmlforms
soonic
soonic

Reputation: 615

Validate and submit two forms as one jquery

HTML

<button type="submit" name="save" id="btn"> ok </button>

<div id="acc">
    <h3>First header</h3>
    <form name="form1" id="id_form1" method="post">
        <div><input type="text" id="firstname" name="firstname" required></div>
    </form>
    <h3>Second header</h3>
    <form name="form2" id="id_form2" method="post">
        <div><input type="text" id="lastname" name="lastname" required></div>
    </form>
    <h3>Third header</h3>
    <form name="form3" id="id_form3" method="post">
        <div><input type="text" id="address" name="address" required></div>
        <button type="submit" name="create"> create </button>
    </form>
</div>

JS

$(document).ready(function() {      
    $( "#acc" ).accordion({
        collapsible: true,
        heightStyle: "content",
        active: false
    });

    $('#btn').click(function() {
        $('#id_form1').submit();
    });

    $('#id_form1').validate({
        ignore: "",
        invalidHandler: function(event, validator) {
            alert('ttt');
        },
    });
});

Please visit the link jsfiddle

I got there 3 headers (panels). The first two I would like to validate and submit as one after pressing the OK button, but I can't put them into the one form in the html code because of the accordion header <h3>. The third panel is just for this example (doesn't need to be coded now), it's separate one. As you noticed the code under the above link works only with one form for validation.

Upvotes: 1

Views: 720

Answers (2)

Barmar
Barmar

Reputation: 781088

Put hidden inputs in one form, and have the OK button copy the values from the inputs of the second form to them after validating.

<button type="submit" name="save" id="btn"> ok </button>

<div id="acc">
    <h3>First header</h3>
    <form name="form1" id="id_form1" method="post">
        <div><input type="text" id="firstname" name="firstname" required></div>
        <input type="hidden" id="hidden_lastname" name="lastname">
    </form>
    <h3>Second header</h3>
    <form name="form2" id="id_form2" method="post">
        <div><input type="text" id="lastname" name="lastname" required></div>
    </form>
    <h3>Third header</h3>
    <form name="form3" id="id_form3" method="post">
        <div><input type="text" id="address" name="address" required></div>
        <button type="submit" name="create"> create </button>
    </form>
</div>

jQuery:

$("#btn").click(function() {
    if ($("#id_form1").valid() && $("#id_form2").valid()) {
        $("#id_form2 input").each(function() {
            $("#id_form1 #hidden_" + this.id).value(this.value);
        });
        $("#id_form1").submit();
    }
});

Upvotes: 1

Karl Galvez
Karl Galvez

Reputation: 843

Write your own handler for the submit. In the handler you can validate your data, get the values from the forms (look at jQuery serialize), then use jQuery's post to send the data. Something like this (not real code, but should get you there)

$("#btn").click(function(){
    if( input1.isValid() && input2.isValid){
        var formInputSerial = $('form').serialize();
        $.post("http://whereToSendData", formInputSerial, callbackFunction(ifNeeded))
    }
}

You will have to implement the the validation checks for the input. You may need to add a common to class to the input then use $('.commonClass').serialize(); I'm not sure how the above will work with multiple forms.

Upvotes: 0

Related Questions