jQuery - Submit Multiple Forms

[four0four]

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]

You can use the jQuery Forms Plugin:

$(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]

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]

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.