Prevent the contact form submit bottom to redirect the page

[farzadina]

Here is my contact form:

<form method="post" action="mail.php">
     <input type="text" name="name">
      <input type="text" name="email">
      <textarea rows="4" cols="20" name="message">
      </textarea>
      <input type="submit" value="Send">
</form>

And the mail.php ::

<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent="From: $name \n Message: $message";
$recipient = "[email protected]";
$subject = "Contact Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank you!";
?>

Ok, it will redirect my page to mail.php and will echo a “Thank you!” message, how to stop this redirect and just show a “Thank you!” message, just bellow the form. Note that I’m really rookie in Ajax!

[farzadina]

It worked, but I’m worry about the safety.. JS ::

$('.form').submit(function() {
var name = $(".name").val(); var email = $(".email").val(); var message = $(".message").val(); var dataString = 'name=' + name + '&email=' + email + '&message=' + message; $.ajax({ type : "POST", url : "mail.php", data : dataString, cache : false, success : function() { $(".form").hide(); $(".notice").fadeIn(400); } }); return false; });

PHP ::

    <?php $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $formcontent="From: $name \n Message: $message";
    $recipient = "[email protected]";
    $subject = "Contact Form";
    $mailheader = "From: $email \r\n";
    mail($recipient, $subject, $formcontent, $mailheader) or die("Error! Something is wrong");


?>

[__]

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
Regarding safety: always validate all user-submitted data.

(This is always relevant; it has nothing to do with whether or not you use ajax.)

You cannot trust user input. Sometimes it will have mistakes. Sometimes it will be an attack. In this particular case, you use the email field from the form in your From header. This opens your form to header injection (oversimplified example):

Name:    [ Mallory ]
Email:   [ mal@attack\r\nBCC: <everyone on my spam list> ]
Message: [ Free viagra! ]

bam! You’re a spam server.

Fixing this is simple: validate that the email field really does contain an email address.

<?php
#  ... snip ...  #
$email = filter_var( $_POST['email'],FILTER_VALIDATE_EMAIL );
if( ! $email ){
    /* not a valid email - insert error message here */ 

    /* and exit */
    die;
}
#  ... snip ...  #

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
Regarding functionality:

You’re showing the notice no matter what: it will say “thank you” if the ajax request succeeds, even if sending the mail failed. Your die message (which is a really bad way of handling errors anyway) will never be seen.

I’d suggest changing your php script to return a value – true or false, for example, depending on whether the mail was sent:

<?php
#  ... snip ...  #

# $sent will be TRUE if mail() is successful; FALSE if not
$sent = mail( $recipient,$subject,$formcontent,$mailheader );

# format your response as JSON; print
print json_encode( array( 'sent'=>$sent ) );
# and exit
die;

Then check that value when you get the ajax response:

$.ajax({ 
    type : "POST"
   ,url : "mail.php"
   ,data : dataString
   ,dataType: "json" /*<-- you expect a JSON response from your script */
   ,cache : false
   ,success : function( responseData ) { 
        if( responseData.sent === true ){
            /* mail successfully sent */
            $( ".form" ).hide(); 
            $( "#success-notice" ).fadeIn( 400 ); 
        }
        else{
            /* mail not sent.
                you could add more information
                (error messages, for example)
                to the json response for use here. */
            $( "#failure-notice" ).fadeIn( 400 );
        }
    } 
});

[farzadina]

Thank you @traq but unfortunately I couldn’t get your sample codes to my work.
Can you complex your PHP with my code (which I sent in my first post of this topic)?

[Author]

Posts