J. Doe J. Doe - 1 month ago 13
HTML Question

Form submitting without refresh not working

I am trying to submit a form without doing a hard refresh but my page is refreshing. I tried putting action=“javascript:void(0);" in the form tag but that didn't work. I also cannot use jquery.

Work Flow that causes error:
1.) Submitting a form that is supposed to send some information to a php file.
2.) page gets directed to (this page does not exist) : http://localhost/Assignment3/%C4%81%E2%82%AC%C2%9Cjavascript:void(0)%22?firstName=Arnim&field2=Jain&email=aj7eb123%40gmail.com&subject=fasdf&msg=afsdf

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="buttons.css">
<link rel="stylesheet" type="text/css" href="table.css">
<link rel="stylesheet" type="text/css" href="forms.css">
<script type="text/javascript">


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 up :( Cannot create an XMLHTTP instance');
return false;
}
// Create the 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>
</head>
<body>
<h1>Welcome! </h1>
<div id="buttons">
<button class="myButton" onclick="showTickets(); toggle_visibility('table');">View My Tickets</button>
<button class="myButton" onclick="toggle_visibility('Submit');">Submit Ticket</button>
<button class="myButton" onclick="toggle_visibility('changePassword');">Change my Password</button>
</div>
<div id = "table" style="visibility: hidden;" > </div>
<div id = "Submit" style="visibility: hidden;">
<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="submit" value="Submit" onclick="sendTicket();" />
</li>
</ul>
</form>
</div>

</body>
</html>

Answer

You should change the type of you input from submit to button so the sendTicket() will be triggered, else the form will be submited before reached your sendTicket() function so it should be :

<input type="button" value="Submit" onclick="sendTicket();" />

Instead of :

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

Hope this 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 My Tickets</button> 
  <button class="myButton" onclick="toggle_visibility('Submit');">Submit Ticket</button> 
  <button class="myButton" onclick="toggle_visibility('changePassword');">Change my 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>