Form with countdown does not Submit correct

Question

I have a form with a few buttons to start a countdown. The countdown works. But the form Will not Submit.

var running = false
var endTime = null
var timerID = null

function startTimer(duration) {
  running = true
  now = new Date()
  now = now.getTime()
  // change last multiple for the number of minutes
  endTime = now + (1000 * 60 * duration)
  showCountDown()
  document.getElementById("submit").disabled = true
}

function showCountDown() {
  var now = new Date()
  now = now.getTime()
  if (endTime - now <= 0) {
    stopTimer('Einde')
    formSubmit()
    //  of alert("Time is up.  Put down your pencils.")
  } else {
    var delta = new Date(endTime - now)
    var theMin = delta.getMinutes()
    var theSec = delta.getSeconds()
    var theHour = delta.getHours() - 1
    var theTime = ((theMin < 10) ? "0" : "") + theMin
    theTime += ((theSec < 10) ? ":0" : ":") + theSec
    document.forms[0].timerDisplay.value = "resttijd: " + ((theHour < 1) ? "0" : theHour) + ":" + theTime
    if (running) {
      timerID = setTimeout("showCountDown()", 1000)
    }
  }
}

function stopTimer(status) {
  clearTimeout(timerID)
  running = false
  document.forms[0].timerDisplay.value = status
  document.getElementById("submit").disabled = false
}

function formSubmit() {
  //activate submit button
  document.getElementById("submit").disabled = false;
  //and submit form
  document.getElementById("MyForm").submit();
}

input[type=submit] {
  padding: 5px 15px;
  background: red;
  color: #ffffff;
  font-weight: bold;
  border: 0 none;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

input[type=text] {
  background: aliceblue;
  color: green;
  font-weight: bold;
}

textarea {
  background: aliceblue;
  color: green;
  font-weight: bold;
}

h2 {
  color: red;
}

<!DOCTYPE html>

<HEAD>
  <TITLE>Count Down Timer</TITLE>
</HEAD>

<BODY>
  <center>
    <h2>Artikel plaatsen</h2>
  </center>
  <FORM name="MyForm" id=MyForm " action="PlaatsArtikel.php " onkeypress="return event.keyCode !=1 3; ">
      <center>
      Kopzin<br>
      <INPUT TYPE="text " NAME="KopArtikel " PLACEHOLDER="Kopzin " SIZE="100 " required ><br><br>
      Tekst<br>
      <TEXTAREA ROWS="8 " COLS="100 " NAME="BodyArtikel " PLACEHOLDER="Tekst " required></TEXTAREA>
     <br><hr width="65% ">
     Klik "verstuur nu " of klik op een van onderstaande knoppen voor uitgesteld verzenden.<br>
     <INPUT TYPE="button " NAME="startTime " VALUE="1 minuut " onClick="startTimer(1) ">
     <INPUT TYPE="button " NAME="startTime " VALUE="1 uur " onClick="startTimer(60) ">
     <INPUT TYPE="button " NAME="startTime " VALUE="3 uur " onClick="startTimer(180) ">
     <INPUT TYPE="button " NAME="startTime " VALUE="6 uur " onClick="startTimer(360) ">
     <INPUT TYPE="button " NAME="startTime " VALUE="9 uur " onClick="startTimer(540) ">     
     <INPUT TYPE="button " NAME="startTime " VALUE="12 uur " onClick="startTimer(720) ">     
     <br><br>
     <INPUT TYPE="button " NAME="clearTime " VALUE="Onderbreek Timer " onClick="stopTimer( 'Gestopt!') " style="color:red; ">
     <INPUT TYPE="text " NAME="timerDisplay " VALUE="00:00 " Size="17 ">
     <br><br><hr width="65% "><center>
     <INPUT TYPE="submit " id="submit " NAME="submit " Value="Verstuur Nu " >
    </FORM>
    </BODY>
    </HTML>

So the form is loader. The user can add text, header and body. Then hè can choose a timer or Submit direct. The Submit button works oké and the form is executeren. The timer buttons start a different timer. But at the zero timer the form should be submitted. But it doesn’t.

score 0 · Answer 1 · answered Jan 03 '18 at 20:37

0

You have a syntax error that breaks the forms action attribute, the id attribute is missing an opening quote.

id=MyForm"

answered Jan 03 '18 at 20:37

Jess

352
1
2
10

score 0 · Answer 2 · answered Jan 03 '18 at 20:53

0

try to see if this helps:

function formSubmit() {
  //activate submit button
  document.getElementById("submit").disabled = false;
  //and submit form => just click submit button
  document.getElementById("submit").click(); 
}

answered Jan 03 '18 at 20:53

Kresimir Pendic

3,597
1
21
28

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

You have to change the values of id and name attributes in this submit input:

<INPUT TYPE="submit" id="submit" NAME="submit" Value="Verstuur Nu" >

Change it to anything but "submit" or "action".

But why?

if you have an input element with an id and/or name attribute within a form, you will be able to reference that input directly as a property of the form

That means that with your current code, when you call .submit() on your form with:

document.getElementById("MyForm").submit();

You are actually trying to execute an HTML element (the submit input).

If you look at the console you will see the error message:

document.getElementById(...).submit is not a function

Example from Don't Name Your Inputs 'Action' or 'Submit'!

// Grab the form
var form = document.getElementById('form');
// Reference the text box directly from the form by its ID or name
console.log(form.textboxid); // -> The input element
console.log(form.textboxname); // -> The input element

<form id="form" action="url">
  <input type="text" id="textboxid" name="textboxname">
</form>

Form with countdown does not Submit correct

3 Answers3

But why?

Example from Don't Name Your Inputs 'Action' or 'Submit'!