我的联系人表单正在工作,但没有显示成功消息。另一个开发人员写了PHP代码,但我做了一些jQuery,它不会显示我的消息。我很确定问题出在jQuery上。我对这行代码特别困惑…
$("#result").hide().html(output).slideDown();
}, 'json');
}
我认为你会想要使用。show(),因为#result需要显示html,但似乎没有做到这一点。完整的代码如下。
$(function(){
$(".btn").click(function() {
//get input field values
var user_name = $('input[name=name]').val(),
user_email = $('input[name=email]').val(),
user_message = $('textarea[name=message]').val(),
proceed = true;
//simple validation at client's end
//we simply change border color to red if empty field using .css()
if(user_name===""){
$('input[name=name]').css('border','2px solid red').after('<p class="error-msg">(What''s your name?)</p>');
proceed = false;
}
if(user_email===""){
$('input[name=email]').css('border','2px solid red').after('<p class="error-msg">(Please provide a valid email)</p>');
proceed = false;
}
if(user_message==="") {
$('textarea[name=message]').css('border','2px solid red').after('<p class="error-msg">(Please let me know what your inquiry is about)</p>');
proceed = false;
}
//everything looks good! proceed...
if(proceed)
{
//data to be sent to server
post_data = {'userName':user_name, 'userEmail':user_email, 'userMessage':user_message};
//Ajax post data to server
$.post('../../contact-form.php', post_data, function(response){
//load json data from server and output message
if(response.type === 'error')
{
output = '<div class="error">'+response.text+'</div>';
}else{
output = '<div class="success">'+response.text+'</div>';
alert('Thanks for the message');
//reset values in all input fields
$('.form-container input').val('');
$('.form-container textarea').val('');
}
$("#result").hide().html(output).slideDown();
}, 'json');
}
});
//reset previously set border colors and hide all message on .keyup()
$(".form-container input, .form-container textarea").keyup(function() {
$(".form-container input, .form-container textarea").css('border-color','');
$("#result").slideUp();
});
});
PHP代码<?php
if($_POST)
{$to_Email = "alexechaparro@gmail.com";//替换为收件人的邮箱地址$subject = 'alexsdogvacay.com';//邮件主题
//check if its an ajax request, exit if not
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
//exit script outputting json data
$output = json_encode(
array(
'type'=>'error',
'text' => 'Request must come from Ajax'
));
die($output);
}
var_dump($_REQUEST);
//check $_POST vars are set, exit if any missing
if(!isset($_POST["userName"]) || !isset($_POST["userEmail"]) || !isset($_POST["userMessage"]))
{
echo $_POST["userName"];
$output = json_encode(array('type'=>'error', 'text' => 'Input fields are empty!'));
die($output);
}
//Sanitize input data using PHP filter_var().
$user_Name = filter_var($_POST["userName"], FILTER_SANITIZE_STRING);
$user_Email = filter_var($_POST["userEmail"], FILTER_SANITIZE_EMAIL);
$user_Message = filter_var($_POST["userMessage"], FILTER_SANITIZE_STRING);
//additional php validation
if(strlen($user_Name)<4) // If length is less than 4 it will throw an HTTP error.
{
$output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
die($output);
}
if(!filter_var($user_Email, FILTER_VALIDATE_EMAIL)) //email validation
{
$output = json_encode(array('type'=>'error', 'text' => 'Please enter a valid email!'));
die($output);
}
if(strlen($user_Message)<5) //check emtpy message
{
$output = json_encode(array('type'=>'error', 'text' => 'Too short message! Please enter something.'));
die($output);
}
//proceed with PHP email.
/*
Incase your host only allows emails from local domain,
you should un-comment the first line below, and remove the second header line.
Of-course you need to enter your own email address here, which exists in your cp.
*/
//$headers = 'From: your-name@YOUR-DOMAIN.COM' . "'r'n" .
$headers = 'From: '.$user_Email.'' . "'r'n" . //remove this line if line above this is un-commented
'Reply-To: '.$user_Email.'' . "'r'n" .
'X-Mailer: PHP/' . phpversion();
// send mail
$sentMail = @mail($to_Email, $subject, $user_Message .' -'.$user_Name, $headers);
if(!$sentMail)
{
$output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
die($output);
}else{
$output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_Name .' Thank you for your email. I will get back to you as soon as possible.'));
die($output);
}
}div ?>
那么,这行令人困惑的代码:$('#result').hide().html().slideDown();
工作。不需要改变。我看到的一个问题是,您的变量output
没有与var
定义,使其成为全局变量。
除此之外,php代码似乎用die
函数杀死了成功响应,因为它没有返回任何输出。改变这个:
if(!$sentMail)
{
$output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
die($output);
}else{
$output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_Name .' Thank you for your email. I will get back to you as soon as possible.'));
die($output);
}
:
if(!$sentMail)
{
$output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
}else{
$output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_Name .' Thank you for your email. I will get back to you as soon as possible.'));
}
echo $output;
希望这对你有帮助!
T这是我第二次因为我的HTML而被烧了。之前我的HTML是…
<form id="contact_form">
<div id="result"></div>
<div class="form-group">
<label for="name" id="name">Name</label>
<input type="text" name="name" class="form-control" id="exampleInputName" placeholder="Name" required>
</div>
<div class="form-group">
<label for="Email" id="email">Email address</label>
<input type="email" name="email" class="form-control" id="exampleInputEmail1" placeholder="Email" required>
</div>
<div class="form-group">
<label for="Message" id="message">Message</label>
<textarea rows="4" name='message'class="form-control" placeholder="Message" required></textarea>
</div>
<div><span> </span>
<input type="button" class="btn btn-default" id='submit_btn' value="Submit">
</div>
</form>
我所做的只是将我的表单更改为字段集并将我的输入更改为
<button class="btn btn-default" id="submit_btn">Submit</button>
老实说,我不确定为什么这解决了它,但它确实。