javascript - Submit a form and Redirect the page

I've seen a lot of the other questions related to this on SO, but none have worked for me. I am trying to submit a POST form and then redirect the user to another page, but I can't get both to happen. I can either get the redirect, or the post but not both. Here is what I have now:

<HTML>
    <HEAD>
    </HEAD>
    <BODY>
        <script type="text/javascript">
            function redirect() {
                window.location.href = "";
            }
        </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>

What am I doing wrong?

<HTML>
    <HEAD>
    </HEAD>
    <BODY>
        <script type="text/javascript">
            function redirect() {
                window.location.href = "http://www.google.";
            }
        </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>

What am I doing wrong?

Share Improve this question edited Oct 7, 2013 at 19:56 asked Oct 7, 2013 at 19:48 fvrghl 3,7286 gold badges30 silver badges37 bronze badges

Add a ment |

5 Answers 5

Sorted by: Reset to default 1

Once you submit a form all JS execution on the current page stops. You need to either redirect from the server, or have the server spit out a page containing JavaScript that will perform the redirect.

You can post the form via Ajax request and after plete the request redirect it on new page.

something like this:

<HTML>
<HEAD>   
  <script src="//ajax.googleapis./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.";
      });
    });
  });
</script>
</BODY>
</HTML>

the best way to do this, is through server side redirection after the form submitted. Another is with preventing the default form submission and use ajax to submit the form. here is an example code:

$("#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');
        }
});

You can either sumbit the form using ajax then after receiving response from server redirect the page using javascript or if you want to do full page postback then you can use Location header to redirect using php:

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

Consider overriding the form's default submission behaviour using a Deferred override.

$('#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.");
    });
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Submit a form and Redirect the page - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)