Javascript 我想在提交表单后弹出一个div_Javascript_Jquery_Html_Forms_Popupwindow

Javascript 我想在提交表单后弹出一个div

javascript jquery html forms

Javascript 我想在提交表单后弹出一个div,javascript,jquery,html,forms,popupwindow,Javascript,Jquery,Html,Forms,Popupwindow,我想在提交表单后弹出#popUpDiv 脚本 $(document).ready(function(){ $('#form').on('submit',function(e){ e.preventDefault(); $.post('post.php', $(this).serialize(), function(response){ $('#result').html(response); $('#popU

我想在提交表单后弹出#popUpDiv

脚本

$(document).ready(function(){
    $('#form').on('submit',function(e){
        e.preventDefault();
        $.post('post.php', $(this).serialize(), function(response){
            $('#result').html(response);
            $('#popUpDiv').fadeIn();
        }
    });
});

下面的表格代码

<form id="form">
    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>

这里的完整代码：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>


$（文档）.ready（函数（）{
$（'#form'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
$.post（'post.php'，$（this）.serialize（），函数（响应）{
$（'#result'）.html（响应）；
$（'popUpDiv'）.fadeIn（）；
}
});
});
编号：


$（文档）.ready（函数（）{
$（'#form'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
$.post（'post.php'，$（this）.serialize（），函数（响应）{
$（'#result'）.html（响应）；
$（'popUpDiv'）.fadeIn（）；
});
});
});

更新脚本中未正确关闭的此脚本函数

我解决了此问题，请参见我所做的示例这是

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>

弹出窗口不起作用。但窗体下面显示的结果您是否尝试将结果绑定到popupdiv中。@sumitchoudhary您能给我举个例子吗？

<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>

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