javascript - Form submitting without refresh not working -

i trying submit form without doing hard refresh page refreshing. tried putting action=“javascript:void(0);" in form tag didn't work. cannot use jquery.

work flow causes error:

1. submitting form supposed send information php file.

2. page gets directed page doesn't exist.

       function toggle_visibility(id){         var e = document.getelementbyid(id);          if(e.style.visibility == 'hidden'){             e.style.visibility = 'visible';         }         else{             e.style.visibility = 'hidden';         }      }     function createajaxrequestobject() {         var httprequest;         if (window.xmlhttprequest) { // mozilla, safari, ...             httprequest = new xmlhttprequest();             if (httprequest.overridemimetype) {                 httprequest.overridemimetype('text/xml');             }         }         else if (window.activexobject) { // ie             try {                 httprequest = new activexobject("msxml2.xmlhttp");                 }             catch (e) {                 try {                     httprequest = new activexobject("microsoft.xmlhttp");                 }                 catch (e) {}             }         }         if (!httprequest) {             alert('giving :( cannot create xmlhttp instance');             return false;         }         // create object         return httprequest;     }      function sendticket() {         var firstname = document.getelementbyid("firstname").value;         var lastname = document.getelementbyid("lastname").value;         var email = document.getelementbyid("email").value;         var subject = document.getelementbyid("subject").value;         var msg = document.getelementbyid("msg").value;          var encfirst = encodeuricomponent(firstname);         var enclast  = encodeuricomponent(lastname);         var encemail = encodeuricomponent(email);         var encsubject = encodeuricomponent(subject);         var encmsg = encodeuricomponent(msg);          var info = "firstname="+encfirst+"&lastname="+enclast+"&email="+encemail+"&subject="+encsubject+"&msg="+encmsg;          var http3 = createajaxrequestobject();          if (http3.readystate == 4) {             if (http3.status == 200){                 var result = json.parse(http3.responsetext);                 console.log(result);             }         }          http3.open("post", "send_mail.php", true);         http3.setrequestheader("content-type", "application/x-www-form-urlencoded");         http3.send(info);      }  </script> 

   welcome!

   view tickets submit ticket change password

3. full name  
4. email
5. subject
6. message *

you should change type of input submit button sendticket() triggered, else form submited before reached sendticket() function should :

<input type="button" value="submit" onclick="sendticket();" /> 

instead of :

<input type="submit" value="submit" onclick="sendticket();" /> 

hope helps.

function sendticket() {    var firstname = document.getelementbyid("firstname").value;    var lastname = document.getelementbyid("lastname").value;    var email = document.getelementbyid("email").value;    var subject = document.getelementbyid("subject").value;    var msg = document.getelementbyid("msg").value;      var encfirst = encodeuricomponent(firstname);    var enclast  = encodeuricomponent(lastname);    var encemail = encodeuricomponent(email);    var encsubject = encodeuricomponent(subject);    var encmsg = encodeuricomponent(msg);      var info = "firstname="+encfirst+"&lastname="+enclast+"&email="+encemail+"&subject="+encsubject+"&msg="+encmsg;    console.log(info);    }

<h1>welcome! </h1>  <div id="buttons">    <button class="mybutton" onclick="showtickets(); toggle_visibility('table');">view tickets</button>     <button class="mybutton" onclick="toggle_visibility('submit');">submit ticket</button>     <button class="mybutton" onclick="toggle_visibility('changepassword');">change password</button>   </div>  <div id = "table"> </div>  <div id = "submit">    <form id = "emailform" action="javascript:void(0);">      <ul class="form-style-1">        <li><label>full name <span class="required">*</span></label><input type="text" name="firstname" class="field-divided" placeholder="first" id="firstname" />&nbsp;<input type="text" name="field2" class="field-divided" placeholder="lastname" id = "lastname" /></li>        <li>          <label>email <span class="required">*</span></label>          <input type="email" name="email" class="field-long" id= "email" />        </li>        <li>          <label>subject</label>          <input type="text" name="subject" class="field-divided" placeholder="subject" id="subject" />        </li>        <li>          <label>your message <span class="required">*</span></label>          <textarea name="msg" id="msg" class="field-long field-textarea"></textarea>        </li>        <li>          <input type="button" value="submit" onclick="sendticket();" />        </li>      </ul>    </form>  </div>  <br><br><br><br><br><br><br><br>