0

再次一如既往，感谢您的宝贵时间。这真让我抓狂。

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

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

我想要做的是当表单提交整个div（1）&它的内部和它的内容消失，然后同时一个新的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>

希望这不会让人感到困惑，正确地用词很难..任何帮助都会很棒！

4

3 回答 3

2

你需要这样的东西

         <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>
于 2013-03-28T06:20:00.707 回答
0

您可以在此使用 Jquery。只需setTimeout("$('#div).dialog('close')", 5000);在您想在 5 秒后关闭 div 时放置。

于 2013-03-28T06:11:34.530 回答
0

在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();
            });
        }
    });


});
于 2013-03-28T06:35:18.857 回答