Question

我不确定我是否使用正确的方法来爱这个联系表单上隐藏的div。我想点击提交按钮加载隐藏的div。有人可以指出我到底做错了什么吗？ http://thebrlab.com/razor-chic-of-atlanta/sign-up.php

<?php
/*
* Ajax form submit
*/

# request sent using HTTP_X_REQUESTED_WITH
if( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) ){
if (isset($_POST['name']) AND isset($_POST['email']) AND isset($_POST['subject']) AND isset($_POST['message'])) {
$to = 'info@thebrlab.com';

$name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
$subject = filter_var($_POST['subject'], FILTER_SANITIZE_STRING);
$message = filter_var($_POST['message'], FILTER_SANITIZE_STRING);
$sent = email($to, $email, $name, $subject, $message);
if ($sent) {
echo 'Message sent!';
} else {
echo 'Message couldn\'t sent!';
}
}
else {
echo 'All Fields are required';
}
return;
}

/**
* email function
*
* @return bool | void
**/
function email($to, $from_mail, $from_name, $subject, $message){
$header = array();
$header[] = "MIME-Version: 1.0";
$header[] = "From: {$from_name}<{$from_mail}>";
/* Set message content type HTML*/
$header[] = "Content-type:text/html; charset=iso-8859-1";
$header[] = "Content-Transfer-Encoding: 7bit";
if( mail($to, $subject, $message, implode("\r\n", $header)) ) return true; 
}

?>


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Sign Up</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"    
type="text/javascript"></script>

<script type="text/javascript">

$('#submit').click(function() {
$('#thankyou').css({
  'display': 'block'
});
});

</script>

</head>
<body>



<div id="wrap">
<h1>Razor Chic: Class Sign-Up</h1>
<div class="alert">Hello</div>
<form id="form" action="" method="post">
<div>
<label>
<span>Name: *</span>
<input placeholder="Name" type="text" name="name" required>
</label>
</div>
<div>
<label>
<span>Email: *</span>
<input placeholder="Email address" type="email" name="email" required>
</label>
</div>
<div>
<label>
<span>Subject: *</span>
<input placeholder="Subject" type="text" name="subject" required>
</label>
</div>
<div>
<label>
<span>Message: *</span>
<textarea placeholder="Type your message here...." name="message" required></textarea>
</label>
</div>
<div>
<button name="submit" type="submit" id="submit">Send Email</button>
</div>
</form>
<p>Note: * Fields are required</p>
</div>


<!---- THANK YOU---->
<div id="thankyou" style="display:none;">


<!---- PAY BEGINS ---->
<div id="pay1-wrapper">
<div id="pay1">

<form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="business" value="Razorchicofatlanta@gmail.com">
<input type="hidden" name="item_name" value="Look and Learn: Deposits or Pay Off">
<input type="hidden" name="amount" value="100.00">            
<input type="hidden" name="return" value="http://thebrlab.com/razor-chic-of-atlanta/thank-you.html">
<input type="hidden" name="undefined_quantity" value="1">

<input style="background: none" onMouseOver="this.src='images/pay-now-up.png'" onMouseOut="this.src='images/pay-now-down.png'" type="image" src="images/pay-now-down.png" height="41" width="141" border="0" alt="Pay Now" class="button">

</form>

</div>
</div> 
<!---- PAY ENDS ----> 

<img src="images/thank-you-sign-up.png" />

</div>
<!---- THANK YOU---->

</body>
</html>

Answer 1

您可以使用.show()之类的

$('#thankyou').show();

<强>更新

您需要将jquery代码包装在像

这样的就绪块中

$(document).ready(function() {
    $('#submit').click(function() {
        $('#thankyou').show();
    });
});

基本上你是在尝试引用尚未加载的head中的DIV。在div加载后使用ready代码附加click事件

Answer 2

你的提交功能需要进行AJAX调用，如果成功，它应该显示隐藏的div。另外，为了防止表单提交，提交函数必须返回false 。

在此处查看如何使用jQuery进行AJAX调用：http://api.jquery.com/jquery.ajax/

那么，你需要解决的问题：

如果您还没有将文件拆分为两个文件：常规文件和您将进行AJAX调用的文件
从您的提交函数进行AJAX调用（此外，可以在此处完成一些基本的客户端验证）
如果AJAX返回成功，则显示div：$('#thankyou').fadeIn();例如
为防止您的表单提交，提交功能必须返回false

更新

您没有包含script.js文件，这非常重要，因为它处理验证和AJAX调用。在这种情况下，您必须对该文件进行修改，因为不需要同时使用表单提交和提交按钮单击侦听器。你需要将你用AJAX调用的PHP代码分成另一个文件，并确保使用AJAX调用它。检查呼叫是否成功，以及响应（您可以从中回复“ok”），并显示相应的消息/显示div。

Answer 3

更改此行：

<div id="thankyou" style="display:none;">

为：

<?php
if($sent){

  echo '<div id="thankyou" style="display:block;">';
}
else{
  echo '<div id="thankyou" style="display:none;">';
}
?>

Answer 4

$('#submit').click(function() {
$('#thankyou').css({
  'display': 'block'
});
});

删除上述处理程序;

<div id="thankyou" style="display:none;"></div>

使用以下代码替换上面的行

if(isset($_POST['submit'])){
?>

<div id="thankyou" style="display:block;">
<?php
}else{
?>
<div id="thankyou" style="display:none;">



<?php
    }

    ?>

在联系表格上加载隐藏的Div

4 个答案: