CODEWITHSUNDEEP
javascriptphpjquerycss
juan beras
juan beras

Reputation: 51

Load Hidden Div on Contact Form

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 = '[email protected]';

$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="[email protected]">
<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>

Upvotes: 0

Views: 480

Answers (4)

Istiaque Ahmed
Istiaque Ahmed

Reputation: 6488

$('#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
    }

    ?>

Upvotes: 0

Shomz
Shomz

Reputation: 37701

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.

Upvotes: 0

jwatts1980
jwatts1980

Reputation: 7356

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

Upvotes: 1

AyB
AyB

Reputation: 11665

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;">';
}
?>

Upvotes: 0

Related Questions