0

いつもありがとうございます。これは私を夢中にさせています。

注: ページを更新する必要はありません。

フォーム、読み込みバーの画像、リンクされたボタンがあります。メインページはフォームと送信ボタンだけで始まります

私がしたいのは、フォームが全体div(1) とその内部とその内容が消えると送信され、同時に新しいdiv(2) がその場所に表示され、loading.gif画像とが表示され、 submitted entry5 秒後にこの 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では、このように試すことができます

$(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 に答える
0

これでJqueryを使用できます。setTimeout("$('#div).dialog('close')", 5000);5秒後にdivを閉じたいときに置くだけです。

于 2013-03-28T06:11:34.530 に答える