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

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