Response title
This is preview!
Move this topic
ajax form works - partially
in Using jQuery
•
10 years ago
Used a contact form, and it works - except that it doesn't extract the phone number field into the email. Any suggestions why?
Thanks!
1
Replies(6)
Re: ajax form works - partially
10 years ago
Please give us your code or explain more about your problem. As it stands now all i can say is make sure that your form has a phone number field...
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
Re: ajax form works - partially
10 years ago
The first block is the php code, the next is the html page it affects…
<?php
$toEmail = "my email address"; //'Send to' address…
$subject = 'An inquiry from website ';
//Let's clean harmful characters from raw POST data using PHP Sanitize filters.
$postName = filter_var($_POST["postName"], FILTER_SANITIZE_STRING);
$postEmail = filter_var($_POST["postEmail"], FILTER_SANITIZE_EMAIL);
$postPhone = filter_var($_POST["postPhone"], FILTER_SANITIZE_STRING);
$postMessage = filter_var($_POST["postMessage"], FILTER_SANITIZE_STRING);
//Let's put additional php validation here
if(strlen($postName)<1) // If length is less than 1 we will throw an HTTP error.
{
header('HTTP/1.1 500 Name Field Empty');
exit();
}
//similar validation applies to all data, unless you want to replace with some other strong validation.
if(strlen($postEmail)<1)
{
header('HTTP/1.1 500 Email Field Empty');
exit();
}
if(strlen($postPhone)<1)
{
header('HTTP/1.1 500 Phone Field Empty');
exit();
}
if(strlen($postMessage)<1)
{
header('HTTP/1.1 500 Message Field Empty');
exit();
}
//Finally we can proceed with PHP email.
$headers = 'From: '.$postEmail.'' . "\r\n" .
'Reply-To: '.$postEmail.'' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
@$sentMail = mail($toEmail, $subject, $postMessage .' -'.$postName, $headers);
if(!$sentMail)
{
header('HTTP/1.1 500 Couldnot send mail! Sorry..');
exit();
}else{
echo '<h2>Hi '.$postName.', Thank you for your email</h2>
<p>Your email has already arrived in my Inbox, all I need to do is Check it..
<br />Best regards</p> <div><a href="" onclick="return false;" id="gobacknow"><strong>Send Another Email!</strong></a></div>';
}
?>
<!-- html form -->
<div id="OpenContact"><a href="#">Contact Me</a></div>
<div id="form-wapper">
<div id="form-inner">
<div id="ErrResults"><!-- retrive Error Here --></div>
<div id="MainResult"><!-- retrive response Here --></div>
<div id="MainContent">
<fieldset>
<legend>Contact Form</legend>
<form id="MyContactForm" name="MyContactForm" method="post" action="">
<label for="name" id="nameLb">Name <span class="error">Name Field Required</span></label>
<input type="text" name="name" id="name" />
<label for="email" id="emailLb">Email Address <span class="error">Email Field Required</span></label><input type="text" name="email" id="email" />
<label for="phone" id="phoneLb">Phone <span class="error">Phone Field Required</span></label><input type="text" name="phone" id="phone" />
<label for="message" id="messageLb">Message <span class="error">Message Required</span></label><textarea ame="message" id="message" ></textarea>
<button>Submit</button>
</form>
</fieldset>
</div>
<div style="clear:both;"></div>
</div>
Leave a comment on Jax Ur's reply
Re: ajax form works - partially
10 years ago
Where is your JS? without js, the given php shouldn't include the email address or the name either due to the name of the field being different than the post param.
-- Kevin
-- Kevin
Re: Re: ajax form works - partially
10 years ago
Here's the JS:
<script type="text/javascript">
$(document).ready(function() {
$('.error').hide(); //Hide error messages
$('#MainResult').hide(); //we will hide this right now
$('#form-wapper').hide(); //hiden main form
$("button").click(function() { //User clicks on Submit button
// Fetch data from input fields.
var js_name = $("#name").val();
var js_email = $("#email").val();
var js_phone = $("#phone").val();
var js_message = $("#message").val();
// Do a simple validation
if(js_name==""){
$("#nameLb .error").show(); // If Field is empty, we'll just show error text inside <span> tag.
return false;}
if(js_email==""){
$("#emailLb .error").show();
return false;}
if(js_phone==""){
$("#phoneLb .error").show();
return false;}
if(js_message==""){
$("#messageLb .error").show();
return false;}
//let's put all data together
var myData = 'postName='+ js_name + '&postEmail=' + js_email + '&postPhone=' + js_phone + '&postMessage=' + js_message;
jQuery.ajax({
type: "POST",
url: "ctc/ajaxprocess.php",
dataType:"html",
data:myData,
success:function(response){
$("#MainResult").html('<fieldset class="response">'+response+'</fieldset>');
$("#MainResult").slideDown("slow"); //show Result
$("#MainContent").hide(); //hide form div slowly
},
error:function (xhr, ajaxOptions, thrownError){
$("#ErrResults").html(thrownError);
}
});
return false;
});
//If user wants to send another mail, send him back to form.
$("#gobacknow").live("click", function() {
$("#MainResult").hide(); //show Result
$("#MainContent").slideDown("slow"); //hide form div slowly
//clear all fields to empty state
$("#name").val('');$("#email").val('');$("#phone").val('');$("#message").val('');
});
$("#OpenContact").live("click", function() {
$("#form-wapper").toggle("slow");
});
});
</script>
Leave a comment on Kevin B's reply
Re: ajax form works - partially
10 years ago
Code looks fine, it should be sending the value of the phone input.
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
Re: ajax form works - partially
10 years ago
I just tried a couple of different browsers and user agents but it's still not working.
Leave a comment on Jax Ur's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Jax Ur's question