Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Reemplazar input dinámicamente

Estas en el tema de Reemplazar input dinámicamente en el foro de Frameworks JS en Foros del Web. Saludos, He programado una pequeña calculadora para una maratón. Podéis ver lo que llevo hecho aquí: http://teyno.net/test/ Mi problema es el siguiente: Tal y como ...
  #1 (permalink)  
Antiguo 28/09/2009, 08:45
 
Fecha de Ingreso: octubre-2008
Mensajes: 93
Antigüedad: 16 años, 2 meses
Puntos: 1
Reemplazar input dinámicamente

Saludos,

He programado una pequeña calculadora para una maratón. Podéis ver lo que llevo hecho aquí: http://teyno.net/test/

Mi problema es el siguiente: Tal y como lo tengo ahora, el resultado se muestra en una página nueva, y funciona perfectamente. Pero lo que necesito es que el resultado aparezca en el input vacío.

Quiero decir... si el usuario introduce el parámetro "Ritmo", el input "Tiempo total" tendría que mostrar el resultado y si introduce el parámetro "Tiempo total" tendría que mostrar el resultado en "Ritmo". Está todo programado, y funciona perfectamente, pero necesito que se impriman los resultados dentro del campo de texto y sin recargar la página.


Supongo que será sencillo, pero todos los ejemplos que encuentro por aquí o por Google son demasiado complejos.

Muchas gracias por adelantado.
  #2 (permalink)  
Antiguo 28/09/2009, 13:09
 
Fecha de Ingreso: septiembre-2009
Mensajes: 215
Antigüedad: 15 años, 2 meses
Puntos: 1
Respuesta: Reemplazar input dinámicamente

¿En que lenguaje tienes programado lo que calcula el ritmo o el tiempo total?
  #3 (permalink)  
Antiguo 28/09/2009, 13:10
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 18 años
Puntos: 126
Respuesta: Reemplazar input dinámicamente

Hola

Veamos, prueba con esto

Código javascript:
Ver original
  1. <script type="text/javascript">
  2.  var ns4 = (document.layers)? true:false
  3. var ie4 = (document.all)? true:false
  4. var ns6 = (document.getElementById)? true:false
  5.  
  6. function captura_objeto(idnombre) {
  7.     if (ns6)
  8.     {
  9.     return document.getElementById(idnombre);
  10.     }
  11.     else if (ie4)
  12.     {
  13.     return document.all[idnombre];
  14.     }
  15.     else if (ns4)
  16.     {
  17.     return document.layers[idnombre];
  18.     }
  19.     else
  20.     {
  21.     return null;
  22.     }
  23. }
  24.  
  25.  
  26. function creaAjax(){
  27.     var ajaxs = ["Msxml2.XMLHTTP","Msxml2.XMLHTTP.4.0","Msxml2.XMLH TTP.5.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"];
  28.     var ajax = false;
  29.     for(var i=0 ; !ajax && i<ajaxs.length ; i++){
  30.         try{
  31.             ajax = new ActiveXObject(ajaxs[i]);   // Internet Explorer
  32.         }
  33.         catch(e) {
  34.             ajax = false;
  35.         }
  36.     }
  37.     if(!ajax && typeof XMLHttpRequest!='undefined') {
  38.         ajax = new XMLHttpRequest();  // Firefox, Opera 8.0+, Safari
  39.     }
  40.     return ajax;
  41. }
  42.  
  43.  
  44. function MuestraDatos() {
  45. var url = "2.php"
  46. var ajax=creaAjax();
  47. var ditancia = captura_objeto("num1").options[captura_objeto("num1").selectedIndex].value);
  48. var ritmo = captura_objeto("num2").value;
  49. var tiempo = captura_objeto("num3").value;
  50. var objetosel1 = captura_objeto("num2");
  51. var objetosel2 = captura_objeto("num3");
  52. ajax.open('POST',url,true);
  53. ajax.onreadystatechange = function() {
  54.  
  55.         if (ajax==null){
  56.         alert ("Tu navegador web no soporta AJAX!");
  57.         return;
  58.     }
  59.  
  60.         if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3) {
  61.                                         objetosel1.value= "";
  62.             }
  63.  
  64.                 else if (ajax.readyState==4){
  65.                     if(ajax.status==200){          
  66.             var valores = unescape(ajax.responseText); 
  67.             objetosel1.value = valores.split(",")[0]; // Ritmo
  68.             objetosel2.value = valores.split(",")[1]; // Tiempo
  69.  
  70.                    }
  71.                     else if (ajax.status==404)
  72.                                              {
  73.  
  74.                                     objetosel1.value = "La dirección no existe";
  75.                                              }
  76.                                      else
  77.                                              {
  78.                                     objetosel1.value = "Se ha producido un error";
  79.                                              }
  80.                                     }
  81.                   }
  82.    
  83.     ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  84.             ajax.setRequestHeader('Content-Length', ritmo.length); 
  85.     ajax.send("distancia="+distancia+"&ritmo=+ritmo+"&tiempo="+tiempo);
  86.             return
  87. }
  88. </script>

Has de hacer varios cambios
+ En vez de usar un submit usas un botón. Y con onclick llamas a la función MuestraDatos()
+ A los campos del form añadeles ids
+ Cambia si es necesario los nombres de las variables para adaptarlas a lo que ya tienes
+ En la respuesta tendrá que haber dos datos separados por comas; por ejemplo quiere saber el tiempo que tardará, así que manda 3:45, pues en la respuesta ha de ser 3:45,1:40:30

Alguna duda, pregunta

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #4 (permalink)  
Antiguo 29/09/2009, 07:55
 
Fecha de Ingreso: octubre-2008
Mensajes: 93
Antigüedad: 16 años, 2 meses
Puntos: 1
Respuesta: Reemplazar input dinámicamente

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

¿Nadie puede echarme una manita?
  #7 (permalink)  
Antiguo 30/09/2009, 14:39
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 18 años
Puntos: 126
Respuesta: Reemplazar input dinámicamente

Hola

Perdona pero de PHP no se nada, lo único que puedo decirte es que la respuesta ha de ser tanto el tiempo como el ritmo, como ya te comenté anteriormente. Ej: 3:45,1:40:30
Ahora con el split

objetosel1.value = valores.split(",")[0]; // Ritmo
objetosel2.value = valores.split(",")[1]; // Tiempo


insertas cada valor en su campo.

Lo que creo que estás haciendo mal es que en la respuesta solo se envía o el tiempo o el ritmo, cuando ambos deben de ser enviados

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:11.