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

Problema con bucles

 Estas en el tema de Problema con bucles en el foro de Frameworks JS en Foros del Web. Buenas, no si si deberia de ponerlo exactamente en el subforo de AJAX, si no es asi, ruego que me lo muevan de lugar. Mi ...
  #1 (permalink)  
Antiguo 18/05/2010, 12:08
Avatar de Lobito14  
Fecha de Ingreso: abril-2010
Mensajes: 222
Antigüedad: 14 años, 7 meses
Puntos: 17
Problema con bucles
Buenas, no si si deberia de ponerlo exactamente en el subforo de AJAX, si no es asi, ruego que me lo muevan de lugar.

Mi problema es el siguiente, tengo dos formularios, y un amigo me paso un ejemplo de AJAX, con el cual podia dejarlo en solo uno, y para mi cometido, me viene mucho mejor, la web con el ejemplo, explicacion, etc, es la siguiente:

http://thecodemine.org/

BIen, pues yo implemento bien ese codigo en mi formulario, pero como es normal, no con esos campos ni esos datos, os explico brevemente lo que seria el mio:

El primero formulario seria un formulario para introducir el nombre de un "Disco", su año, y algunos datos mas, y el ultimo campo seria el numero de canciones de ese disco.

El segundo formulario seria un formulario para introducir canciones, con el nombre de la cancion y su duracion.

Hasta ahi bien, pero mi problema llega en que quiero implementar en el codigo una forma para lo siguiente: al introducir el numero de canciones del disco en el primer formulario, que el segundo formulario cambie y muestre tantos campos como canciones tenga el disco, no se si me explico...

No tengo idea de como hacerlo, he intentado con JavaScript, con un bucle, pasando el numero que se introduce en el nº de canciones del formulario "Disco", pero o no lo hago bien, o no me sale, o no se puede...

Asi que ahi estoy parado, en como hacer que muestre tantos campos como numeros de canciones se hayan introducido en el campo "nº de canciones" del formulario anterior, en php creo que sabria hacerlo, pero tendria que ir el formulario al servidor se supone, para saber el nº de canciones y tal no??

Espero haberme explicado bien, y que puedan ayudarme, un saludo y gracias!
  #2 (permalink)  
Antiguo 19/05/2010, 09:45
Avatar de webness  
Fecha de Ingreso: enero-2009
Ubicación: BOGOTA
Mensajes: 312
Antigüedad: 15 años, 10 meses
Puntos: 5
Respuesta: Problema con bucles
sencillo, usando ajax, envia una peticion al servidor para que crees dinamicamente la parte del segundo formulario, eso mismo lo puedes hacer con javascript, es un poco mas complejo pero no tendrias necesidad de ir hasta el servidor.

envia el codigo que tienes
  #3 (permalink)  
Antiguo 19/05/2010, 10:57
Avatar de Lobito14  
Fecha de Ingreso: abril-2010
Mensajes: 222
Antigüedad: 14 años, 7 meses
Puntos: 17
Respuesta: Problema con bucles
Muchas gracias por tu respuesta webness, no creo que yo sepa hacerlo con AJAX... de todas formas si alguien me puede ayudar lo agradeceria, por aqui dejo el codigo:

