Home › Forums › JavaScript › Prevent the contact form submit bottom to redirect the page
- This topic is empty.
-
AuthorPosts
-
September 10, 2013 at 10:08 am #149657farzadinaParticipant
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!
September 11, 2013 at 12:22 am #149689farzadinaParticipantIt 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"); ?>
September 11, 2013 at 8:24 am #149705__Participant~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
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 yourFrom
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 ); } } });
September 14, 2013 at 4:39 am #150049 -
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.