I want to pop up the #popUpDiv after submit a form
Script
$(document).ready(function(){
$('#form').on('submit',function(e){
e.preventDefault();
$.post('post.php', $(this).serialize(), function(response){
$('#result').html(response);
$('#popUpDiv').fadeIn();
}
});
});
Form code below
<form id="form">
Number: <input type="text" name="number" />
<input class="show" type="submit" Value="Submit" name="submit" />
</form>
Result will be display here
<div id="popUpDiv" style="display:none">
<div id="result">
<?php
if (isset($_POST['number'])){
echo"Your Number: " .$_POST['number'];
}
?>
</div>
</div>
Full Code here: post.php
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#form').on('submit',function(e){
e.preventDefault();
$.post('post.php', $(this).serialize(), function(response){
$('#result').html(response);
$('#popUpDiv').fadeIn();
}
});
});
</script>
</head>
<body>
<form id="form" method="post">
Number: <input type="text" name="number" />
<input class="show" type="submit" Value="Submit" name="submit" />
</form>
<div id="popUpDiv" style="display:none">
<div id="result">
<?php
if (isset($_POST['number'])){
echo"Your Number: " .$_POST['number'];
}
?>
</div>
</div>
</body>
</html>