onsubmit refresh html form

Question

I'm trying to use Javascript to submit the form's data. Here's the html.

<form onsubmit="post();">
//input fields here
</form>

Here's the Javascript for the post() function.

var post = function() {
alert('the form was submitted');
return false;
}

My issue is that the Javascript runs but the form still processes and refreshes the page..

I put the return false; code in hoping it would stop the form from refreshing.

Luscious

Answer 1

You will have to put the return false part after the post() function in the onsubmit handler, like so:

<form onsubmit="post();return false;">
//input fields here
</form>

Tracery

I did try that and it didn't work! But it's working now, thanks anyway! – Luscious

Weird that it didn't work before. Could be some syntax error the first time around. Glad it's working now, though, happy to help! – Tracery

<form onsubmit="return post();"> is even better, see my answer. – Grajeda

Answer 2

Keep your js out of the DOM.

<form id="myform" action="somepage.php" method="post">
//input fields
</form>

JQuery:

$('#myform').submit(function(event){
    alert('submitted');
    event.preventDefault();
});

Kovacev

Answer 3

You need to actually return false from your inline dom-0 handler. So change

onsubmit = "post();">

to

onsubmit = "return post();">

---

Or you could give your form an id and do this:

<form id="form1" onsubmit = "post();">

Then from a safe location in which your dom is ready:

document.getElementById("form1").onsubmit = post;

Pistol

Answer 4

Since you added the jQuery tag, this it the best way to do this:
unobtrusive event attach

$('form').submit(function(){
        alert('the form was submitted');
        return false;
    });

In your's way it should be;

<form onsubmit="return post();">

Grajeda

Answer 5

Since this post is tagged with jQuery, I'll offer the following solution:

$('form').submit(function(e){
  //prevent the form from actually submitting.
  e.preventDefault();
  //specify the url you want to post to.
  //optionally, you could grab the url using $(this).attr('href');
  var url = "http://mysite.com/sendPostVarsHere";
  //construct an object to send to the server
  //optionally, you could grab the input values of the form using $(this).serializeArray()
  var postvars = {};
  //call jquery post with callback function
  $.post(url, postvars, function(response){
    //do something with the response
    console.log(response);
  }, 'json')
});

Class

If you choose to use serializeArray(), assign it to a variable and execute Pointy's Array -> Object function here before submitting it to the server. – Class