Why is document.forms[“myform”][“input”].value return undefined

Question

So here's me trying to make a HTML5 version of the Tone Matrix program. So here's the problem, I have the user enter how long they want their song to be and then to make sure they entered a number, so i used

  function initiate(){
  var min = document.forms["initiator"]["min"].value;
  var sec = document.forms["initiator"]["sec"].value;
  // some logic
  return false;}

to check to see if the stuff they entered is indeed a number but when I try to do this, the browser spits back "Uncaught TypeError: Cannot read property 'min' of undefined" here's what's in my DOM.

<form onsubmit="return initiate()">
Your song will be (at most): <input type="number" name="min" id="min"> minutes and <input type="number" name="sec" id="sec"> seconds long.<br>
<input type="submit" value="Start" />
</form><br>

i have also placed the thing onto a hosting service located here http://www.sfu.ca/~zla49/MMC/ so ya Thanks :)

Answer 1

You don't have a name on your form.

It should look like <form name="initiator" onsubmit="return initiator()">

---

What may be more beneficial, if you don't want to name the form is to pass the form object as a parameter:

function initiate(form){
  var min = form["min"].value;
  var sec = form["sec"].value;
  // some logic
  return false;
}

<form onsubmit="return initiate(this)">
<!--... rest of your code ...-->