javascript - 表单提交不刷新不起作用

Question

我正在尝试提交表单而不进行硬刷新，但我的页面正在刷新。我尝试将 action=“javascript:void(0);” 放入表单标签中，但这不起作用。我也无法使用 jquery。

导致错误的工作流程:

1. 提交一个表单，该表单应该将一些信息发送到 php 文件。

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

       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>
   

   欢迎!

   查看我的门票 提交票据 修改我的密码

3. 全名 
4. 电子邮件
5. 主题
6. 您的留言 *

Answer 1

您应该将输入的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>