Stay on page after submitting form

问题

I'm trying to stay on the current page from where a form gets submitted. But somehow it's not working. I found some peaces of code on the internet and put it together.

This is the process.php file:

<?php
// Get Data    
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$phone = strip_tags($_POST['phone']);
$subject = strip_tags($_POST['subject']);
$message = strip_tags($_POST['message']);

// Send Message
mail( "email@domain.com", "Contact Form testttt",
"Name: $name\nEmail: $email\nPhone: $phone\nWebsite: $url\nMessage: $message\n",
"From: Forms testtttttttt" );
?>

And the rest of the code, the html and javascripts can be found on jsfiddle: jsfiddled code

    $(function(){
        $('#contact').validate({
        submitHandler: function(form) {
                $(form).ajaxSubmit({
                url: 'process.php',
                success: function() {
                    $('#contact').hide();
                    $('#contact-form').append("<p class='thanks'>thanks test.</p>")
                    }
                });
            }
        });         
    });

Forgot to mention what happens now. I get redirected to process.php page.

回答1:

Use jQuery.ajax() function to submit a form without refreshing a page. You need to do something like this:

test.php:

<script type="text/javascript" src="jquery-version.js"></script>
<script type="text/javascript" src="ajaxform.js"></script>

<form action='process.php' method='post' class='ajaxform'>
 <input type='text' name='txt' value='Test Text'>
 <input type='submit' value='submit'>
</form>

process.php:

<?php
      // Get your form data here in $_POST
?>

ajaxform.js

jQuery(document).ready(function(){

    jQuery('.ajaxform').submit( function() {

        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            data    : $(this).serialize(),
            success : function( data ) {
                         alert('Form is successfully submitted');       
                      },
            error   : function(){
                         alert('Something wrong');
                      }
        });

        return false;
    });

});

回答2:

You need to either return a 204 HTTP status or make the request using JavaScript instead of by submitting the form (this is known as Ajax and there are numerous tutorials on the subject linked from the jQuery tutorials page).