What is the use of 'return' in javascript code

Question

On this simple example, 'return' is used on three places. So, i just confuse about using 'return' inside the function. What is use of this 'return' when to use inside the function? Mainly, I need to want to know, on the submit button, 'return' is used on the 'onclick' attribute, see here <input type="submit" value="submit" onclick="return validateR();">. So, also explain, What 'return' does exactly here. please.

<HTML>
    <HEAD>
        <TITLE>ComboBox Validation</TITLE>
        <script Language="JavaScript">
            function validateR(){
                var selectedCombobox = (comboForm.technology.value);
                if (selectedCombobox == "-1") {
                    alert("Please Select Technology");
                    return false; //here
                }
                if (selectedCombobox == "Servlet") {
                   alert("Yse");
                }
                return true; //here
            }
       </script>
   </HEAD>
 <BODY>
    <form name="comboForm">
        <select name="technology">
            <option value="-1">Select</option>
            <option value="JSP">Java Server Pages</option>
            <option value="Servlet">Servlet</option>
            <option value="PHP">PHP</option>
            <option value="ASP">ASP</option>
        </select>
        <input type="submit" value="submit" onclick="return validateR();">  //here
    </form>
 </BODY>
</HTML>

I think you use the function call on form submit property like
it is work fine for you... — user243405, Nov 14 '14 at 05:09
It's a crude way of preventing default action; it's generally better to register a click handler using JavaScript instead of HTML so that you can use `event.preventDefault()`. — Ja͢ck, Nov 14 '14 at 05:10

score 6 · Accepted Answer · edited May 23 '17 at 10:26

When you have an event handler, such as

<input type="submit" value="submit" onclick="return validateR();">

you can return a value to the event. If you return the value false, the event's default behavior is prevented. You can return false to an onsubmit event to prevent the page from being submitted.

To summarize,

return validateR() --> return true (or false) --> prevents default behavior of event

This behavior is standardized across all browsers. It was later superceded by a combination of event.preventDefault and event.stopPropogation, which do essentially the same thing. However, some people prefer the inline syntax (return func();) which also works in old versions of IE.

I've glossed over some subtleties concerning event bubbling. Here are some references to more in-depth discussions:

score 1 · Answer 2 · answered Nov 14 '14 at 05:14

validateR is a return function. It is validating form comboForm to make sure that when a value other than "Select / -1" has been selected when submitting the form. So for cases where the value is "-1", it returns false. Otherwise it returns true.

Now for the submit input, the default click is prevented when false is returned. So this means that when function validateR returns false, the form does not get submitted because the default onclick behaviour is prevented. Otherwise, it returns true and submits the form.

The same technique (though outdated) is used for links, where the click on the following would not take you to the URL.

<a href="http://www.stackoverflow.com" onclick="return false">Clicking this does nothing</a>

Captain Planet · Answer 3 · 2014-11-14T05:12:23.867

0

It is a validation function whether to submit form or not! If you have not selected the option then the form will not be submitted. That is the reason the return is kept false.

If the option Servlet option is selected, then alert('yes').

edited Nov 14 '14 at 05:12

answered Nov 14 '14 at 05:07

Captain Planet

408
3
19

score 0 · Answer 4 · answered Nov 14 '14 at 05:16

A return inside a function is a "response" to a given event or situation inside your code.. In your case the "answer" to your submit button will be calling your validateR function which will :

return false if your selectedComboBox = -1 return an alert if selectedComboBox = "Servlet" else it should return true

I believe that return on the button is unnecessary (since calling the function already returns something) .. not sure tho.

score 0 · Answer 5 · answered Nov 14 '14 at 05:18

One case you can use 'return function' for is when you are following a prototype-based object model, and you want to be able to have private methods or members that you want to protect. So, you would have other functions defined inside of t, and some variables declared, so that they live inside the closure. You then return the function that represents the actual object you want to construct based on the prototype.

The outside world doesn't get access to those private members and methods, since they're not exposed in the object and are local to the outer function, but you have access due to the closure.

score 0 · Answer 6 · edited Jun 20 '20 at 09:12

Very Simple Explanation

To keep it simple; onclick is its own "function". You're essentially writing the statements/definition of that function inline (inside quotes).

The browser has different "callbacks" (term used loosely) depending on the element that has the click function. For instance, if true is returned (or no value returned at all), the browser will go to a new page if it's an anchor/link; if it's a submit button, it would submit the form. To cancel out of the browser's default action, you can return false.

Analyzing Your Example

Your example is a longer way to write onclick="var success=validateR(); return success;", so the browser action is dependent on the actions of the function you're calling. That would let the browser run its callback if the validation was successful, most likely loading another page; otherwise it wouldn't do anything, in which case you might have other code that shows an error message of some sort.

What is the use of 'return' in javascript code

6 Answers6

Very Simple Explanation

Analyzing Your Example