How to Return False in JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. How to Return False in JavaScript
Muhammad Muzammil Hussain Feb 02, 2024
JavaScript JavaScript Return
  1. Return Statements in JavaScript
  2. Use preventDefault() Method in JavaScript
  3. Use Return False Method in JavaScript
  4. When and Why Use return false in JavaScript
  5. Difference Between return false and preventDefault() in JavaScript
How to Return False in JavaScript

This article will explain JavaScript’s return false statement, the need to use it, and how to use it in JavaScript programs. It will also explain the difference between return false and preventDefault statements.

Return Statements in JavaScript

JavaScript return statement skips the functions’ executions and return to the caller function. The return statement may or may not return any value.

Following is an example of a simple return statement in JavaScript.

//  This return statement returns the product of 'x' and 'y'
function myFunction(x, y) {
  return x * y;
}

Likewise, we can return true or false in a simple JavaScript function.

function is_Equal(num1, num2) {
  if (num1 == num2) {
    return true;
  } else {
    return false;
  }
}

Use preventDefault() Method in JavaScript

This method stops the event if it is stoppable, which means the default action that belongs to the event will not occur. It just prevents the default browser behavior.

We can use the preventDefault() function in many ways like:

  1. Once you click the link, it will prevent the link from following the URL.
  2. If you click on a checkbox, the function will toggle the checkbox.
  3. If you click on a Submit button, it will prevent submitting a form.

Use Return False Method in JavaScript

Return false follows the following three steps.

  1. It stops the browser’s default behavior.
  2. It prevents the event from propagating the DOM.
  3. It also stops callback execution and returns immediately.

Developers use the return false in many different cases.

  1. It relies on the boolean (true or false) value. If a form field is empty, the function generates an alert message, which returns false, preventing the form from being submitted.
// without using preventDefault or return false
<!DOCTYPE html>
<html>

<head>
	<title>
		without PreventDefault( ) or Return false
	</title>
	<script>
		function f_Child() {
			alert('Link Clicked');
		}

		function f_Parent() {
			alert('div Clicked');
		}
	</script>
</head>

<body style="text-align:center;">

	<h1 style="color:green;">
		without PreventDefault( ) or Return false
	</h1>


	<div onclick='f_Parent()'>
		<a href='https://www.delftstack.com/'
		onclick='f_Child()'>Click here to visit delfstack.com</a>
	</div>
	<br>
	<br>
</body>

</html>

In the example above, the mentioned Delftstack link will open as the browser’s default behavior as we have not used preventDefault or return false.

  1. The following example shows that using preventDefault will change the browser’s default behavior.
// using preventDefault
<!DOCTYPE html>
<html>

<head>
	<title>
		with PreventDefault()
	</title>
	<script>
		function f_Child() 
        {
			event.preventDefault();
			event.currentTarget.innerHTML = 'Click event prevented'
			alert('Link Clicked');
		}

		function f_Parent() 
        {
			alert('div Clicked');
		}
	</script>
</head>

<body style="text-align:center;">

	<h1 style="color:green;">
				using preventDefault
			</h1>

	<div onclick='f_Parent()'>
		<a href='https://www.delftstack.com/'
		onclick='f_Child()'>Click here to visit delftstack.com</a>
	</div>
	<br>
	<br>
</body>

</html>
  1. While in the following example, return false stops the event from propagating through the DOM.
// using return false
<!DOCTYPE html>
<html>

<head>
	<title>
		Return false
	</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body style="text-align:center;">

	<h1 style="color:green;">
			using return false
	</h1>

	<div>
		<a href='https://www.google.com'>Click here to visit google.com</a>
	</div>
	<script>
		$('a').click(function(event) 
        {
			alert('Link Clicked');
			$('a').text('Click event prevented using return FALSE');
			$('a').contents().unwrap();
			return false;
		});
		$('div').click(function(event) 
        {
			alert('Div clicked');
		});
	</script>
	<br>
	<br>
</body>

</html>

So, the use of return causes your code to short-circuit and stop execution immediately, and use the return false statement to prevent something from happening.

When and Why Use return false in JavaScript

  1. Return false statement is used to prevent something from happening.
  2. When a return false statement is called in a function, the execution of this function is stopped. If specified, a given value is returned to the function caller.
  3. In event handlers, like onsubmit, returning false is a way to tell that the event will not fire. So, in the onsubmit case, this would mean that the form is not submitted.

Example:

<!DOCTYPE html>
<html>

<head>
  <title>
	  Return false Statement in JavaScript
  </title>
  <script>
	  function validateForm() 
	{
		  var a = document.forms["myForm"]["fname"].value;
		// use of return false statement if name field is empty
		  if (a == "") 
		{
			  alert("Please enter value in name field");
			  return false;
		  }
	  }
  </script>
</head>

<body style="text-align:center;">
  <h1 style="color: rgb(128, 0, 6);"> 
		  Return False Statement
  </h1>
  <form name="myForm" 
		action="/action_page.php" 
		onsubmit="return validateForm()" 
		method="post">
	  Name:
	  <input type="text" name="fname">
	  <input type="submit" value="Submit">
  </form>
</body>

</html>

Difference Between return false and preventDefault() in JavaScript

In JavaScript, both return false and preventDefault() are used to stop default browser behavior, but their functionalities and uses are slightly different.

The main difference between these statements is that the code after return false will not execute, while the code after preventDefault() will execute.

Related Article - JavaScript Return