没有刷新的表单提交不工作 - Form submitting without refresh not working

我正在尝试提交表单而不做硬刷新，但我的页面正在刷新。我试着把action=“javascript:void(0);"在表单标签，但没有工作。我也不会使用jquery。

导致错误的工作流程:

提交一个表单，它应该发送一些信息到一个php文件

页面被定向到另一个不存在的页面。

    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>

<标题>欢迎!

查看我的门票提交票更改密码

全名
电子邮件
主题
您的留言*

您应该将您输入的type从submit更改为button，以便触发sendTicket()，否则表单将在到达sendTicket()函数之前提交，因此它应该是:

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

代替:

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

希望对你有帮助。

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>