How do I POST my form results to another URL after it's been submitted?

Question

I have form which will contain customer related information, Following three tasks I am trying to this form.
1. Validated the information like correct email_id, Mobile Number
2. Posting the form data in Josn format.
3. After successful submission I have redirect to other page like conformation page.

First and second is working but I don't know how to redirect to other page after successful submission.

Form.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">



<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>

<style>
label.error {
    color: red;
    font-style: italic;
    background: transparent url(images/unchecked.gif) no-repeat scroll 0 0;
    padding-left:20px;
    margin-left:10px;
}
input.error {
    border: 1px dotted red;
}
.border td {
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
.border th {
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
</style>


<script>
$(document).ready(function(){

    $("#register-form").validate({
        rules: {
            userName: "required",                           
            email: {
                required: true,
                email: true
            },                                              
            userContactNumber: "required"                       
        },
        messages: {
            userName: "Please enter your Name",
            userContactNumber: "Please enter your Mobile number",                           
            email: "Please enter a valid email address",                                           
        },
        submitHandler: function(form) {

            // get values from textboxs 
            var uName = $('#userName').val();
            var mailId = $('#email').val();
            var mobNum = $('#userContactNumber').val();

            // Alert for DEMO

            //alert("Name:"+uName+", Email:"+mailId+", Mob_Num:"+mobNum);

            // comment out AJAX for DEMO only

            $.ajax({
                url:"http://localhost/homes/bookService.php",
                type:"POST",
                dataType:"json",
                data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum },
                //type: should be same in server code, otherwise code will not run
                ContentType:"application/json",
                success: function(response){
                    //alert(JSON.stringify(response));
                    alert("1");
                    window.location.href = 'index.html';
                },
                error: function(err){
                    //alert(JSON.stringify(err));
                }
            });


            return false; // block regular submit
        }
    });

});
</script>

<title>All in One Home Services - The Next Generation of Services Provider</title>

</head>
    <body>
        <form  class="form-horizontal" id="register-form"  method="post">
            <div class="col-lg-8">      
                <div class="fieldgroup">
                    <label class="col-lg-3 control-label" for="userName">Name:<font
                        style="color: red;">*</font></label>
                    <div class="col-lg-9">
                        <input style=" height: 30px;" class="form-control" id="userName" name="userName"
                            placeholder="Full Name" value="" type="text" required>
                    </div>
                </div>

                <div class="fieldgroup">
                    <label for="email" class="col-lg-3 control-label">Email:<font
                        style="color: red;">*</font></label>
                    <div class="col-lg-9">
                        <input style="height: 30px;" class="form-control" name="email"
                            id="email" placeholder="you@example.com" value=""
                            type="text" required>
                    </div>
                </div>

                <div class="fieldgroup">
                    <label for="userContactNumber" class="col-lg-3 control-label">Mobile:<font
                        style="color: red;">*</font></label>
                    <div class="col-lg-9">
                        <input style="height: 30px; width:100%;" class="form-control" id="userContactNumber"
                            name="userContactNumber" placeholder="Mobile Number"
                            onkeypress="enableKeys(event);" maxlength="10" type="text" required>
                    </div>
                </div>
            </div>
            <input type="submit" name="submit" value="Submit form"  />
        </form>
    </body>
</html>

bookService.php

    if(isset($_POST['type']))
    {
        if($_POST['type']=="booking"){
            $name = $_POST ['Name'];
            $mobile = $_POST ['Mob_Num'];
            $mail = $_POST ['Email'];    

            $query1 = "insert into customer(cust_name, cust_mobile, cust_email) values('$name','$mobile','$mail')";
            $result1=mysql_query($query1);
        }
    }
    else{
        echo "Invalid format";
    }
?>

http://stackoverflow.com/questions/5647461/how-do-i-send-a-post-request-with-php — Rikudou_Sennin, Feb 09 '15 at 13:01
Since you're using AJAX you'll want to use `window.location.href = 'wherever.html'; ` in your success callback. — Jay Blanchard, Feb 09 '15 at 13:02
@Jay Blanchard, thanks for your reply But is not redirecting to other page. It say on the same page but insert data into database.. — Neelabh Singh, Feb 09 '15 at 13:04
Did you place the code in your success callback? Are seeing any errors in your browser's console? — Jay Blanchard, Feb 09 '15 at 13:10
@Jay Blanchard, yes I am able to send data to server but It is not giving alert("1") If It is sccuess..I updated code please check It. — Neelabh Singh, Feb 09 '15 at 13:15
If it is not giving the alert there is a problem, it *is not a success*. Look at your browser's console for errors. — Jay Blanchard, Feb 09 '15 at 13:16

score 3 · Accepted Answer · answered Feb 09 '15 at 13:14

3

You need to do the redirect in the success callback of your AJAX function -

$.ajax({
    url:"http://localhost/homes/bookService.php",
    type:"POST",
    dataType:"json",
    data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum },
    //type: should be same in server code, otherwise code will not run
    ContentType:"application/json",
    success: function(response){
        window.location.href = 'wherever.html'; // redirect on success
    },
    error: function(err){
        //alert(JSON.stringify(err));
    }
});

In addition you should quit using alert() for troubleshooting.

answered Feb 09 '15 at 13:14

Jay Blanchard

34,243
16
77
119

thanks for your answer, I use the same code but its not redirected and also, I only want to redirect only If inserting is sccessful. I am waiting for ur reply. – Neelabh Singh Feb 09 '15 at 13:17
See my comments above - your AJAX post *is not successful*. Check your browser's console for errors. – Jay Blanchard Feb 09 '15 at 13:18
Its working if I put window.location.href = 'wherever.html'; in error Please tell me where I am wrong, I am New in Web technolgies. – Neelabh Singh Feb 09 '15 at 13:48
Check your browser's console as I said, there is something wrong and you're not getting a success callback. Your browser's console will reveal the errors. – Jay Blanchard Feb 09 '15 at 13:51

score 1 · Answer 2 · answered Feb 09 '15 at 13:56

1

I am not able comment so I am not that sure about my answer nut you can try like pass a variable to

$(document).ready(function(e){
//write this some where in function you can see whether its working or not 
e.preventDefault();
}

I was having the same problem ?I resolved it using this I was not able to commnet so I ties to answer it.

answered Feb 09 '15 at 13:56

Bhavik Joshi

2,557
6
24
48

The OP is using `return false;` – Jay Blanchard Feb 09 '15 at 14:10

How do I POST my form results to another URL after it's been submitted?

2 Answers2