Redirect from client side using html and ajax or js

Question

I have a login page basically connecting to a location, and do a simple post call. I want to redirect the page to somewhere else if a user clicks submit and if post returns 200 or success. If not, return fail. What would be the simplest way to do it? I am looking into client side redirect.

<html>
<head>
<title>Login</title>
</head>

<body>
<form action="/1.1.1.1:80/login" method="POST">

    <p>Username: <input type="text" name="username" /><p>
     <p>Password: <input type="password" name="password" /><p>
<p><input type="submit" value="Log In" /></p>
    {% module xsrf_form_html() %}

</form>
</body>
</html>

UPDATE:

<html>
<head>
<title>Please Log In</title>
<script src="/Users/src/downloads/app/jquery-2.1.4.min.js" type="text/javascript"></script>
</head>

<body>
<form action="https://1.1.1.1:80/login" method="POST">
#Tried as well, but doesn't redirect <form action="https://google.com" method="POST"> 

    <input class="form-control" type="text" required name="username" placeholder="username">
        <input class="form-control" type="password" required name="password" placeholder="Password">
            <input class="form-control" type="hidden" required name="eauth" value="pam">

<p><input type="submit" value="Log In" /></p>
    {% module xsrf_form_html() %}

</form>
</body>
</html>

<script type="text/javascript">
    $('form').submit(function(){
                     $.ajax({
                            type: "Post",
                            url: $('form').attr('action'),
                            success: function (response) {
                            window.location = 'http://www.google.com';
                            //error handling
                            }
                            });

                     //return false so the form does not submit again
                     return false;
                     });
    </script>

I am looking for redirect after it gets message from server saying 200 message or failure after the post call. — user1676735, May 21 '15 at 20:55
you will need to look into [AJAX](http://api.jquery.com/jquery.ajax/) — lolbas, May 21 '15 at 20:58
possible duplicate of [How can I make a redirect page using jQuery?](http://stackoverflow.com/questions/503093/how-can-i-make-a-redirect-page-using-jquery) — Ormoz, May 21 '15 at 21:05
Run your form checks inside `.submit(function(response){/* in here */}`. You are always redirecting on `success`. If you want the redirect to be based on Server info then you will want to send a JSON Object from the page you are getting your AJAX response from, which will show up as the `response` argument above. — StackSlave, May 21 '15 at 22:06
How would you send that? For now though, it's not redirecting at all whether success or fail. — user1676735, May 21 '15 at 22:12
umm could you kindly edit it in the code? I'll give it a shot. — user1676735, May 21 '15 at 22:20
Why is that wrong? The address is different, but I just put that as an example. It's a rest api location. It returns response as json. — user1676735, May 21 '15 at 22:24
However, I do get these errors now when I click login. I can't seem to login now. st.ajaxTransport.send @ jquery.js:8475 st.extend.ajax @ jquery.js:7930 (anonymous function) @ login?next=%2F:18 st.event.dispatch @ jquery.js:3045 st.event.add.y.handle @ jquery.js:2721 — user1676735, May 21 '15 at 22:24
I get this error on login submit ->>POST https://myrestapi:80/login 500 (Internal Server Error) jquery.js:8475 — user1676735, May 21 '15 at 22:27
I can login fine using the address, but when I enable jquery.js, I get above errors... — user1676735, May 21 '15 at 22:31

score 1 · Answer 1 · edited May 23 '17 at 10:26

you can post your form by jquery(ajax) and when result back decide what you want to do.
this link should help you

// Variable to hold request
var request;

// Bind to the submit event of our form
$("#foo").submit(function(event){

// Abort any pending request
if (request) {
    request.abort();
}
// setup some local variables
var $form = $(this);

// Let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");

// Serialize the data in the form
var serializedData = $form.serialize();

// Let's disable the inputs for the duration of the Ajax request.
// Note: we disable elements AFTER the form data has been serialized.
// Disabled form elements will not be serialized.
$inputs.prop("disabled", true);

// Fire off the request to /form.php
request = $.ajax({
    url: "/form.php",
    type: "post",
    data: serializedData
});

// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
    // Log a message to the console
    console.log("Hooray, it worked!");
});

// Callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
    // Log the error to the console
    console.error(
        "The following error occurred: "+
        textStatus, errorThrown
    );
});

// Callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
    // Reenable the inputs
    $inputs.prop("disabled", false);
});

// Prevent default posting of form
event.preventDefault();
});

score 0 · Answer 2 · answered May 21 '15 at 21:00

0

include jQuery and Try to use this according your code input

<script type="text/javascript">
    $(document).ready(function(){
      $('form').submit(function(){
        $.ajax({
            url: 'your-php-file.php',
            dataType: 'html',
            success: function(response) {
                window.location.href = response;
            }
        });
    });
     });
</script>

answered May 21 '15 at 21:00

Bilal Maqsood

1,163
3
15
43

What do you mean include jquery? Can you post example – user1676735 May 21 '15 at 21:09
[php redirect from ajax call](http://stackoverflow.com/questions/23322349/php-redirect-from-ajax-call?rq=1) here it is – Bilal Maqsood May 21 '15 at 21:12

Patrick Bracken · Answer 3 · 2015-05-21T21:40:13.637

Try something like this:

Make sure you have downloaded jquery.js file, put it in your directory somewhere, and put this in the head tag

<script src="path to your jquery file" type="text/javascript"></script>

Put this at the end of your html:

<script type="text/javascript">
$('form').submit(function(){
    $.ajax({
        type: "Post",
        url: $('form').attr('action'),
        success: function (result) {
            if(result.Code == 200) //change this to your status code return
              window.location = 'http://www.google.com';
            else
               //error handling
        }
    });

   //return false so the form does not submit again
   return false;
 });
 </script>

This should capture the form's submit event and instead post it via ajax which will allow you to handle the response however you want.

Comments are not for extended discussion; this conversation has been [moved to chat](http://chat.stackoverflow.com/rooms/78483/discussion-on-answer-by-patrick-bracken-redirect-from-client-side-using-html-and). — Taryn, May 21 '15 at 23:59

Redirect from client side using html and ajax or js

3 Answers3