如何使用按钮提交和计时器显示/隐藏表单和div

问题描述：

again as always, thanks for your time. this is driving me crazy.

Note: at no point do i want the page to refresh.

I have a form then a loading bar image then a linked button. the main page starts off with just a form and a submit button

What i would like to do is when the form is submitted the whole div(1)& its inside and its contents to disappears, then simultaneously a new div(2) in its place, appears with a loading.gif image and the submitted entry, then after 5 secinds this div disappears and in its place another div(3) with a button link and text inside appears

div1: shows form till button click, div2: then loading image for 5 secs div3: link and text stays visible

My code as is (nothing hides with it and divs are showin when there not meant to be)

 <html>
 <head>

 <script type="text/javascript">
 function countdown() {
 var i = document.getElementById('counter');
 if (parseInt(i.innerHTML)<=0) {
    location.href = '#';
    clearInterval(t);
    exit;
 }
  i.innerHTML = parseInt(i.innerHTML)-1;
 }
 var t = setInterval(function(){ countdown(); },1000);
 </script>
 </head>

 <body>
 <!--1. Show until submit then hide -->
 <div id="div1">
 <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
 Answer: <input type="Text" Name="info" required>
 <input type="Submit" value="Send">
 </form>
 </div>

  <!--2. Show for 5 seconds on submit then hide  -->   
 <div id="div2">
 <?php
 if (count($_POST) > 0 && isset($_POST["info"])){
 // add First and Second Numbers
 $sum = $_POST["info"];
 // their Answer is diplayed 
 echo "&nbsp; Your answer $sum". "<br />";
 echo '<img src="http://i.imgur.com/nh9eh0c.gif" border=0>'. "<br />";
 echo '&nbsp; Submiting answer in <span id="counter"> 5</span>' . "<br />";
 // after 5 secounds this hides and is replace with a button link and the text "thank you"
 } ?>
 </div>

 <!--3. Show after 5 seconds above then nothing  -->  
 <div id="div3">
 <?php  
 echo 'Back home'. "<br />";
 echo '<a href="https://www.google.co.nz/"><img src="http://www.skeletonsthemovie.com/images/home-button-large.png" border=0></a>';
 ?>
 </div>
 </body>
 </html>

Hope this isn't to confusing it was quite hard to word properly.. any help would be amazing !

答

you need something like this

         <script>
         $(document).ready(function(){

         $('#submit').click(function(event){

            event.preventDefault();
            $('#div1').css('display','none');
            $('#div2').css('display','block');
            setTimeout(function(){$('#div2').css('display','none');$('#div3').toggle()},5000);
            $.ajax({

                //submit form using ajax
            })
         }) 


         })
         </script>

答

You can use Jquery on this. Just put setTimeout("$('#div).dialog('close')", 5000); when you want to close a div after 5 seconds.

答

In jquery you can try like this

$(document).ready(function(){
    $("#div2").hide();
    $("#div3").hide();

    $("#submit-button").click(function(event){
        event.preventDefault();
        if(event.target == this){
            if($("#info").val() == ''){
                alert("Please enter information.");
                return false;
            }

            $("#div1").hide().;
            $("#div2").show().;
            $("#answer").html($("#info").val());

            $("#div2").delay(5000).fadeOut();
            $("#div3").delay(5000).fadeIn();

            $("#back").click(function(){
                 $("#div3").delay(5000).fadeOut();
                 $("#div2").hide();
                 $("#div1").show();
            });
        }
    });


});

如何使用按钮提交和计时器显示/隐藏表单和div

相关推荐