Question

一如既往，谢谢你的时间。这让我发疯了。

注意：我不希望页面刷新。

我有一个表单，然后是加载栏图像，然后是链接按钮。主页面仅以表单和提交按钮开始

我想做的是在提交表单时整个div（1）＆amp;它的内部及其内容消失，然后同时在其位置新显示div（2），带有loading.gif图像和submitted entry，然后在5秒后，此div消失，并且它的位置是另一个div（3），其中包含button链接和内部文字

div1：显示表单直到按钮点击， div2：然后加载图片5秒钟 div3：链接和文字保持可见

我的代码原样（没有任何内容隐藏起来，当没有意图时，div会显示）

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

希望这不要让人感到困惑，要说的很难......任何帮助都会令人惊讶！

Answer 1

你需要这样的东西

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

Answer 2

你可以在这上面使用Jquery。当你想在5秒后关闭一个div时，只需添加setTimeout("$('#div).dialog('close')", 5000);。

Answer 3

在jquery中你可以这样试试

$(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按钮提交然后定时器

3 个答案: