Unable to get an event interrupter for preventing form submission to work corrctly in a basic JavaScript and PHP tutorial -

i trying learn javascript, php , basic client-side form validations in trying build basic javascript tutorial interacts php , html. trying interrupt form submission event, i.e. user forgets enter valid email format in email submission input , clicks on submit button should display error message , not allow form submitted. can't work me. happens instead taken support_process.php page when should not happen. @ appreciated.

here index.html code form:

<div>   <form id="frmsupport" name="frmsupport"  method="post" action="support_process.php">     <fieldset id="fastsupport">       <legend><strong>fast support</strong></legend>         <p>if you've booked singing rails girls  coach,</br> , have not gotten confirmation number,</br> drop line , we'll respond within 24 hours.</p> </p>       <p>         <label for="email">email:</label>             <input type="text" value="your email" name="name" id="email" tabindex="10" />           <p>             <span id="errormsg"></span>           </p>             <input type="submit" value="submit">       </p>       <p><b>ed's "blah blah blah" tour status</b></p>         <label for="tourstatus" class="inline">             <input type="radio" name="tour status" value="booked" id="tourstatus_0" tabindex="40" />ed toured here         </label>         <label for="tourconf" class="inline" >             <input type="radio" name="tour conf" value="paid" id= "tourstatus_1" tabindex="50" />ed confirmed tour date         </label>         </br>      </fieldset>    </form> </div> 

comments section

comments:

<script src="myscript.js"> </script> 

and here corresponding javascript file:

//alert("hello, world!"); // javascript alert button // var year = 2014; var useremail = ""; var todaysdate = ""; /*var donation = 20;  if (donation < 20) { alert("for $20 cookie. change donation?"); } else { alert("thank you!"); } */  var mainfile = document.getelementbyid("maintitle"); console.log("this element of type: ", maintitle.nodetype); console.log("the inner html ", maintitle.innerhtml); console.log("child nodes: ", maintitle.childnodes.length);  var mylinks = document.getelementsbytagname("a"); console.log("links: ", mylinks.length);  var mylistelements = document.getelementsbytagname("li"); console.log("list elements: ", mylistelements.length);  var myfirstlist = document.getelementbyid("2 paragraphs"); /* can use: var limitedlist = myfirstlist.getelementsbytagname("li"); dig deeper dom */ var myelement = document.createelement("li"); var mynewelement = document.createelement("li"); //mynewelement.appendchild(mynewelement);   var mytext = document.createtextnode("new list item"); mynewelement.appendchild(mytext);   // creating elements var newlistitem = document.createelement("li"); var newpara = document.createelement("p");  // add content, either use inner html // or create child nodes manually so: // newpara.innerhtml = "blah blah blah..."; var paratext = document.createtextnode("and beginner level intro..."); newpara.appendchild(paratext);  //and still need attach them document document.getelementbyid("basic").appendchild(newpara);  var mynewelement = document.createelement("li"); var seconditem = myelement.getelementsbytagname("li")[1]; myelement.insertbefore(mynewelement, seconditem);  // example of using anonymous function: onclick. //when click anywhere on page, alert appears. //document.onclick = function() { //  alert("you clicked somewhere in document"); //}  // , example of restricting click alert  // element on page. var myimage = document.getelementbyid("mainimage"); myimage.onclick = function() { alert("you clicked on picture!"); }  function prepareeventhandlers() { var myimage = document.getelementbyid("mainimage"); myimage.onclick = function() {   alert("you clicked on picture!"); } //onfocus , onblur event handler illustration var emailfield = document.getelementbyid("email"); emailfield.onfocus = function() { if (emailfield.value == "your email") {     emailfield.value = ""; } };  emailfield.onblur = function() { if (emailfield.value == "") {     emailfield.value = "your email"; } }; // handling form submit event document.getelementbyid("frmsupport").onsubmit = function(){     //prevent form sumbitting if no email.     if (document.getelementbyid("email").value == "") {         document.getelementbyid(errormsg).innerhtml = "oops!";         //to stop form submitting:         return false;     }else {         //reset , allow form submission:         document.getelementbyid("errormsg").innerhtml = "";         return true;     } }; }   window.onload = function() { // preps , ensures  // other js functions don't // called before document has // loaded. prepareeventhandlers();  // named function call nested inside anonymous function. }    //sometimes want js run later or call // function in 60 seconds or every 5 sec, etc. // 2 main methods timers: settimeout , setinterval // these timer functions in milliseconds  var myimage = document.getelementbyid("mainimage"); var imagearray = ["images/blue-roses.jpg", "images/purple-rose.jpg", "images/white- rose.jpg", "images/orange-rose.jpg", "images/pink-roses.jpg", "images/red-roses.jpg", "images/yellow-roses.jpg", "images/murdock.jpg", "images/dorothy-red-ruby-slippers.jpg"]; var imageindex = 0;  function changeimage(){ myimage.setattribute("src",imagearray[imageindex]); imageindex++; if (imageindex >= imagearray.length) {     imageindex = 0; } } var intervalhandle = setinterval(changeimage, 5000); myimage.onclick = function() { clearinterval(intervalhandle); }  //sometimes may want random alert // pop x-number of seconds later. //so use settimeout, so: /*function simplemessage() { alert("get ready learn!"); } settimeout(simplemessage, 5000); */  /*var_dump($_post); if var_dump($_post) = ""; return var($_get);  error_log($_post); */ 

and here corresponding php file event interrupter (for refusing allow form submitted if user leaves email field blank or something):

<?php //some php script can go here echo "this support confirmation page...sorry, nothing fancy here!" ?>  <h1>thank you, contact shortly!</h1> <a href="index.html" target="_blank" >back</a>    <?php // more php code can go here, , forth , on.. /*var_dump($_post);   if var_dump($_post) = "";   return var($_get);   error_log($_get); */ error_log(message);   ?> 

here's problem:

if (document.getelementbyid("email").value == "") {     document.getelementbyid(errormsg).innerhtml = "oops!";     //to stop form submitting:     return false; }else {     //reset , allow form submission:     document.getelementbyid("errormsg").innerhtml = "";     return true; } 

in first part of if, you're trying reference errormsg element using non-existent variable:

    document.getelementbyid(errormsg).innerhtml = "oops!"; 

in second, you're accessing element id properly:

    document.getelementbyid("errormsg").innerhtml = ""; 

you need surround 'errormsg' single or double quotes.

you should using debugger find problems these. chrome developer tools place start.