Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jun 2008
    Posts
    104
    Thanks
    71
    Thanked 0 Times in 0 Posts

    Question jQuery - Submit Multiple Forms

    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!
    Last edited by four0four; 09-17-2009 at 03:19 AM.

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    You can use the jQuery Forms Plugin:

    Code:
    $(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:
    Code:
    $(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; 
    	});
    });

  • #3
    Regular Coder
    Join Date
    Jun 2008
    Posts
    104
    Thanks
    71
    Thanked 0 Times in 0 Posts
    It doesn't seem to work for me. Is there something I'm missing?

    In the head I have:

    Code:
    <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:

    Code:
    <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!

  • #4
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by samsull; 02-23-2012 at 02:11 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •