0

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 test it on my phone I noticed the form is still trying to submit. I'm currently doing it this way because I'm not sending the form data to a backend yet, but I still would like to utilize the functionality of the 'required' attribute in the input fields. Thanks for any help in advance. Here is the related code from my .js and .html files:

js

document.getElementById('gameData').onsubmit = function() {
    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 form submission
    return false;
}

Form

<form id="gameData">
<h3>What course are you playing?</h3>
<input type="text" maxlength="40" id="course" required>
<h3>How many holes are you playing?</h3>
<div class="gameLength noHiLte">
  <input type="radio" name="gameLength" value="9" id="nine" checked/>
  <label  class="nine radio" for="nine">9</label>
  <span>or</span>
  <input type="radio" name="gameLength" value="18" id="eighteen"/>
  <label class="radio" for="eighteen">18</label>
</div>
<div class="addPlayers">
  <h3>Add up to four players:</h3><i class="fa fa-plus noHiLte" aria-hidden="true"></i>
  <!-- New player Input fields generated here -->
</div>
<input type='submit' class="startGame hide" value='Tee Off!'>

Willy
  • 1,055
  • 8
  • 23
halfacreyum
  • 297
  • 5
  • 16
  • Will disable submit button with `disable=true` work for you? – αƞjiβ Dec 02 '16 at 21:34
  • Possible duplicate of [How to prevent form from being submitted?](http://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted) – Moob Dec 02 '16 at 21:38
  • Possible duplicate of [prevent form submission (javascript)](http://stackoverflow.com/questions/24248576/prevent-form-submission-javascript) – mhodges Dec 02 '16 at 21:38
  • 1
    Look into `event.preventDefault` – Moob Dec 02 '16 at 21:39

2 Answers2

2

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>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • 1
    A down vote for the correct answer with documentation. Way to go SO. – Scott Marcus Dec 02 '16 at 21:40
  • Thanks, for your effort. However, the outcome is still the same in mobile, the form is still creating a query string and trying to send. It does not do this on my laptop though. – halfacreyum Dec 02 '16 at 22:31
  • It's probably downvoted because the question is a clear duplicate. From what I hear, answering bad or duplicate questions is frowned upon. `` – mhodges Dec 02 '16 at 22:42
  • @mhodges That's crazy. How is a regular SO user supposed to know if the question has been answered. AND, if someone did know, then THEY should post that link. If you down vote perfectly good answers, you defeat the purpose of SO. – Scott Marcus Dec 02 '16 at 23:22
  • @halfacreyum You need to change the code to not use `onsubmit` and go with the `addEventListener` code I've shown. This is DOM Standard code that has worked across all browsers for years. If it's not working, then there is another issue. – Scott Marcus Dec 02 '16 at 23:23
  • As far as I know I made all the changes you suggested. Here is a [fiddle](https://jsfiddle.net/railsarr/vr3rfg5o/1/) of the changes I made. When I submit this on my phone it tries to send the form and query string (/index.html?gameLength=9). – halfacreyum Dec 03 '16 at 00:17
  • @halfacreyum I think the problem (at least from your Fiddle code) is the additional code you are adding, beyond the event cancel code, which has errors in it. Try a simple cancellation without your custom code (like my code snippet code above) and see if the event gets cancelled. – Scott Marcus Dec 03 '16 at 20:13
0

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!

H.M Rezoan Duranto
  • 1
  • 1
  • 5