How To Prevent Form Submission

I'm using a function I found here in another thread to prevent my form from submitting which works on my laptop, however, when I pushed my current changes to my gh_pages branch to

Solution 1:

You will need to prevent the native behavior from the submit event and prevent that event from bubbling or proceeding down the capture line.

See this for details.

There is a snippet below, but Stack Overflow doesn't allow form submissions in their snippets, so you can also see a working version here.

To do this, in your form's submit event handler:

var form = document.getElementById("gameData"); // This is the form element
var name = document.getElementById("txtName");
var err = document.getElementById("err");

// Event handlers are automatically passed a reference to the
// event that triggered the handler. You must remember to set up
// a function argument to capture that reference. Here, that is "evt"
form.addEventListener("submit", function(evt){

  // Using whatever logic you deem necessary, proceed or cancel:
  if(txtName.value === ""){
    // There is a problem:
    evt.preventDefault();  // cancel the event
    evt.stopPropagation(); // prevent it from propagating to other elements  
    
    err.textContent = "E R R O R !";  
  }

});

span { font-weight:bold; color: #f00;}

<form id="gameData" action="#" method="post">
  
  Name: <input id="txtName" type="text">
  
  <input type="submit"><span id="err"></span>
</form>

Solution 2:

You can easily use jQuery to do this.

// takeover the #gameData form's onsubmit event
$("#gameData").submit(function(e){
     // your form processing codes here
     game['game'] = {};
     game.game['id'] = generateId(20);
     game.game['courseName'] = document.getElementById('course').value;
     game.game['gameLength'] = courseLength;
     game.game['players'] = {};

     var participants = document.querySelectorAll('.currentPlayers');

     participants.forEach(function(name){
         game.game.players[generateId(5)] = name.value;
     }

     generateCard(game.game.gameLength)

// prevent the default form submission
e.preventDefault();
});

Hope that helps!