Código HTML: 
Ver original
  1. <body>
  2.         <div id="demoWrapper">
  3.           <form id="demoForm" method="post" action="json.html">
  4.                 <div id="fieldWrapper">
  5.                 
  6.                 
  7.                     <span class="step" id="first">
  8.                         <span class="font_normal_07em_black">Insertar discos</span><br />
  9.                         <label for="nombreDisco">Nombre</label><br />
  10.                         <input class="input_field_12em" name="nombreDisco" id="nonmbreDisco"><br />
  11.                         <label for="discografica">Discografica</label><br />
  12.                         <input class="input_field_12em" name="discografica" id="discografica"><br />
  13.                         <label for="genero">Genero</label><br />
  14.                         <input class="input_field_12em" name="genero" id="genero"><br />
  15.                         <label for="anioSalida">Año de salida (aaaa-mm-dd)</label><br />
  16.                         <input class="input_field_12em" name="anioSalida" id="anioSalida"><br />
  17.                         <label for="imagenPortada">Imagen portada</label><br />
  18.                         <input class="input_field_12em" name="file" id="file" type='file'><br />
  19.                         <label for="num_canciones">Numero de canciones</label><br />
  20.                         <input class="input_field_12em" name="numCanciones" id="numCanciones" onChange="canciones();"><br />
  21.                     </span>
  22.                     
  23.                     
  24.                     <span id="confirmation" class="step">
  25.                     <script language="javascript" type="text/javascript">                   
  26.                     
  27.                     function canciones(){
  28.                     
  29.                         var numCanciones = document.demoForm.numCanciones.value;
  30.                                         
  31.                         for (i=0; i<= numCanciones; i++){
  32.                     
  33.                             document.write('
  34.                             <label for="titulo">Titulo</label><br />
  35.                             <input name="tituloCancion" class="input_field_25em" id="tituloCanciones" size="20">
  36.                             <br />
  37.                             <label for="duracion">Duracion</label><br />
  38.                             <input class="input_field_35em" name="duracion" id="duracion"><br />    
  39.                             ');
  40.                         
  41.                     
  42.                         }
  43.                     
  44.                     }
  45.                     
  46.                     </script>
  47.                                         </span>
  48.                                  </div>
  49.                 
  50.                 
  51.                 <div id="demoNavigation">                           
  52.                     <input class="navigation_button" value="Back" type="reset">
  53.                     <input class="navigation_button" value="Next" type="submit" onCLick="canciones();">
  54.                 </div>
  55.                 
  56.                 
  57.             </form>
  58.             <hr />
  59.             
  60.             <p id="data"></p>
  61.         </div>
  62.     <script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>     
  63.     <script type="text/javascript" src="./js/jquery.history.js"></script>
  64.     <script type="text/javascript" src="./js/jquery.form.js"></script>
  65.     <script type="text/javascript" src="./js/jquery.validate.js"></script>
  66.     <script type="text/javascript" src="./js/jquery.form.wizard-2.0.1-min.js"></script>
  67.     <script type="text/javascript">
  68.         $(function(){
  69.                 $("#demoForm").formwizard({ //wizard settings 
  70.                     formPluginEnabled: true, //Ajax is used to post the form to the server
  71.                     validationEnabled : true, //The Validation plugin is used for validating the form at each step
  72.                     focusFirstInput : true // puts focus at the first input on each step
  73.                  },
  74.                  {
  75.                     //validation settings
  76.                     messages: { email: "Invalid email (custom message)"} // custom message shown when the email is invalid
  77.                  },
  78.                  {
  79.                     // form plugin settings
  80.                     success: function(data){ // called when the form has been submitted correctly to the server
  81.                         $("#status").fadeTo(500,1,function(){ $(this).html("You are now registered!").fadeTo(5000, 0); })
  82.                     },
  83.                     beforeSubmit:  function(data){ // called just before the form is submitted
  84.                         $("#data").html("Data sent to the server : <br />" + $.param(data));
  85.                     },
  86.                     dataType: 'json',
  87.                     resetForm: true
  88.                  }
  89.                 );
  90.             });
  91.     </script>
  92.     </body>
  #4 (permalink)  
Antiguo 21/05/2010, 09:14
Avatar de Lobito14  
Fecha de Ingreso: abril-2010
Mensajes: 222
Antigüedad: 14 años, 7 meses
Puntos: 17
Respuesta: Problema con bucles
Alguien mas por ahi que se le ocurra que puedo hacer?!
  #5 (permalink)  
Antiguo 21/05/2010, 09:30
Avatar de quike88  
Fecha de Ingreso: agosto-2008
Mensajes: 471
Antigüedad: 16 años, 3 meses
Puntos: 87
Respuesta: Problema con bucles
mmm... podrias poner un div donde quieres que vayan los campos para las canciones, y en tu for utilizas innerhtml

function canciones(){
var numCanciones = document.demoForm.numCanciones.value;
var div=document.getElementById("id_div");
for (i=0; i<= numCanciones; i++){
div.innerHTML=div.innerHTML+'<label for="titulo">Titulo</label><br />
<input name="tituloCancion" class="input_field_25em" id="tituloCanciones" size="20">
<br />
<label for="duracion">Duracion</label><br />
<input class="input_field_35em" name="duracion" id="duracion"><br />'
}

}
  #6 (permalink)  
Antiguo 21/05/2010, 14:32
Avatar de Lobito14  
Fecha de Ingreso: abril-2010
Mensajes: 222
Antigüedad: 14 años, 7 meses
Puntos: 17
Respuesta: Problema con bucles
Gracias por tu respuesta, lo he estado intentando como me has sugerido, pero, o estoy haciendo algo mal, o no se..., mira, te pongo como quedaria el codigo que supuestamente deberia de funcionar:

Código HTML: 
Ver original
  1. <body>
  2.         <div id="demoWrapper">
  3.           <form id="demoForm" method="post" action="json.html">
  4.                 <div id="fieldWrapper">
  5.                 
  6.                 
  7.                     <span class="step" id="first">
  8.                         <span class="font_normal_07em_black">Insertar discos</span><br />
  9.                         <label for="nombreDisco">Nombre</label><br />
  10.                         <input class="input_field_12em" name="nombreDisco" id="nonmbreDisco"><br />
  11.                         <label for="discografica">Discografica</label><br />
  12.                         <input class="input_field_12em" name="discografica" id="discografica"><br />
  13.                         <label for="genero">Genero</label><br />
  14.                         <input class="input_field_12em" name="genero" id="genero"><br />
  15.                         <label for="anioSalida">Año de salida (aaaa-mm-dd)</label><br />
  16.                         <input class="input_field_12em" name="anioSalida" id="anioSalida"><br />
  17.                         <label for="imagenPortada">Imagen portada</label><br />
  18.                         <input class="input_field_12em" name="file" id="file" type='file'><br />
  19.                         <label for="num_canciones">Numero de canciones</label><br />
  20.                         <input class="input_field_12em" name="numCanciones" id="numCanciones" onChange="canciones();"><br />
  21.                     </span>
  22.                     
  23.                     
  24.                     <span id="confirmation" class="step">
  25.                     <div id="canciones">
  26.                     
  27.                     
  28.                     </div>
  29.                     </span>
  30.                                  </div>
  31.                 
  32.                 
  33.                 <div id="demoNavigation">                           
  34.                     <input class="navigation_button" value="Back" type="reset">
  35.                     <input class="navigation_button" value="Next" type="submit" >
  36.                 </div>
  37.                 
  38.                 
  39.             </form>
  40.             <hr />
  41.             
  42.             <p id="data"></p>
  43.         </div>
  44.     <script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>     
  45.     <script type="text/javascript" src="./js/jquery.history.js"></script>
  46.     <script type="text/javascript" src="./js/jquery.form.js"></script>
  47.     <script type="text/javascript" src="./js/jquery.validate.js"></script>
  48.     <script type="text/javascript" src="./js/jquery.form.wizard-2.0.1-min.js"></script>
  49.     <script type="text/javascript">
  50.         $(function(){
  51.                 $("#demoForm").formwizard({ //wizard settings 
  52.                     formPluginEnabled: true, //Ajax is used to post the form to the server
  53.                     validationEnabled : true, //The Validation plugin is used for validating the form at each step
  54.                     focusFirstInput : true // puts focus at the first input on each step
  55.                  },
  56.                  {
  57.                     //validation settings
  58.                     messages: { email: "Invalid email (custom message)"} // custom message shown when the email is invalid
  59.                  },
  60.                  {
  61.                     // form plugin settings
  62.                     success: function(data){ // called when the form has been submitted correctly to the server
  63.                         $("#status").fadeTo(500,1,function(){ $(this).html("You are now registered!").fadeTo(5000, 0); })
  64.                     },
  65.                     beforeSubmit:  function(data){ // called just before the form is submitted
  66.                         $("#data").html("Data sent to the server : <br />" + $.param(data));
  67.                     },
  68.                     dataType: 'json',
  69.                     resetForm: true
  70.                  }
  71.                 );
  72.             });
  73.     </script>
  74.      <script language="javascript" type="text/javascript">                   
  75.                     
  76.                     function canciones(){
  77.                     var numCanciones = document.demoForm.numCanciones.value;
  78.                     var div=document.getElementById("canciones");
  79.                     for (i=0; i<= numCanciones; i++){
  80.                         div.innerHTML=div.innerHTML+'<label for="titulo">Titulo</label><br />
  81.                         <input name="tituloCancion" class="input_field_25em" id="tituloCanciones" size="20">
  82.                         <br />
  83.                         <label for="duracion">Duracion</label><br />
  84.                         <input class="input_field_35em" name="duracion" id="duracion"><br />'
  85.                     }
  86.  
  87.                     }
  88.                     
  89.       </script>
  90. </body>
  #7 (permalink)  
Antiguo 23/05/2010, 09:44
Avatar de Lobito14  
Fecha de Ingreso: abril-2010
Mensajes: 222
Antigüedad: 14 años, 7 meses
Puntos: 17
Respuesta: Problema con bucles
Nadie que sepa en que puedo estar fallando o como solucionarlo?!?!
  #8 (permalink)  
Antiguo 24/05/2010, 07:08
Avatar de quike88  
Fecha de Ingreso: agosto-2008
Mensajes: 471
Antigüedad: 16 años, 3 meses
Puntos: 87
Respuesta: Problema con bucles
el problema ahí, es que en javascript un salto de linea lo toma como fin de la sentencia. osea que en el innerHTML la sentencia se terminaria aqui:

div.innerHTML=div.innerHTML+'<label for="titulo">Titulo</label><br />

proba poniendo todo en una misma linea

Código: 
div.innerHTML=div.innerHTML+'<label for="titulo">Titulo</label><br /><input name="tituloCancion" class="input_field_25em" id="tituloCanciones" size="20"><br /><label for="duracion">Duracion</label><br /><input class="input_field_35em" name="duracion" id="duracion"><br />'
  #9 (permalink)  
Antiguo 24/05/2010, 08:05
Avatar de Lobito14  
Fecha de Ingreso: abril-2010
Mensajes: 222
Antigüedad: 14 años, 7 meses
Puntos: 17
Respuesta: Problema con bucles
Gracias por tu respuesta, lo he cambiado... pero nada, no funciona... dios...
  #10 (permalink)  
Antiguo 25/05/2010, 15:40
Avatar de Lobito14  
Fecha de Ingreso: abril-2010
Mensajes: 222
Antigüedad: 14 años, 7 meses
Puntos: 17
Respuesta: Problema con bucles
Nadie mas por ahi que sepa que hacer?? thank!
  #11 (permalink)  
Antiguo 29/05/2010, 05:54
Avatar de Lobito14  
Fecha de Ingreso: abril-2010
Mensajes: 222
Antigüedad: 14 años, 7 meses
Puntos: 17
Respuesta: Problema con bucles
Nadie que pueda ayudarme?!?!

Etiquetas: ajax, bucles
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 01:46.