我想提交一个表单而不进行硬刷新，但我的页面正在刷新。我尝试将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>

欢迎您！

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

全名

电子邮件
主题
您的留言*

来源

2016-11-05 J. Doe

尝试把的onsubmit的形式，而不是行动= “返回false”= “...” –

你应该改变你的type输入从submit到button所以sendTicket()将被触发，其他形式将之前submited达到你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>

来源

2016-11-05 22:19:25

表单提交而不刷新不起作用

欢迎您！

回答

相关问题