堆栈内存溢出
  简体   繁体   English

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

[英]Load Hidden Div on Contact Form

 原文  2014-02-09 06:56:19  6   4    javascript/ php/ jquery/ css

问题描述

I'm not sure if I'm using the right method to love a hidden div on this contact form. 我不确定我是否使用正确的方法爱此联系表上的隐藏div。 I would like to load the hidden div on click of Submit button. 我想在单击“提交”按钮时加载隐藏的div。 Can someone please point out what exactly I am doing wrong? 有人可以指出我到底在做什么错吗？ http://thebrlab.com/razor-chic-of-atlanta/sign-up.php 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>

4 个解决方案

解决方案1
 1 已采纳  2014-02-09 07:02:15

You can use .show() like 你可以像这样使用.show() 

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

update 更新

You need to wrap the jquery code in a ready block like 您需要将jquery代码包装在一个就绪的块中，例如 

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

Basically you're trying to reference a DIV in the head that hasn't been loaded yet. 基本上，您正在尝试引用尚未加载的head中的DIV。 Use the ready code to attach the click event after the div has loaded 在div加载后，使用ready代码附加click事件

解决方案2
 0  2014-02-09 07:00:09

Your submit function needs to make that AJAX call, and, if success, it should show the hidden div. 您的Submit函数需要进行该AJAX调用，如果成功，它应该显示隐藏的div。 Also, in order to prevent the form from submitting, the submit function has to return false . 另外，为了防止表单提交， submit函数必须返回false 。

See how to make an AJAX call using jQuery here: http://api.jquery.com/jquery.ajax/ 在此处查看如何使用jQuery进行AJAX调用： http : //api.jquery.com/jquery.ajax/

So, what you need to fix: 因此，您需要解决的问题：

  • split your file into two files if you haven't already: the regular one and the one you'll make the AJAX call to 如果还没有的话，将文件分成两个文件：常规文件和将要进行AJAX调用的文件
  • make an AJAX call from your submit function (also, some basic client-side validation could be done here) 从您的Submit函数进行AJAX调用（也可以在此处完成一些基本的客户端验证）
  • if AJAX returns a success, show the div: $('#thankyou').fadeIn(); 如果AJAX返回成功，则显示div： $('#thankyou').fadeIn(); for example 例如
  • to prevent your form from submitting, the submit funcion must return false 为了防止您的表单提交，提交功能必须返回false

UPDATE UPDATE

You didn't include your script.js file, which is very important as it handles the validation and the AJAX call. 您没有包括script.js文件，该文件非常重要，因为它可以处理验证和AJAX调用。 In that case, you must make modifications to that file, because there's no need to use both the form submit and the submit button click listeners. 在这种情况下，您必须修改该文件，因为不需要同时使用表单提交和提交按钮单击侦听器。 You need to separate your PHP code you'll call with AJAX into a different file and make sure you call that will using AJAX. 您需要将将用AJAX调用的PHP代码分离到另一个文件中，并确保使用AJAX进行调用。 Check for the success of the call, and for the response (you can echo something like 'ok' from it), and show the appropriate message/show the div. 检查呼叫是否成功以及响应（您可以从中回显类似“确定”的内容），并显示适当的消息/显示div。

解决方案3
 0  2014-02-09 07:02:56

Change this line: 更改此行： 

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

to: 至： 

<?php
if($sent){

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

解决方案4
 0  2014-02-09 07:12:13

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

Remove the above handler; 删除上述处理程序； 

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

Replace the above line with the following code 将上面的行替换为以下代码 

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

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



<?php
    }

    ?>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 隐藏功能隐藏联系表格 - Hide function hidden contact form 将div覆盖在联系表单的div上 - Overlay the div on the div of contact form 在隐藏的div中加载OpenStreetMap - Load OpenStreetMap in hidden div PHP联系人表单需要调用Javascript在.html主页上显示隐藏的div - PHP contact form needs to call Javascript to show a hidden div on main .html page 加载复选框时隐藏的div加载 - Load hidden div with checkbox on load 隐藏的div在页面加载时闪烁 - Hidden div flashing on page load 在页面加载时显示隐藏的div - Show a hidden div on page load 如何将HTML加载到隐藏的div中？ - How to load html into hidden div? 从隐藏的Div加载内容？ - Load Content From a Hidden Div? 在表单提交上显示隐藏的div - Show hidden div on form submit
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM