Javascript redirect after form submission

Question

I'm fairly new to JavaScript and I'm trying to figure out a way to, instead of showing a "Thank You" div when a user hits the "Submit" button of my form, go to an HTML page of my choosing, i.e., www.site.com/thanks.html. I've found a few different ways that this is possible, but have yet not be able to successfully implement anything within this specific form and need a bit of help.

Here is the form HTML:

<div class="row">
<div class="span12">
    <div id="success"></div>
</div>

<div class="span6">
    <div class="control-group controls-row">
        <input class="inputbox span3" type="text" id="rp_name" name="rp_name" placeholder="Name" value="" />
        <input class="inputbox span3" type="text" placeholder="Email" name="rp_email" id="rp_email" value="" />
    </div><!-- end control group -->

    <div class="control-group">
        <input class="inputbox span6" type="text" name="rp_subject" placeholder="Subject" id="rp_subject" value="" />
    </div><!-- end control group -->

    <div class="control-group">
        <input class="btn" id="submit-form" type="submit" name="submit" value="Send Message" />
    </div><!-- end control group -->
</div>

<div class="span6">
    <div class="control-group">
        <textarea class="textarea span6" placeholder="Available Days" name="rp_message" id="rp_message">
        </textarea>
    </div><!-- end control group -->
</div>

Here is where it's pulling the "success message" js from:

$.ajax({
     type: 'POST',
     url: 'php_helpers/contact_form.php',
     data: data_html,
     success: function(msg){

     if (msg == 'sent'){
         success.html('<div class="alert alert-success">Message <strong>successfully</strong> sent!</div>')  ;
           $('#rp_name').val('');
         $('#rp_email').val('');
         $('#rp_message').val('');
        }else{
           success.html('<div class="alert alert-error">Message <strong>not</strong> sent! Please Try Again!</div>')  ; 
        }
     }
});

So I need to swap out the "div class="alert alert-success"" area with a redirect. Hoping this is a simple fix!

Thanks for any help!

I checked out that thread, however my usage for it is a bit different. While they suggested use of the window.location, I didn't find a clear way of implementing it with my form. I apologize if it seems like a duplicate - I was simply trying to find out how to use it for my specific needs, as I tried and was unsuccessful. — user3372102, Mar 19 '14 at 18:18
you just put what they say to use where you want it to execute. eg in place of `success.html....` — Patrick Evans, Mar 19 '14 at 18:26

score 2 · Answer 1 · answered Mar 19 '14 at 17:47

2

I think you can use window.location for this sort of thing.

e.g.:

window.location = '/success_page';

answered Mar 19 '14 at 17:47

mgilson

300,191
65
633
696

score 1 · Answer 2 · answered Mar 19 '14 at 17:48

So you can manipulate window.location to redirect.

window.location.replace("http://yoursite.com/thankyou.html");

if (msg == 'sent'){
    window.location.replace("http://yoursite.com/thankyou.html");
    $('#rp_name').val('');
    $('#rp_email').val('');
    $('#rp_message').val('');
}else{
    window.location.replace("http://yoursite.com/wrong_information.html");
}

score 0 · Answer 3 · answered Mar 19 '14 at 18:02

0

you can definetly change the location of page. In javascript there is a facility.

window.location = "YOUR PATH HERE";

answered Mar 19 '14 at 18:02

Dhruv Pandya

67
6

Javascript redirect after form submission

3 Answers3