0

I'm wondering what exactly the return false; statement is doing in this Pig-Latin translator? By removing it I can see that the page seems to automatically refresh (immediately wipes the 'translation' rather than leaving it), but I don't understand the mechanics. What's going on? I don't think the HTML or JS is necessary to answer my question, but let me know if I'm mistaken and I'll paste it in.

The jQuery:

$(function() {  
    $("form#translator").submit(function() {
        var englishWord = $("input#word").val();
        var translatedWord = englishToPigLatin(englishWord);

        $("#english").append(englishWord);
        $("#pig-latin").append(translatedWord);

        $("#translation").show();
        return false;
    });
});
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
i_made_that
  • 941
  • 1
  • 8
  • 19
  • It's indicating that the browser should cancel the `submit()` and not send the data to a server. –  Jan 31 '14 at 07:29
  • `return:false` in a function handling an event leads to the default action that that event would have caused (in this case: submitting the form) being aborted. A more “modern” way of doing this is `event.preventDefault`. – CBroe Jan 31 '14 at 07:30
  • Oh... so part of the submit() functionality it to refresh the form after it completes? – i_made_that Jan 31 '14 at 07:30
  • 1
    very closely related to http://stackoverflow.com/a/10729215/1671639 – Praveen Jan 31 '14 at 07:31
  • preventDefault would be a different approach do reach the same effect, disable the default behavior which would send the form data to the server. – axel.michel Jan 31 '14 at 07:31
  • 1
    Worth reading: http://stackoverflow.com/q/1357118/87015 – Salman A Jan 31 '14 at 07:32

3 Answers3

4

From the .submit documentation (emphasis mine):

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, returning false prevents the default action (in this case form submission), but also stops the propagation of the event. It is equivalent to calling event.preventDefault() and event.stopPropagation().

It seems like you don't know how forms are processed:

When a form is submitted, the browser is making a GET or POST request to the URL provided in the form's action attribute, i.e. it will load that URL. If no action attribute is provided, the request will be made to the current URL, which effectively reloads the page (but also sends data to the server).

For more information, see MDN - Sending and retrieving form data.

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
2

You are executing the function when the form is being submitted. By returning false you effectively disable the form submit so the page won't get submitted to the server.

If you do submit to the server, the server will return the new page and your javascript changes will indeed be gone until you click the submit button again.

Alternatively you could use this instead of return false:

your_form.submit(function(e){
    e.preventDefault();
});

Versus:

your_form.submit(function(e){
    return false;
});
Wolph
  • 78,177
  • 11
  • 137
  • 148
0

by "return false" , the form will executed, but your page will not reload / refresh.

atuk
  • 109
  • 1
  • 3