CODEWITHSUNDEEP
javascriptjqueryhtmlformspopupwindow
user3633916
user3633916

Reputation:

I want to pop up a div after submit a form

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>

Upvotes: 2

Views: 7035

Answers (2)

user3633916
user3633916

Reputation:

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

Upvotes: 1

Vignesh Bala
Vignesh Bala

Reputation: 919

<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

Upvotes: 0

Related Questions