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

Question

我想在提交表单后弹出#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>

Answer 1

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

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

Answer 2

我解决了这个问题，看看我做了什么这是 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>

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

I want to pop up a div after submit a form

html

javascript

forms

jquery

popupwindow