I want to pop up a div after submit a form

Question

I want to pop up a div after submit a form

7k views Asked by AudioBubble At 22 November 2024 at 23:19

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>

Original Q&A

There are 2 answers

Vignesh Bala On 17 June 2015 at 10:35

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

Update this script function not closed correctly in your script

**AudioBubble** · Accepted Answer · 2015-06-17 11:36:32

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

TechQA.

I want to pop up a div after submit a form

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in FORMS

Related Questions in POPUPWINDOW

Popular Questions

Popular Tags

Trending Questions