Why does adding "return false;" to a submit event prevent the page from refreshing?

Question

I'm doing a tutorial on making a chat server with Node.js and socket.io. Here's what I had in the html:

<form id='chat_form'>
  <input id='chat_input' />
  <button>Send</button>
</form>
<script type='text/javascript'>
var socket = io();
$('#chat_form').submit(function(){
  var message = $('#chat_input').val();
  socket.emit('messages', message);
  $('#chat_input').val('');
});
</script>

I won't bother putting what I had on the back-end, because that part all worked fine. But in the browser, every time I submitted, the page refreshed, and a /? was added to the end of the URL bar.

Looked around for a bit, and found another tutorial (the one on the socket.io website), that had basically the same code, but they had added return false; to the end of their submit event. Tried that out and it worked fine. I'd like to understand why that worked though. Can anyone explain? Also, can you explain why the /? was added to the URL?

return false; prevents the action of the form so it stops the form from being submitted as that is the action of a form (it's pure js version of [this in jquery](http://api.jquery.com/event.preventdefault/)). You should usually use this on a form submission with an ajax call (to stop the page from refreshing). Without a method on your form, it looks as if when it is submitted, it is using a `get` method which is why it is adding the ? to the url and refreshing the page - [see this post](http://stackoverflow.com/questions/3477333/what-is-the-difference-between-post-and-get) — Pete, Aug 21 '15 at 10:39
LOL I wonder why this question gets 4 upvotes. this doesn't belong to node.js tag. I feel the only reason is the question is easy to answer :P — Vishnu, Aug 21 '15 at 10:45

Arūnas Smaliukas · Accepted Answer · 2015-08-21T10:47:27.100

first about /?:

default method of form submit is GET, but you can change it with <form method="POST"> (while default is <form method="GET"> if method is not provided).

With POST form data is passed in request body, with GET - in request url params.

If you have

<form action="/submit.php" method="GET">
   <input name="foo" value="1" />
   <input name="bar" value="2" />
</form>

And you submit that form, you'll get URL something like /submit.php?foo=1&bar=2.

In your case you have no inputs with name attribute, so your GET params are "empty" (/?<params should go there>).

You can read more in: http://www.w3schools.com/tags/att_form_method.asp

About return false;

Submitting form forces page reload (with either POST or GET request). If you submit form with javascript you need to prevent this default action. You can do this by

$('#chat_form').submit(function(event){
    //....
    event.preventDefault();
});

Or with return false;.

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

A simple and easy answer to this is

"Return false prevents navigation"

Return false is always used in those case where user or browser action needs to be stooped.

In every programming language, the code after return is not executed, which means further action wont take place, which can be

stopping form submit

stopping navigation and hyperlink jumps

other than return false you can also use

   event.preventDefault();

   event.stopPropagation();

Now about form submit

A form is submitted using GET and POST which can be decided by the author using method="POST" attribute in form tag,

when nothing given by default form submits using GET

which passes values in url - ex - something.html?para1=value1&para2=value2

which is fast and less secure, every time you submit a form with get all the form elements will be passed in the url

jonny · Answer 3 · 2015-08-21T10:46:13.417

From the jQuery submit() docs:

Now when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler.

So what's happening is, the default event behavior triggered when the submit event occurs is being prevented.

The default method of submission for the jQuery submit function is an HTML GET, which supplies the form paramaters as a URL query, in the form of /?queryParam=value. Hence, the /? appears in the URL, with no query parameters after the /? (as none are being supplied in the form).

Hope this helps!

Vishnu · Answer 4 · 2015-08-21T11:13:02.503

0

your form element has no method, so default method get is set. If you click send all the input elements are added after current page+?

return false prevents the submit action to perform.

edited Aug 21 '15 at 11:13

answered Aug 21 '15 at 10:41

Vishnu

8,649
3
41
73

score 0 · Answer 5 · edited Apr 13 '17 at 12:33

Return false prevents all of the default functions of html element events from firing.

An example is an html form, once you hit the submit button it's default is to navigate to another page. You don't want that to happen if you are using Ajax functions to send data to a server without leaving the page.

Another way to do it is pass an event object parameter to the event function. Then at the beginning of the function type event.preventDefault ();.

The following link offers a good explanation of why the trailing slash is present. https://webmasters.stackexchange.com/questions/35643/is-trailing-slash-automagically-added-on-click-of-home-page-url-in-browser

Why does adding "return false;" to a submit event prevent the page from refreshing?

5 Answers5

"Return false prevents navigation"