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

Question

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

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

所以我做了什么，我使用 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>

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

如何解决这个问题？

谢谢。

Answer 1

试试这个

$("#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>

Answer 2

您可以使用 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 从客户端重定向它。

Answer 3

我可以阻止服务器重定向。我的重定向有效..但主要问题..表单不再发送电子邮件。

你需要用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
    }
}

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