Load Hidden Div on Contact Form
Question
I'm not sure if I'm using the right method to love a hidden div on this contact form. I would like to load the hidden div on click of Submit button. Can someone please point out what exactly I am doing wrong? 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 answers
solution1
1 ACCPTED 2014-02-09 07:02:15
You can use .show() like
$('#thankyou').show();
update
You need to wrap the jquery code in a ready block like
$(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. Use the ready code to attach the click event after the div has loaded
solution2
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. Also, in order to prevent the form from submitting, the submit function has to return false .
See how to make an AJAX call using jQuery here: 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
- make an AJAX call from your submit function (also, some basic client-side validation could be done here)
- if AJAX returns a success, show the div:
$('#thankyou').fadeIn();for example - to prevent your form from submitting, the submit funcion must return false
UPDATE
You didn't include your script.js file, which is very important as it handles the validation and the AJAX call. 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. 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.
solution3
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;">';
}
?>
solution4
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
}
?>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.