提交表单并重定向页面

问题描述 投票:0回答:5

我在SO上看到了很多与此相关的其他问题,但没有一个对我有用。我正在尝试提交POST表单,然后将用户重定向到另一个页面,但是我不能同时实现这两种功能。我可以获取重定向,也可以获取发布信息,但不能同时获取两者。这是我现在所拥有的:

<HTML>
    <HEAD>
    </HEAD>
    <BODY>
        <script type="text/javascript">
            function redirect() {
                window.location.href = "http://www.google.com";
            }
        </script>
        <form id="myForm" method=POST name=transferform
          action="some_place.php" onsubmit="redirect();">
            <input name=gold type=text value="1" size=5>
            <input name=recipient type=text value="mypal" size=10>
            <input id="myButton" type=submit name=submission value="Send">
        </form>
        <script type="text/javascript">
            window.onload = function(){
                document.getElementById('myButton').click();
            };
        </script>

    </BODY>
</HTML>

我在做什么错?

javascript html
5个回答
0
投票

提交表单后,当前页面上的所有JS执行都会停止。您需要从服务器重定向,或者让服务器吐出一个包含将执行重定向的JavaScript的页面。


0
投票

您可以使用ajax汇总表格,然后在收到服务器的响应后使用javascript重定向页面,或者如果要执行全页回发,则可以使用Location标头使用php

header('Location: http://somewebsite.com/somepage.php');

0
投票

考虑使用延期替代来替代表单的默认提交行为。

$('#myForm').submit(function (e) {
    // prevent form submission
    e.preventDefault();
    var thisForm = $(e.currentTarget);
    $.ajax({
        // simulate form submission
        type: thisForm.attr('method') || 'POST',
        url: thisForm.attr('action') || window.location.href,
        data: $.serialize(thisForm.data())
    })
    .always(function () {
        // when it is done submitting data to the server, redirect
        window.location.replace("http://www.google.com");
    });
});

0
投票

您可以通过Ajax请求发布表单,并在完成请求后将其重定向到新页面上。

类似这样:

<HTML>
<HEAD>   
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</HEAD>
<BODY>
<form id="myForm" method=POST name=transferform action="some_place.php" onsubmit="return false;">
  <input name=gold type=text value="1" size=5>
  <input name=recipient type=text value="mypal" size=10>
  <input id="myButton" type=submit name=submission value="Send">
</form>

<script type="text/javascript">
  $(function() {
    $(document).on("submit", "#myForm", function(event){
      var name = $('input[name="gold"]:first'),
        recipient = $('input[name="recipient"]:first');
      $.post( "some_place.php", { name: name, recipient: recipient })
      .done(function( data ) {
        window.location.href = "http://www.google.com";
      });
    });
  });
</script>
</BODY>
</HTML>

0
投票

最佳方法是在提交表单后通过服务器端重定向。另一个是阻止默认表单提交,并使用ajax提交表单。这是示例代码:

$("#myform").submit(function(e) {
    e.preventDefault();
  var frm = $('#myform');        
    $.ajax({           
       type: frm.attr('method'),
       url: frm.attr('action'),
       data: frm.serialize(),
       success: function (data) {
            console.log('data');
            window.location.replace('your-url');
        }
});
© www.soinside.com 2019 - 2024. All rights reserved.