Tema: Reemplazar input dinámicamente
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 29/09/2009, 08:42
hinfra
 
Fecha de Ingreso: octubre-2008
Mensajes: 93
Antigüedad: 16 años, 2 meses
Puntos: 1
Respuesta: Reemplazar input dinámicamente
Adler, gracias por el código.

Ahora lo tengo así:

index.php:

Código html: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Calculadora Marató</title>
  6. <link href="./css/style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10.  
  11.  
  12. <script type="text/javascript">
  13. var ns4 = (document.layers)? true:false
  14. var ie4 = (document.all)? true:false
  15. var ns6 = (document.getElementById)? true:false
  16.  
  17. function captura_objeto(idnombre) {
  18.     if (ns6)
  19.     {
  20.     return document.getElementById(idnombre);
  21.     }
  22.     else if (ie4)
  23.     {
  24.     return document.all[idnombre];
  25.     }
  26.     else if (ns4)
  27.     {
  28.     return document.layers[idnombre];
  29.     }
  30.     else
  31.     {
  32.     return null;
  33.     }
  34. }
  35.  
  36.  
  37. function creaAjax(){
  38.     var ajaxs = ["Msxml2.XMLHTTP","Msxml2.XMLHTTP.4.0","Msxml2.XMLH TTP.5.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"];
  39.     var ajax = false;
  40.     for(var i=0 ; !ajax && i<ajaxs.length ; i++){
  41.         try{ 
  42.             ajax = new ActiveXObject(ajaxs[i]);   // Internet Explorer
  43.         }
  44.         catch(e) { 
  45.             ajax = false; 
  46.         }
  47.     }
  48.     if(!ajax && typeof XMLHttpRequest!='undefined') {
  49.         ajax = new XMLHttpRequest();  // Firefox, Opera 8.0+, Safari
  50.     }
  51.     return ajax;
  52. }
  53.  
  54.  
  55. function MuestraDatos() {
  56. var url = "2.php"
  57. var ajax = creaAjax();
  58. var ditancia = captura_objeto("num1").options[captura_objeto("num1").selectedIndex].value);
  59. var ritmo = captura_objeto("num2").value;
  60. var tiempo = captura_objeto("num3").value;
  61. var objetosel1 = captura_objeto("num2");
  62. var objetosel2 = captura_objeto("num3");
  63. ajax.open('POST',url,true);
  64. ajax.onreadystatechange = function() {
  65.  
  66.         if (ajax==null){
  67.         alert ("Tu navegador web no soporta AJAX!");
  68.         return;
  69.     }
  70.  
  71.         if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3) {
  72.                                         objetosel1.value= "";
  73.             }
  74.  
  75.                 else if (ajax.readyState==4){
  76.                     if(ajax.status==200){          
  77.             var valores = unescape(ajax.responseText);  
  78.             objetosel1.value = valores.split(",")[0]; // Ritmo
  79.             objetosel2.value = valores.split(",")[1]; // Tiempo
  80.  
  81.                    }
  82.                     else if (ajax.status==404)
  83.                                              {
  84.  
  85.                                     objetosel1.value = "La dirección no existe";
  86.                                              }
  87.                                      else
  88.                                              {
  89.                                     objetosel1.value = "Se ha producido un error";
  90.                                              }
  91.                                     }
  92.                   }
  93.     
  94.     ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  95.             ajax.setRequestHeader('Content-Length', ritmo.length);  
  96.     ajax.send("distancia="+distancia+"&ritmo=+ritmo+"&tiempo="+tiempo);
  97.             return
  98. }
  99. </script>
  100.  
  101.  
  102.  
  103. <div id="wrapper">
  104.  
  105. <div align="center">
  106.  
  107. <h1>Calculadora Marató</h1>
  108.  
  109. <div id="form">
  110.  
  111. <form method="get" action="2.php">
  112.  
  113. <div id="titulo">   
  114. DATOS BÁSICOS
  115. </div>
  116.     
  117. Distancia total:
  118. <select id="num1" name="num1">
  119. <option value="42195">42195</option>
  120. <option value="21097">21097</option>
  121. <option value="10000">10000</option>
  122. <option value="5000">5000</option>
  123. </select>
  124.             
  125. Ritmo: (mm:ss)
  126. <input type="text" id= "num2" name="num2"/>
  127.  
  128. Tiempo total: (hh:mm:ss)
  129. <input type="text" id="num3" name="num3"/>
  130.  
  131. <input type="button" name="submit" value="Calcular" onClick="MuestraDatos();" />
  132.  
  133. </div>
  134.  
  135. </div>
  136. </div>
  137.  
  138.  
  139. </form>
  140. </body>
  141. </html>


