javascript - 在联系表上加载隐藏的 Div

标签 javascript php jquery css

我不确定我是否使用了正确的方法来喜欢这个联系表单上的隐藏 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>

最佳答案

你可以像这样使用.show()

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

更新

您需要将 jquery 代码包装在一个就绪 block 中,例如

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

基本上,您正在尝试在 head 中引用尚未加载的 DIV。在 div 加载后使用 ready 代码附加点击事件

关于javascript - 在联系表上加载隐藏的 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21656316/

相关文章:

php - 使用 MAMP 进行文件路由

javascript - SVG 对象的实时迭代

javascript - HTML - anchor 链接平滑滚动未滚动到正确的部分

javascript - 无能为力。 Firefox 中的 jQuery 图像交换问题,适用于 IExplorer 8

javascript - JQuery、函数编排

php - 隐藏我从中获取数据的网站的 URL

php - Zend 框架 : The requested URL/my/path was not found on this server

javascript - 如何使用 JQuery 或 Js 将值 POST 到输入框中?

javascript - 用于访问下一个 html 页面的静态 4 位密码

javascript - 通过 JavaScript 检测文档中的希伯来语单词