how can i get values from multiple forms and submit them?

Question

I have several forms inside DIVS on my page.

I have one form which contains a text field and is always visible, and this is where the user hits 'enter' key and submits...

I want to get values selected in the other forms on the page, and submit them all together, not one by one, so that my PHP code can use "ALL VALUES" and search a mysql database...

Is this possible by javascript using the "<form onsubmit>" to call a javascript?

any codes would be appreciated...

thanks

Answer 1

You need to make a script which will collect the data from the forms, and inject them into the only form that is visible. Only one form will be submitted, you can not submit multiple forms. You can create multiple hidden fields, or you can construct a single hidden field in that form, then use javascript to collect all the data from the various forms, then create a JSON string, set the value of the hidden one, and submit.

Edit: Say you have a single hidden input like this:

<input type='hidden' name='hiddenfield' id='hiddenfield' />

you could use JQuery to do this:

$('#hiddenfield').val('myvalue');

To get the value from other forms is as simple as calling $('#elementid').val()

before form submission. To use JQuery, go to the jquery website, download the library, and link it (follow their installation guide).

Answer 2

Without some Javascript hocus-pocus, you can't. One form = one request.

You can do it with JS, and you have a few options. The easiest would be to loop through all the forms on the page, and basically duplicate all the input fields and values into one form and then submit that combined form.

With jQuery it'd go something like this:

$("form").submit(function() {
    combineAndSendForms();
    return false;        // prevent default action
});

function combineAndSendForms() {
    var $newForm = $("<form></form>")    // our new form.
        .attr({method : "POST", action : ""}) // customise as required
    ;
    $(":input:not(:submit, :button)").each(function() {  // grab all the useful inputs
        $newForm.append($("<input type=\"hidden\" />")   // create a new hidden field
            .attr('name', this.name)   // with the same name (watch out for duplicates!)
            .val($(this).val())        // and the same value
        );
    });
    $newForm
        .appendTo(document.body)  // not sure if this is needed?
        .submit()                 // submit the form
    ;
}

Answer 3

Wrap the whole Page in your form tag (if possible) and use the server side code, along w/ Javascript, to handle your business rule validation.

kind of a hack solution, but it should minimize the necessity for Javascript "hacks" depending on your skill level with javascript.

Answer 4

you can add an onsubmit to that form, and then collect other values with javascript:

<input type="hidden" name="hidden1" id="hidden1" />
<input type="hidden" name="hidden2" id="hidden2" />
<script>
document.getElementById("the_form").onsubmit = function(){
    document.getElementById("hidden1").value = document.getElementById("other-field1").value;
    document.getElementById("hidden2").value = document.getElementById("other-field2").value;
};
</script>