Affichage de la sortie php avec html

Question

Je n'arrive pas à afficher la sortie d'un script php en html pour un compte à rebours. Les temps requis sont entrés à travers.

<div id="countdown">                <!--  Display input for the kitchen timer  --> 
       <form method="post" action="display_timer()"> 
         <br> 
         <br> 
         <h1>Enter the hours required:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="hours"><br></h1> 
         <h2>Enter the Minutes required:&nbsp;&nbsp;<input type="text" name="minutes"><br></h2> 
         <h3>Enter the Seconds required:&nbsp;&nbsp;<input type="text" name="seconds"><br></p> 
         <br> 
         <br> 
        <h4><input type="submit" name="Submit" value="Submit"></h4> 
       </form> 

      </div> 

Appelé à partir d'un script php avec ajax ci-dessous

function display_timer(){ 

     var myAjax9 = new XMLHttpRequest; 
     myAjax9.open("GET", "timer.php"); 
     myAjax9.onreadystatechange = function(){ 
      if (myAjax9.readyState == 4 && myAjax7.status == 200){ 

       document.getElementById("timerdisplay").innerHTML = hours+" hours, "+minutes+" minutes, "+seconds+" seconds"; 
       IT=window.setTimeout("setcountDown()", 10); 
       if (hours == '00' && minutes == '00' && seconds == '00') { 
        seconds = "00"; 
        window.clearTimeout(IT); 
        window.alert("Time is up. Press OK to continue."); 
       } 
      } 
     } 
} 

et affiché avec

<div id="timerdisplay"> <?php echo "$hoursLeft hours, $minutesLeft minutes, $secondsLeft seconds";?></div>  <!--  Display output for the kitchen timer  --> 

je peux mettre le code php minuterie sur si nécessaire.

Je suis nouveau sur php et Ajax alors peut-être faire quelque chose de désespérément mal?

Answer 1

Si vous avez besoin d'envoyer les données de temps à PHP, vous devez résoudre ce problème:

• Action La forme de l'attribut est censé avoir l'url du formulaire qui recevra les données soumises.
• Mais: Si vous voulez envoyer le jet de données ajax alors vous pouvez changer action="display_timer()" pour onsubmit="return display_timer()", et ajouter un return false dans la dernière ligne de la fonction display_timer (cela annulerait la soumettre, vous pouvez donc utiliser ajax).

• En outre, si vos données va récupérer lancer un appel ajax alors votre timer.php doit envoyer quelque chose comme ça (une expresion JSON):

  <?php echo "{\"hours\":\"$hoursLeft\", \"minutes\":\"$minutesLeft\", \"seconds\":\"$secondsLeft\"}";?>

Ensuite, votre display_timer fonction serait:

function display_timer(){ 
    var cParams = "hours=" + escape(document.getElementsByName("hours")[0].value) + 
        "&minutes=" + escape(document.getElementsByName("minutes")[0].value) + 
        "&seconds=" + escape(document.getElementsByName("seconds")[0].value); 

    var myAjax9 = new XMLHttpRequest(); 
    myAjax9.open("GET", "timer.php" + "?" + cParams); 
    myAjax9.onreadystatechange = function(){ 
     if (myAjax9.readyState == 4 && myAjax7.status == 200){ 
      var oMyTime = JSON.parse(myAjax9.responseText); 
      oMyTime.totalSeconds = oMyTime.hours*3600+oMyTime.minutes*60+oMyTime.seconds; 
      oMyTime.toString = function(){ 
       return oMyTime.hours+" hours, "+oMyTime.minutes+" minutes, "+oMyTime.seconds+" seconds" 
      }; 

      var oDisplay = document.getElementById("timerdisplay"); 
      oDisplay.innerHTML = oMyTime.toString(); 

      var fUpdateTimer = function(){ 
       if(oMyTime.totalSeconds>0){ 
        oMyTime.totalSeconds--; 
        oMyTime.hours = Math.floor(oMyTime.totalSeconds/3600); 
        oMyTime.minutes = Math.floor((oMyTime.totalSeconds-oMyTime.hours*3600)/60); 
        oMyTime.seconds = oMyTime.totalSeconds%60; 
        oDisplay.innerHTML = oMyTime.toString(); 
       }else{ 
        window.clearInterval(IT); 
        window.alert("Time is up. Press OK to continue."); 
       } 
      }; 
      var IT=window.setInterval(fUpdateTimer, 1000); 
     } 
    } 
    return false; 
}//END display_timer()