我想在提交表单后弹出一个div [英] I want to pop up a div after submit a form
本文介绍了我想在提交表单后弹出一个div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在提交表单后弹出#popUpDiv
脚本
（'submit'，function（e）{
（$'$'）$（$'$'$'$' e.preventDefault（）;
$ .post（'post.php'，$（this）.serialize（），function（response）{
$（'＃result'）。html（response） ;
$（'＃popUpDiv'）。fadeIn（）;
}
}）;
}）;
以下表单代码
< ; form id =form>
Number：< input type =textname =number/>
< input class =showtype =submit Submitname =submit/>
< / form>
结果将显示在此处
< div id =popUpDivstyle =display：none >
< div id =result>
<？php
if（isset（$ _ POST ['number']））{
echo ： 。$ _ POST ['number'];
}
？>
< / div>
< / div>
完整代码在这里：post.php
< html>
< head>
< script src =http://code.jquery.com/jquery-1.9.1.js>< / script>
< script type =text / javascript> $（$）$（$）$（$）$（$）$（$）$（$'$'$'$'$'$' $ b $ .post（'post.php'，$（this）.serialize（），function（response）{
$（'＃result'）。html（response）;
$（' #popUpDiv'）.fadeIn（）;
}
}）;
}）;
< / script>
< ; / head>
< body>
< form id =formmethod =post>
数字：< input type =textname =number/>
< input class =showtype =submitValue =Submitname =submit/>
< / form>
< div id =popUpDivstyle =display：none>
< div id =result>
<？php
if（isset （$ _POST ['number']））{
echoYour Number：。$ _ POST ['number'];
}
？>
< / div>
< / body>
< / html>
解决方案
我解决了这个问题，看看我做了什么
这是 post.php
< html>
< head>
< script src =http://code.jquery.com/jquery-1.9.1.js>< / script>
< script src =http://code.jquery.com/ui/1.11.4/jquery-ui.js>< / script>
< script type =text / javascript> $（$）$（$）$（$）$（$）$（$）$（$'$'$'$'$'$' $ b $ .post（'result.php'，$（this）.serialize（），function（response）{
$（'＃result'）。html（response）;
}）;
}）;
}）;
< / script>
< style type =text / css>
.no-close .ui-dialog-titlebar-close {
display：none;
}
#popUpDiv {
width：auto;
min-height：104px;
最大高度：无;
height：auto;
背景：＃026800无重复滚动0％0％;
border-radius：19px;
text-align：center;
color：rgb（255,255,255）;
font-size：28px;
margin-top：6px;
float：left;
padding：20px;
}
}
< / style>
< / head>
< body>
< form id =form>
号码：< input type =numbername =number/>
< input class =showtype =submitValue =Submitname =submit/>
< / form>
< div id =result>< / div>
< / body>
< / html>
这是 result.php
< script>
$（#popUpDiv）.dialog（{
dialogClass：no-close，
buttons：[
{
text：X，
click：function（）{
$（this）.dialog（close）;
}
}
]
}）;
< / script>
<？php
if（isset（$ _ POST ['number']））{
echo'< div id =popUpDiv> Your Number：'。$ _ POST [ '编号'] < / DIV> 中。
}
？>
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>
解决方案
I solve the issue see the example what I have done
This is the post.php
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#form').on('submit',function(e){
e.preventDefault();
$.post('result.php', $(this).serialize(), function(response){
$('#result').html(response);
});
});
});
</script>
<style type="text/css">
.no-close .ui-dialog-titlebar-close {
display: none;
}
#popUpDiv{
width: auto;
min-height: 104px;
max-height: none;
height: auto;
background: #026800 none repeat scroll 0% 0%;
border-radius: 19px;
text-align: center;
color: rgb(255, 255, 255);
font-size: 28px;
margin-top: 6px;
float: left;
padding: 20px;
}
}
</style>
</head>
<body>
<form id="form">
Number: <input type="number" name="number" />
<input class="show" type="submit" Value="Submit" name="submit" />
</form>
<div id="result"></div>
</body>
</html>
This is the result.php
<script>
$( "#popUpDiv" ).dialog({
dialogClass: "no-close",
buttons: [
{
text: "X",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
</script>
<?php
if (isset($_POST['number'])){
echo'<div id="popUpDiv">Your Number: ' .$_POST['number']."</div>";
}
?>
这篇关于我想在提交表单后弹出一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
