您好,我目前正在开展一个项目。当用户提交表单时,它会将响应加载到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;
?>
提前感谢您的帮助!
答案 0 :(得分:2)
更正并报告发生的事情,
您的表单ID是&#34;联系表单&#34;并且您的JQ选择器已设置为&#34; contactform&#34;。
$("#contactform")
到
$("#contact-form")
答案 1 :(得分:1)
以下是您可以做的事情: 表格代码
<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代码:
<?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;
?>
答案 2 :(得分:0)
这是因为你正在调用post函数,而不是ajax。
试试这个:
$.ajax({
url: <your_url>,
type:'GET',
data: {'name': name_value, 'email' : email_value, 'message': message_value},
success: function(data){
yourdivcontent = eval(data)
$( "#response" ).html(yourdivcontent);
},
error: function(){
console.log("error");
}
})
在你的php函数中,只需在json中编码你的响应
返回json_encode(响应);
答案 3 :(得分:0)
echo json_encode($response)