提交表单后如何重定向到特定页面

时间:2018-09-23 11:04:02

标签: javascript jquery html ajax forms

提交时我有一个表格,它将把您插入的数据作为电子邮件发送给某人。然后页面将您重定向到主页。

我想要的是防止服务器端进行重定向。并且我需要能够在提交表单而不是服务器端之后选择重定向到的位置。

所以我做了什么,我使用Javascript阻止了重定向,然后我确定了提交后的去向。

这是表格

 $("#CustomerEnquiryForm").submit(function (e)
   {
        e.preventDefault();
        
        // My redirection //
        if (window.location.href.indexOf("nodeId") > -1)
        {
            window.location = "/en/our-service/"
        }
        else
        {
            window.location = "/en/"
        }

           
    });
<form id="CustomerEnquiryForm" action="https://test.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
  
  
  
  
    <label for="first_name">First Name</label>
    <input id="first_name" required="required" name="first_name"  type="text" />
     <br>


    <label for="last_name">Last Name</label>
    <input id="last_name" required="required"  name="last_name"  type="text" />
    
    <br>

    <label for="company">Company</label>
    <input id="company" required="required"  name="company"  type="text" /><br>

    <label for="phone">Phone</label><input id="phone"  name="phone"  type="text" />
    <br>

     <label for="mobile">Mobile</label>
     <input id="mobile" required="required"  name="mobile"  type="text" />
     <br>

     <label for="email">Email</label>
     <input id="email" required="required"  name="email" type="text" /><br>





  </form>

我可以防止服务器重定向。和我的重定向工作..但主要问题..表格不再发送电子邮件。

如何解决此问题?

谢谢。

3 个答案:

答案 0 :(得分:0)

尝试

$("#CustomerEnquiryForm").submit(function(e) {
    e.preventDefault();
    $.post("https://test.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8", $(this).serialize() , function(data, status) {
        console.log(data);
        console.log(status);
        var obj = JSON.parse(data);
        //Read the server response here
        // My redirection //
        if (window.location.href.indexOf("nodeId") > -1) {
            window.location = "/en/our-service/"
        } else {
            window.location = "/en/"
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="CustomerEnquiryForm">
   <label for="first_name">First Name</label>
   <input id="first_name" required="required" name="first_name"  type="text" />
   <br>
   <label for="last_name">Last Name</label>
   <input id="last_name" required="required"  name="last_name"  type="text" />
   <br>
   <label for="company">Company</label>
   <input id="company" required="required"  name="company"  type="text" /><br>
   <label for="phone">Phone</label><input id="phone"  name="phone"  type="text" />
   <br>
   <label for="mobile">Mobile</label>
   <input id="mobile" required="required"  name="mobile"  type="text" />
   <br>
   <label for="email">Email</label>
   <input id="email" required="required"  name="email" type="text" /><br>
   <button type = "submit">Submit</button>
</form>

答案 1 :(得分:0)

您可以使用jQuery通过AJAX发送表单。 有了它,您无需在后台提交页面并重定向到提交的URL,而是可以在后台发送数据,获取响应并相应地进行重定向。

$.ajax({
  type: "POST",
  url: url,  //url where you want to send the data
  data: data, //somehow bind the input data to the variables and pass it
  success: someFunction, //you will get the response from server in this function
  dataType: 'JSON'
});

您可以了解有关AJAX here

的更多信息

另一种选择是在您的家庭URL的链接中发送响应,类似这样

https://example.com/?red=somelink.com

,然后使用javascript从客户端重定向它。

答案 2 :(得分:-1)

  

我可以防止服务器重定向。并且我的重定向有效..但是主要问题..该表格不再发送电子邮件了。

您需要使用ajax手动发送数据。

https://developer.mozilla.org/en-US/docs/Web/API/FormData

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

// after e.preventDefault()
const xhr = new XMLHttpRequest ;
xhr.open("POST","https://test.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8")
const formData = new FormData(document.getElemetById('CustomerEnquiryForm'))
xhr.send(formData)
xhr.onreadystatechange = function(){
    if( xhr.readyState === xhr.DONE && xhr.status === 200){
       // read server response
       console.log(xhr.reponseText)
       // redirect here
    }
}

或者如果您控制服务器,则执行重定向服务器端。