do not refresh page upon form submit

Question

I am trying to submit this form without refreshing the page. I'm using jquery; upon submit the page still refreshes.

$(function(){ $('#submit').click(function(){ $('#container').append('loading'); var sthis = $('#sthis').val(); $.ajax({ url: 'f.php' , type: 'POST', data: 'sthis: ' + sthis, success: function(result){ $('#container').append('<p>' + result + '</p>') } }); return false; }); });

html page (f.php)

<div id="container"> <form method="post" action="f.php"> something<input name="sthis" type="text" /> <input type="submit" value="submit" id="#submit" /> </form> </div>

php page

<?php if(isset($_POST['sthis'])){ $sthis = $_POST['sthis']; if(empty($sthis)) { echo 'put something in this box'; } else echo 'ready'; } ?>

user570782 · Accepted Answer · 2011-11-24 00:20:58Z

3

your problem is here id="#submit" should be id="submit", that should work.

answered Nov 24, 2011 at 0:20

user570782

1169 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marconius Over a year ago

won't this reload the f.php page after ajax response is received, due to action="f.php"?

Diodeus - James MacFarlane · Accepted Answer · 2011-11-23 23:52:55Z

3

Change this:

<input type="submit" value="submit" id="#submit" />

To this:

<input type="button" value="submit" id="#submit" />

Then hook up an event handler that calls your ajax function, instead of submitting the form.

answered Nov 23, 2011 at 23:52

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

2 Comments

Jake Feasel Over a year ago

Problem there is if the user hits "enter" in the input box, they will still trigger the form submit event.

Landon Over a year ago

agreed, if the form submits, the page will refresh, which could be caused, among other things, but an enter in a text field

Jake Feasel · Accepted Answer · 2011-11-23 23:53:44Z

1

The easiest thing to do in this case is change your form tag like so:

<form method="post" action="f.php" onSubmit="return false;">

answered Nov 23, 2011 at 23:53

Jake Feasel

17k5 gold badges55 silver badges68 bronze badges

2 Comments

user836910 Over a year ago

when i do this the form does nothing, even if the field is empty

Jake Feasel Over a year ago

Something else must be going on, then. It shouldn't have any affect on your jquery ajax code. Are you getting a JS error?

Landon · Accepted Answer · 2011-11-23 23:54:50Z

in your form tag, just add an onsubmit="return false". That will prevent the form from submitting it's request and refreshing your page. The click event on that button will still work so you can control everything via javascript. Here's more info:

http://www.htmlcodetutorial.com/forms/_FORM_onSubmit.html

when i do this the form does nothing, even if the field is empty

Mark Garcia · Accepted Answer · 2012-10-11 06:58:03Z

There is still something wrong.

First: in f.php:

 <input name="sthis" type="text" />

Change it to :

 <input id="sthis" type="text" />

Second: the data format in .ajax is wrong:

 data: 'sthis: ' + sthis,

Change it to:

 data: {sthis: sthis},

Collectives™ on Stack Overflow

do not refresh page upon form submit

5 Answers 5

1 Comment

2 Comments

2 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

2 Comments

1 Comment

Comments

Related