How can I get values from multiple forms and submit them?
I have several forms inside DIVS on my page.
I have one form that contains a textbox and is always visible and this is where the user presses the 'enter' key and submits ...
I want to get the values selected in other forms on the page and submit them together rather than one by one, so that my PHP code can use "ALL VALUES" and search the mysql database ...
Is this possible with javascript using "<form onsubmit>"
to call javascript?
any codes would be appreciated ...
thank
Without Javascript hocus-pocus, you can't. One form = one request.
You can do this with JS and you have several options. The simplest would be to iterate over all the forms on the page and basically duplicate all input fields and values into one form and then submit that combined form.
With jQuery, it will look 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
;
}
source to share
You need to make a script that will collect data from forms and insert it into the only visible form. Only one form will be submitted, you cannot submit multiple forms. You can create multiple hidden fields, or you can create one hidden field in this form and then use javascript to collect all data from various forms, then create a JSON string, set the hidden value and submit.
Edit: Let's say you have one hidden input:
<input type='hidden' name='hiddenfield' id='hiddenfield' />
you can use JQuery for this:
$('#hiddenfield').val('myvalue');
Retrieving a value from other forms is as easy as calling $ ('# elementid'). val ()
before submitting the form. To use jQuery, go to the jquery website, download the library and link it (follow the installation guide).
source to share
you can add onsubmit to this 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>
source to share