如何消除联系表单的ajax功能？

Question

Yes, here is the landing page I bought: http://webuza.com/demo/landing/Advisa/index1.html

I want you to try and register.

The success AND error messages that appear after registering, show up in the same page, with the same URL.

I think that is the ajax function, right?

I want to keep the ajax function for error messages, but I want the SUCCESS message to appear in a whole new page, with a whole new url, something like: contact-thank-you.html.

I already created the html thank you page, but I don't know how to direct people there, after they successfully submit.

Any ideas?

Please, please!

:D

Here is my js code, which is in a document called custom.js:

// ********************************
// Request and contact Form
// ********************************
$("#formIndex, #contact").submit(function() {
        var elem = $(this);
        var urlTarget = $(this).attr("action");
        $.ajax({
                type : "POST",
                url : urlTarget,
                dataType : "html",
                data : $(this).serialize(),
                beforeSend : function() {
                    elem.prepend("<div class='loading alert'>" + "<a class='close' data-dismiss='alert'>×</a>" + "Loading" + "</div>");
                },
                success : function(response) {
                    elem.prepend(response);
                    elem.find(".loading").hide();
                    elem.find("input[type='text'],input[type='email'],textarea").val("");
                }
        });
        return false;
});

Here is my php code, which is in a document called contact-form.php:

<?php
    $to="company.email";/*Your Email*/
    $subject="Message from the Landing - Contact Form ";

    $date=date("l, F jS, Y");
    $time=date("h:i A");

    $name=$_REQUEST['name'];
    $email=$_REQUEST['email'];
    $phone=$_REQUEST['phone'];
    $caoch=$_REQUEST['caoch'];
    $file=$_REQUEST['file'];


    $msg="
        Message sent from Landing Contact Form on date  $date, hour: $time.\n
        First Name: $name\n
        Email: $email\n
        Phone: $phone\n
        Caoch: $caoch\n
        File: $file
        ";
    if($email=="") {
    echo "<div class='alert alert-danger'>
              <a class='close' data-dismiss='alert'>×</a>
              <strong>Warning!</strong> Please fill all the fields.
          </div>";
    } else {
    mail($to,$subject,$msg,"From:".$email);
    header("class='alert alert-success' Location: contact-thank-you.html");
    exit;

    }


?>

Here is the HTML code, of the home page:

<form class='reg-now-visible' id='formIndex' action="contact-form.php" method="post" accept-charset="utf-8" role="form">
                                <div class='control-group'>
                                    <input type="text" name="name" value="" placeholder='Enter your name' data-required>
                                </div>
                                <div class='control-group'>
                                    <input type="text" name="email" value="" class='insert-attr' placeholder='Enter your mail' data-required>
                                </div>
                                <div class='control-group'>
                                    <input type="text" name="phone" value="" placeholder='Enter your telephone' data-required data-pattern="^[0-9]+$">
                                </div>


                                    <div class="relative">
                                        <select name="caoch" class="styled">
                                            <option value="Select Your Caoch">Select Your Caoch</option>
                                            <option value="Caoch 1" >Caoch 1</option>
                                            <option value="Caoch 2" >Caoch 2</option>
                                            <option value="Caoch 3" >Caoch 3</option>
                                        </select>
                                    </div>

                                    <div class="relative">
                                        <select name="file" class="styled">
                                            <option value="Select File">Select File</option>
                                            <option value="File 1">File 1</option>
                                            <option value="File 2">File 2</option>
                                            <option value="File 3">File 3</option>
                                        </select>
                                    </div>

                                 <button type="submit" value="Register Now" class='btn submit sub-form' name="submit">Register Now</button>
                            </form>

                        </div>

Answer 1

Modify your AJAX call to be like this:

$('#formIndex, #contact').submit(function() {
  var elem = $(this);
  var urlTarget = elem.attr('action');
  $.ajax({
    type: 'POST',
    url: urlTarget,
    dataType: 'html',
    data: elem.serialize(),
    beforeSend: function() {
      elem.prepend('<div class="loading alert><a class="close" data-dismiss="alert">x</a>Loading</div>');
    },
    success: function(response) {
      response = $(response);
      if (response.hasClass('alert-success')) {
        location.href = 'URL TO YOUR CONTACT-THANK YOU PAGE';
      } else {
        elem.prepend(response);
        elem.find('.loading').remove();
        elem.find('input[type="text"], input[type="email"], textarea').val('');
      }
    }
  });
});

Answer 2

First, you should ask to support team where you bought that template now around your problem you should return some JSON and take advantage of that on the jQuery code, for example:

$.get('URL').success(function (data) {
    if (data.error) {
        // Show the error message on the same page and prevent the default behavior
    } else {
        // then all was fine so this is your success
        location.href = 'another'; // where another is the page where you want to show your success message
    }
}).error(function (data, status, headers, config) {
    if (status == '500') {
        console.log("No server connection");
    }
});

Hope this help