1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

how to submit a form without rerload or redirect the page ?

Discussion in 'JavaScript' started by ramysarwat, Apr 15, 2011.

  1. #1
    i have a web page with multi forms how can i submit any of this forms without reload or redirect the page?
    SEMrush
    i don't need to get the response from the target page any way

    
    <form>
    <input type="text" name="text1" />
    <input type="text" name="text2" />
    <input type="text" name="text3" />
    <input type="submit" name="submit1" />
    <input type="submit" name="submit2" />
    <input type="submit" name="submit3" />
    </form>
    
    <form>
    <input type="text" name="text1" />
    <input type="text" name="text2" />
    <input type="text" name="text3" />
    <input type="submit" name="submit1" />
    <input type="submit" name="submit2" />
    <input type="submit" name="submit3" />
    </form>
    
    <form>
    <input type="text" name="text1" />
    <input type="text" name="text2" />
    <input type="text" name="text3" />
    <input type="submit" name="submit1" />
    <input type="submit" name="submit2" />
    <input type="submit" name="submit3" />
    </form>
    HTML:
     
    ramysarwat, Apr 15, 2011 IP
    SEMrush
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Use jQuery and AJAX
    Submit A Form Without Page Refresh using jQuery

    This is all you need. Just change the formdata variable if you want to send a custom query string.

    
    <script type='text/javascript' src='jquery.min.js'></script>
    <script type="text/javascript">
    	$(document).ready( function () {
    		$('form').submit( function () {
    			var formdata = $(this).serialize();
    			$.ajax({
    			    type: "POST",
    			    url: "submit.php",
    			    data: formdata,
    			 });
    			return false;
    		});
    	});
    </script>
    
    HTML:
     
    Last edited: Apr 15, 2011
    Cash Nebula, Apr 15, 2011 IP
  3. ramysarwat

    ramysarwat Peon

    Messages:
    164
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thank you "Cash Nebula" for your time but how to use this function ?
     
    ramysarwat, Apr 15, 2011 IP
  4. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You're welcome :)

    If you're not using a local copy of jQuery, change the first line to this:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    Code (markup):
    Also, take the comma off the end of this line data: formdata, My mistake :eek:

    Put the code in the head section, and change submit.php to the link where you send the form data.

    It will look something like this:
    
    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">
    	$(document).ready( function () {
    		$('form').submit( function () {
    			var formdata = $(this).serialize();
    			$.ajax({
    			    type: "POST",
    			    url: "http://www.example.com/submit.php",
    			    data: formdata
    			 });
    			return false;
    		});
    	});
    </script>
    </head>
    <body>
    <form>
    <input type="text" name="text1" />
    <input type="text" name="text2" />
    <input type="text" name="text3" />
    <input type="submit" name="submit1" />
    <input type="submit" name="submit2" />
    <input type="submit" name="submit3" />
    </form>
    </body>
    </html>
    
    HTML:
     
    Cash Nebula, Apr 15, 2011 IP
  5. atlanteavila

    atlanteavila Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    How do you display a confirmation message? Code worked perfectly btw...
     
    atlanteavila, May 28, 2011 IP
  6. selltextlink

    selltextlink Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Use the AJax can to this.

    Such as Jquery and Prototype.
     
    selltextlink, May 29, 2011 IP