嗨,我目前正在开展一个项目.当用户提交表单时,它会将响应加载到div而不是加载新页面.我已经查看了与PHP一起在线工作的ajax表单的其他示例,但它并没有帮助我解决我的问题. (我对此很新).
当我单击提交时,不是将响应发布到同一页面并向所选电子邮件地址发送电子邮件,而是将我带到PHP文件并在那里回复响应,但不发送任何电子邮件.
任何人都可以看到这出错的地方?
表格代码:
<form name="contactform" id="contact-form" action="mailer.PHP">
<input type="text" class="textBox" name="name" value="Name" required="required" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
<input type="text" class="textBox" name="email" value="Email" required="required" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">
<textarea name="message" value="Message:" required="required" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">Message</textarea>
<input type="submit" value="Send Now">
</form>
<div id="response"></div>
Javascript代码:
<script>
$("#contactform").submit(function(event)
{
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
$submit = $form.find( 'button[type="submit"]' ),
name_value = $form.find( 'input[name="name"]' ).val(),
email_value = $form.find( 'input[name="email"]' ).val(),
message_value = $form.find( 'textarea[name="message"]' ).val(),
url = $form.attr('action');
/* Send the data using post */
var posting = $.post( url, {
name: name_value,
email: email_value,
message: message_value
});
posting.done(function( data )
{
/* Put the results in a div */
$( "#response" ).html(data);
});
});
</script>
PHP代码:(我的PHP存储在一个名为mailer.PHP的单独文件中)我试图将PHP $响应变量发回并放入响应div.
<?PHP
// Get the form fields and remove whitespace.
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$to = "your-emailaddresshere@email.com";
$subject = "New DPS Email from $name";
// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";
// Build the email headers.
$email_headers = "From: $name <$email>";
$mailed = (mail($to, $subject, $email_content, $email_headers));
if( isset($_POST['ajax']) )
$response = ($mailed) ? "1" : "0";
else
$response = ($mailed) ? "<h2>Thank You! Your message has been sent.</h2>" : "<h2>Oops! Something went wrong and we Couldn't send your message.</h2>";
echo $response;
?>
在此先感谢您的帮助!
解决方法:
这是你可以做的:
表格代码
<form name="contactform" id="contact-form">
<!--Your form elements here -->
</form>
javascript代码(使用#contact-form而不是#contactform)
<script>
$("#contact-form").submit(function(event)
{
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
$submit = $form.find( 'button[type="submit"]' ),
name_value = $form.find( 'input[name="name"]' ).val(),
email_value = $form.find( 'input[name="email"]' ).val(),
message_value = $form.find( 'textarea[name="message"]' ).val(),
url = 'your_url_here';
/* Send the data using post */
var posting = $.post( url, {
name: name_value,
email: email_value,
message: message_value
});
posting.done(function( data )
{
/* Parse JSON */
var response = JSON.parse(data);
$("#response").html(response.msg);
});
});
</script>
<?PHP
// Get the form fields and remove whitespace.
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$to = "your-emailaddresshere@email.com";
$subject = "New DPS Email from $name";
// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";
// Build the email headers.
$email_headers = "From: $name <$email>";
$mailed = mail($to, $subject, $email_content, $email_headers);
if( $mailed )
$response = json_encode(array("status"=>true,"msg"=>"<h2>Thank You! Your message has been sent.</h2>"));
else
$response = json_encode(array("status"=>false,"msg"=>"<h2>Oops! Something went wrong and we Couldn't send your message.</h2>"));
echo $response;
?>