2.php

Código php: 
Ver original
  1. <?php
  2. # Obrim etiquetes HTML
  3. echo '<html>';
  4. echo '<head>';
  5. echo '<title>Calculadora Marató - Resultado</title>'; // Títol de la pàgina
  6. echo '<link href="./css/style.css" rel="stylesheet" type="text/css" />'; // Importem la fulla d'estil CSS
  7. echo '</head>';
  8. echo '<body>';
  9.  
  10. # Creem les variables i els hi donem un valor
  11. $num1 = $_GET["num1"]; // num1 - Distancia total
  12. $num2 = $_GET["num2"]; // num2 - Ritmo
  13. $num3 = $_GET["num3"]; // num3 - Tiempo total
  14.  
  15. //COMPROVACIONS
  16. if($num2=="" and $num3=="")  //Si els dos camps estàn buits donarà error
  17.     {
  18.         echo "<script type=\"text/javascript\">alert(\"Ha de rellenar un campo\");</script>"; 
  19.         include("index.php");
  20.         //echo 'Ha de rellenar un campo';
  21.     }
  22.     
  23. else if ($num2!="" and $num3!="") //Si els dos camps estàn plens donarà error
  24.     {
  25.         echo 'No puede rellenar los dos campos a la vez';
  26.     }
  27.     
  28. else if ($num2!="" and $num3=="")
  29.     {
  30.         $separar[1] = explode(':',$num2); //con la función explode(); separo los minutos de los segundos mediante el carácter ':'
  31.  
  32.         $minutos_mm_en_segundos = ($separar[1][0]*60); //multiplico los minutos por 60 para convertirlos en segundos
  33.     
  34.         $segundos_ss = ($separar[1][1]); //obtinc les segons
  35.     
  36.         $total_segundos = $minutos_mm_en_segundos + $segundos_ss; //sumo tots els segons per obtenir els segons totals
  37.             
  38.         $km = $num1/1000; //paso els metres a Km.
  39.     
  40.         $marca_segundos = $km * $total_segundos; //total de la marca en segons
  41.     
  42.         $marca_minutos = floor($marca_segundos/60); //la funció floor(); arrodoneix SEMPRE cap a l'enter més baix, així que obtinc la marca en minuts. Encare em falten els segons, que sobren de la divisió al tractar-se d'una divisió amb resultat decimal. Els decimals no m'interessen, faré el modul de la divisió per obtenir els segons sobrants.
  43.     
  44.         $marca_horas = floor($marca_minutos/60); //passo els minuts a hores
  45.     
  46.         $minutos_restantes = $marca_minutos%60;//faig el módul per obtenir els minuts restants de les hores
  47.  
  48.         //CORRECCIÓ D'ERRORS- Si el temps te els segons a 0,5 o 8 es mostra 15:0, 15:5, 15:8, aquest IF fa que, en canvi, es mostri 15:00, 15:05, 15:08
  49.         if($minutos_restantes==0 || $minutos_restantes==1 || $minutos_restantes==2 || $minutos_restantes==3 || $minutos_restantes==4 || $minutos_restantes==5 || $minutos_restantes==6 || $minutos_restantes==7 || $minutos_restantes==8 || $minutos_restantes==9)
  50.             {
  51.                 $caracter_de_correcion_minutos='0';
  52.             }
  53.         else{$caracter_de_correcion_minutos='';}
  54.     
  55.         $segundos_restantes = $marca_segundos%60; //faig el módul per obtenir els segons sobrants dels minuts.
  56.         
  57.         if($segundos_restantes==0 || $segundos_restantes==1 || $segundos_restantes==2 || $segundos_restantes==3 || $segundos_restantes==4 || $segundos_restantes==5 || $segundos_restantes==6 || $segundos_restantes==7 || $segundos_restantes==8 || $segundos_restantes==9)
  58.             {
  59.                 $caracter_de_correcion_segundos='0';
  60.             }
  61.         else{
  62.             $caracter_de_correcion_segundos='';
  63.             }
  64.         echo '<br />TOTAL MARCA: ', $marca_horas,':', $caracter_de_correcion_minutos, $minutos_restantes,':',$caracter_de_correcion_segundos,$segundos_restantes;
  65.     }
  66.     
  67. else
  68.     {
  69.         $separar[1]=explode(':',$num3);
  70.  
  71.         $total_minutos[1] = ($separar[1][0]*60)+$separar[1][1]; //paso les hores a minuts i faig la suma total de minuts
  72.         
  73.         $segundos[1] = $separar[1][2]; //guardo els segons en una variable
  74.  
  75.         $total_segundos = ($total_minutos[1] * 60)+$segundos[1]; //paso els minuts totals a segons i li sumo els segons introduits per l'usuari
  76.  
  77.         $velocitat_m_s = $total_segundos/$num1; //quants segons tardo en fer un metre
  78.         
  79.         $temps_kilometre = $velocitat_m_s*1000; //quants segons tardo en fer un KM
  80.         
  81.         $ritmo_minutos = floor($temps_kilometre/60); //la funció floor(); arrodoneix SEMPRE cap a l'enter més baix, així que obtinc la marca en minuts. Encare em falten els segons, que sobren de la divisió al tractar-se d'una divisió amb resultat decimal. Els decimals no m'interessen, faré el modul de la divisió per obtenir els segons sobrants.
  82.         
  83.         $ritmo_horas = floor($ritmo_minutos/60); //passo els minuts a hores
  84.         
  85.         $minutos_restantes = $ritmo_minutos%60;//faig el módul per obtenir els minuts restants de les hores
  86.         
  87.         //CORRECCIÓ D'ERRORS- Si el temps te els segons a 0,5 o 8 es mostra 15:0, 15:5, 15:8, aquest IF fa que, en canvi, es mostri 15:00, 15:05, 15:08
  88.         if($minutos_restantes==0 || $minutos_restantes==1 || $minutos_restantes==2 || $minutos_restantes==3 || $minutos_restantes==4 || $minutos_restantes==5 || $minutos_restantes==6 || $minutos_restantes==7 || $minutos_restantes==8 || $minutos_restantes==9)
  89.             {
  90.                 $caracter_de_correcion_minutos='0';
  91.             }
  92.         else{$caracter_de_correcion_minutos='';}
  93.                                 
  94.         $segundos_restantes = $temps_kilometre%60; //faig el módul per obtenir els segons sobrants dels minuts.
  95.                 
  96.         if($segundos_restantes==0 || $segundos_restantes==1 || $segundos_restantes==2 || $segundos_restantes==3 || $segundos_restantes==4 || $segundos_restantes==5 || $segundos_restantes==6 || $segundos_restantes==7 || $segundos_restantes==8 || $segundos_restantes==9)
  97.             {
  98.                 $caracter_de_correcion_segundos='0';
  99.             }
  100.         else{$caracter_de_correcion_segundos='';}
  101.  
  102.             echo '<br />RITMO: ', $ritmo_horas,':', $caracter_de_correcion_minutos, $minutos_restantes,':',$caracter_de_correcion_segundos,$segundos_restantes;
  103.     }
  104.  
  105.     
  106. echo '</body>'; //Tanquem les etiquetes HTML i el PHP.
  107. echo '</html>';
  108. ?>

¿Qué hago mal? Seguí los pasos que me distes lo mejor que supe.

Gracias.