...

View Full Version : jQuery - Submit Multiple Forms



four0four
09-17-2009, 03:15 AM
How can I use jQuery to submit multiple forms with different types, values, and actions?

For example:


<form name="form1" method="get" action="submit1.php">
<input name="value1" type="text" value="">
</form>

<form name="form2" method="post" action="submit2.php">
<input name="value2" type="text" value="">
</form>

<form name="form3" method="post" action="submit3.php">
<input name="value3" type="text" value="">
</form>

<input type="button" value="Submit All Forms" onclick="submit();">


Can I start the jQuery process from within a function when clicking on the submit button?


I've found a lot of tutorials concerning this, but they don't make any sense to me.

Thanks!

Spudhead
09-17-2009, 05:56 PM
You can use the jQuery Forms Plugin (http://malsup.com/jquery/form/):


$(document).ready(function() {
$('#form1, #form2, #form3').ajaxForm(function() {
// optionally do stuff here after forms submitted
});

$('#myButton').click(function() {
$('#form1, #form2, #form3').ajaxSubmit();
return false;
});
});
NB: to use the "#" ID selectors, you'll need to give each of your forms an ID attribute.

If you didn't want to name each form in the JS code, and simply apply it to every form on the page, you could use each() to apply the same:

$(document).ready(function() {
$('form').each(function(){
$(this).ajaxForm(function() {
// optionally do stuff here after forms submitted
});
});
$('#myButton').click(function() {
$('form').each(function(){
$(this).ajaxSubmit();
});
return false;
});
});

four0four
09-17-2009, 11:07 PM
It doesn't seem to work for me. Is there something I'm missing?

In the head I have:




<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jforms.js"></script>


<script>

$(document).ready(function() {
$('#form1, #form2, #form3').ajaxForm(function() {
alert("It works!");
});

$('#myButton').click(function() {
$('#form1, #form2, #form3').ajaxSubmit();
return false;
});
});

</script>



In the body I have:




<form id="form1" method="get" action="submit1.php">
<input name="value1" type="text" value="">
</form>

<form id="form2" method="post" action="submit2.php">
<input name="value2" type="text" value="">
</form>

<form id="form3" method="post" action="submit3.php">
<input name="value3" type="text" value="">
</form>

<a href="#" id="myButton">Submit</a>



Thanks!

samsull
02-23-2012, 12:59 PM
I got it work using each() and not the listed form names.

I didn't get the alert to work, I added a simple onClick="window.location='http://www.mysite.com/thanks'" in submit button to return page to a thank you page.

Although not cross browser checked, seems ok.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum