Having trouble hiding and showing a div using PHP+Jquery
User submits their email address, email is checked if it's valid and not in the database..
The problem I am having is that I cannot get the form to hide and the thank you div to show, once the form has been submitted successfully. It currently replaces the email textbox with "Thank you!" text which I don't want.
What must be changed or added so the form is hidden (after it passes error/validation checks) and the thank you div is shown?
Thank you!!
Index.php
<?php
require "includes/connect.php";
$msg = '';
if($_POST['email']){
// Requested with AJAX:
$ajax = ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest');
try{
if(!filter_input(INPUT_POST,'email',FILTER_VALIDATE_EMAIL)){
throw new Exception('Invalid Email!');
}
$mysqli->query("INSERT INTO coming_soon_emails
SET email='".$mysqli->real_escape_string($_POST['email'])."'");
if($mysqli->affected_rows != 1){
throw new Exception('You are already on the notification list.');
}
if($ajax){
die('{"status":1}');
}
$msg = "Thank you!";
}
catch (Exception $e){
if($ajax){
die(json_encode(array('error'=>$e->getMessage())));
}
$msg = $e->getMessage();
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Notify me test</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="launch">
<h1>Notify</h1>
<h2>Notify me</h2>
<form id="form" method="post" action="">
<input type="text" id="email" name="email" value="<?php echo $msg?>" />
<input type="submit" value="Submit" id="submitButton" />
</form>
<div style="display:none" id="thankyou">
Thank you!
</div>
</div>
</body>
</html>
script.js
$(document).ready(function(){
// Binding event listeners for the form on document ready
$('#email').defaultText('Enter your Email Address');
// 'working' prevents multiple submissions
var working = false;
$('#page form').submit(function(){
if(working){
return false;
}
working = true;
$.post("./index.php",{email:$('#email').val()},function(r){
if(r.error){
$('#email').val(r.error);
}
else $('#email').val('Thank you!');
working = false;
},'json');
return false;
});
});
// A custom jQuery method for placeholder text:
$.fn.defaultText = function(value){
var element = this.eq(0);
element.data('defaultText',value);
element.focus(function(){
if(element.val() == value){
element.val('').removeClass('defaultText');
}
}).开发者_StackOverflowblur(function(){
if(element.val() == '' || element.val() == value){
element.addClass('defaultText').val(value);
}
});
return element.blur();
}
why do you do this if you dont want to replace input with thank you text?
else $('#email').val('Thank you!');
instead do
else {
$("#form").hide();
$("#thankyou").show();
}
加载中,请稍侯......
精彩评论