Why is my HTML page reloading every time a new entry is submitted into a form?

Question

I am having trouble with my HTML page. My program is meant to collect names using a form, then output them into a table below the form. It is capable of doing just that when the page doesn't reload.

The first time I enter a certain name, the page reloads. After the page has reloaded, and I enter the same name, it doesn't reload upon hitting enter any subsequent time. I don't know why this is, or how to fix it.

Here is the linked JS file

// Gloabal Variables
var enteredName,
  countOutput,
  count,
  table,
  form,
  allNames = [];

function project62Part2() {
  // Your code goes in here.
  function getElements() {
    form = document.getElementById("nameForm");
    countOutput = document.getElementById("numNames");
    table = document.getElementById("table");
  }

  function addName() {
    enteredName = form.name.value;
    allNames.push(enteredName);
  }

  function countNames() {
    // Reset count
    count = 0;

    // Loop through and count names
    for (i = 0; i < allNames.length; i++) {
      count++;
    }
  }

  function output() {
    // Reset table
    table.innerHTML = "<tr><th>Names</th></tr>";
    // Display count
    countOutput.innerHTML = "Total names entered: " + count;

    // Loop through and add to table display
    for (i = 0; i < allNames.length; i++) {
      table.innerHTML += "<tr><td>" + allNames[i] + "</td></tr>";
    }
  }

  // Call code
  getElements();
  addName();
  countNames();
  output();

  // Prevent page from reloading
  return false;
}

<form id="nameForm" action="#">
  <label class="formLabel" for="name">Name: </label>
  <input id="name" name="name" />

  <input type="submit" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2()" />
</form>

<div id="numNames">Total names entered: </div>

<table id="table"></table>

My understanding of coding is rudimentary at best, so while I would appreciate any answer, I'd prefer it to be kept simple!

Answer 1

There are many ways to achieve this I will explain two ways:

1. Adding Event.preventDefault() method

Whenever you click <input> elements of the submit type, the user agent attempts to submit the form to the URL setup in the form.

Now, the preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. This means the Form interface will not reload the page.

How it works?

• well, just add the event variable to your submit call like this:

<input type="submit" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2(event)" />

• Then add the event parameter to the project62Part2() method.

function project62Part2(event) {
   event.preventDefault();

   ...

}

// Gloabal Variables
var enteredName,
  countOutput,
  count,
  table,
  form,
  allNames = [];

function project62Part2(event) {
   event.preventDefault();
  // Your code goes in here.
  function getElements() {
    form = document.getElementById("nameForm");
    countOutput = document.getElementById("numNames");
    table = document.getElementById("table");
  }

  function addName() {
    enteredName = form.name.value;
    allNames.push(enteredName);
  }

  function countNames() {
    // Reset count
    count = 0;

    // Loop through and count names
    for (i = 0; i < allNames.length; i++) {
      count++;
    }
  }

  function output() {
    // Reset table
    table.innerHTML = "<tr><th>Names</th></tr>";
    // Display count
    countOutput.innerHTML = "Total names entered: " + count;

    // Loop through and add to table display
    for (i = 0; i < allNames.length; i++) {
      table.innerHTML += "<tr><td>" + allNames[i] + "</td></tr>";
    }
  }

  // Call code
  getElements();
  addName();
  countNames();
  output();

  // Prevent page from reloading
  return false;
}

<form id="nameForm" action="#">
  <label class="formLabel" for="name">Name: </label>
  <input id="name" name="name" />

  <input type="submit" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2(event)" />
</form>

<div id="numNames">Total names entered: </div>

<table id="table"></table>

2. Replacing input with button

This is based on the previous explanation. If an <input> element of the submit type triggers a submit call then if you replace it with the button type then a submit call will not be triggered. I recommend you this to maintain the submit if you are working with server calls.

How it works?

• well, just replace the type from submit to button like this:

<input type="button" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2()" />

// Gloabal Variables
var enteredName,
  countOutput,
  count,
  table,
  form,
  allNames = [];

function project62Part2() {
  event.preventDefault();
  // Your code goes in here.
  function getElements() {
    form = document.getElementById("nameForm");
    countOutput = document.getElementById("numNames");
    table = document.getElementById("table");
  }

  function addName() {
    enteredName = form.name.value;
    allNames.push(enteredName);
  }

  function countNames() {
    // Reset count
    count = 0;

    // Loop through and count names
    for (i = 0; i < allNames.length; i++) {
      count++;
    }
  }

  function output() {
    // Reset table
    table.innerHTML = "<tr><th>Names</th></tr>";
    // Display count
    countOutput.innerHTML = "Total names entered: " + count;

    // Loop through and add to table display
    for (i = 0; i < allNames.length; i++) {
      table.innerHTML += "<tr><td>" + allNames[i] + "</td></tr>";
    }
  }

  // Call code
  getElements();
  addName();
  countNames();
  output();

  // Prevent page from reloading
  return false;
}

<form id="nameForm" action="#">
  <label class="formLabel" for="name">Name: </label>
  <input id="name" name="name" />

  <input type="button" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2()" />
</form>

<div id="numNames">Total names entered: </div>

<table id="table"></table>

Answer 2

You can change from <input type="submit" name="runExample" /> to

<input type="button" name="runExample" />

or

Remove onclick="project62Part2()" on input tag and move to form tag onsubmit="return project62Part2()"

<form id="nameForm" onsubmit="return project62Part2()">

Answer 3

try adding an event parameter on project62Part2 then do an event.preventDefault() inside

Answer 4

<input type='submit'> causes the page refresh. Replace it with <input type='button'>.

Read more here.

        // Gloabal Variables
    var enteredName,
    	countOutput,
    	count,
        table,
    	form,
    	allNames = [];
    
    function project62Part2() {
        // Your code goes in here.
        function getElements() {
    		form = document.getElementById("nameForm");
    		countOutput = document.getElementById("numNames");
    		table = document.getElementById("table");
    	}
        
    	function addName() {
    		enteredName = form.name.value;
    		allNames.push(enteredName);
    	}
    	
    	function countNames() {
    		// Reset count
    		count = 0;
    		
    		// Loop through and count names
    		for (i = 0; i < allNames.length; i++) {
    			count++;
    		}
    	}
    	
    	function output() {
    		// Reset table
    		table.innerHTML = "<tr><th>Names</th></tr>";
    		// Display count
    		countOutput.innerHTML = "Total names entered: " + count;
    		
    		// Loop through and add to table display
    		for (i = 0; i < allNames.length; i++) {
    			table.innerHTML += "<tr><td>" + allNames[i] + "</td></tr>";
    		}
    	}
    	
    	// Call code
    	getElements();
    	addName();
    	countNames();
    	output();
    
    	// Prevent page from reloading
    	return false;
    }

    <form id="nameForm" action="6.2projectpart2.html#">
        <label class="formLabel" for="name">Name: </label>
        <input id="name" name="name" />
        
        <input type="button" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2()" />
    </form>
    
    <div id="numNames">Total names entered: </div>
    
    <table id="table"></table>