Problema con bucles

Lobito14 · #1 (**permalink**) 18/05/2010, 12:08

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!

webness · #2 (**permalink**) 19/05/2010, 09:45

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

Lobito14 · #3 (**permalink**) 19/05/2010, 10:57

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<body>
        <div id="demoWrapper">
          <form id="demoForm" method="post" action="json.html">
                <div id="fieldWrapper">
                
                
                    <span class="step" id="first">
                        <span class="font_normal_07em_black">Insertar discos</span><br />
                        <label for="nombreDisco">Nombre</label><br />
                        <input class="input_field_12em" name="nombreDisco" id="nonmbreDisco"><br />
                        <label for="discografica">Discografica</label><br />
                        <input class="input_field_12em" name="discografica" id="discografica"><br />
                        <label for="genero">Genero</label><br />
                        <input class="input_field_12em" name="genero" id="genero"><br />
                        <label for="anioSalida">Año de salida (aaaa-mm-dd)</label><br />
                        <input class="input_field_12em" name="anioSalida" id="anioSalida"><br />
                        <label for="imagenPortada">Imagen portada</label><br />
                        <input class="input_field_12em" name="file" id="file" type='file'><br />
                        <label for="num_canciones">Numero de canciones</label><br />
                        <input class="input_field_12em" name="numCanciones" id="numCanciones" onChange="canciones();"><br />
                    </span>
                    
                    
                    <span id="confirmation" class="step">
                    <script language="javascript" type="text/javascript">                   
                    
                    function canciones(){
                    
                        var numCanciones = document.demoForm.numCanciones.value;
                                        
                        for (i=0; i<= numCanciones; i++){
                    
                            document.write('
                            <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 />    
                            ');
                        
                    
                        }
                    
                    }
                    
                    </script>
                                        </span>
                                 </div>
                
                
                <div id="demoNavigation">                           
                    <input class="navigation_button" value="Back" type="reset">
                    <input class="navigation_button" value="Next" type="submit" onCLick="canciones();">
                </div>
                
                
            </form>
            <hr />
            
            <p id="data"></p>
        </div>
    <script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>     
    <script type="text/javascript" src="./js/jquery.history.js"></script>
    <script type="text/javascript" src="./js/jquery.form.js"></script>
    <script type="text/javascript" src="./js/jquery.validate.js"></script>
    <script type="text/javascript" src="./js/jquery.form.wizard-2.0.1-min.js"></script>
    <script type="text/javascript">
        $(function(){
                $("#demoForm").formwizard({ //wizard settings 
                    formPluginEnabled: true, //Ajax is used to post the form to the server
                    validationEnabled : true, //The Validation plugin is used for validating the form at each step
                    focusFirstInput : true // puts focus at the first input on each step
                 },
                 {
                    //validation settings
                    messages: { email: "Invalid email (custom message)"} // custom message shown when the email is invalid
                 },
                 {
                    // form plugin settings
                    success: function(data){ // called when the form has been submitted correctly to the server
                        $("#status").fadeTo(500,1,function(){ $(this).html("You are now registered!").fadeTo(5000, 0); })
                    },
                    beforeSubmit:  function(data){ // called just before the form is submitted
                        $("#data").html("Data sent to the server : <br />" + $.param(data));
                    },
                    dataType: 'json',
                    resetForm: true
                 }
                );
            });
    </script>
    </body>

Lobito14 · #4 (**permalink**) 21/05/2010, 09:14

Alguien mas por ahi que se le ocurra que puedo hacer?!

quike88 · #5 (**permalink**) 21/05/2010, 09:30

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 />'
}

}

Lobito14 · #6 (**permalink**) 21/05/2010, 14:32

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<body>
        <div id="demoWrapper">
          <form id="demoForm" method="post" action="json.html">
                <div id="fieldWrapper">
                
                
                    <span class="step" id="first">
                        <span class="font_normal_07em_black">Insertar discos</span><br />
                        <label for="nombreDisco">Nombre</label><br />
                        <input class="input_field_12em" name="nombreDisco" id="nonmbreDisco"><br />
                        <label for="discografica">Discografica</label><br />
                        <input class="input_field_12em" name="discografica" id="discografica"><br />
                        <label for="genero">Genero</label><br />
                        <input class="input_field_12em" name="genero" id="genero"><br />
                        <label for="anioSalida">Año de salida (aaaa-mm-dd)</label><br />
                        <input class="input_field_12em" name="anioSalida" id="anioSalida"><br />
                        <label for="imagenPortada">Imagen portada</label><br />
                        <input class="input_field_12em" name="file" id="file" type='file'><br />
                        <label for="num_canciones">Numero de canciones</label><br />
                        <input class="input_field_12em" name="numCanciones" id="numCanciones" onChange="canciones();"><br />
                    </span>
                    
                    
                    <span id="confirmation" class="step">
                    <div id="canciones">
                    
                    
                    </div>
                    </span>
                                 </div>
                
                
                <div id="demoNavigation">                           
                    <input class="navigation_button" value="Back" type="reset">
                    <input class="navigation_button" value="Next" type="submit" >
                </div>
                
                
            </form>
            <hr />
            
            <p id="data"></p>
        </div>
    <script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>     
    <script type="text/javascript" src="./js/jquery.history.js"></script>
    <script type="text/javascript" src="./js/jquery.form.js"></script>
    <script type="text/javascript" src="./js/jquery.validate.js"></script>
    <script type="text/javascript" src="./js/jquery.form.wizard-2.0.1-min.js"></script>
    <script type="text/javascript">
        $(function(){
                $("#demoForm").formwizard({ //wizard settings 
                    formPluginEnabled: true, //Ajax is used to post the form to the server
                    validationEnabled : true, //The Validation plugin is used for validating the form at each step
                    focusFirstInput : true // puts focus at the first input on each step
                 },
                 {
                    //validation settings
                    messages: { email: "Invalid email (custom message)"} // custom message shown when the email is invalid
                 },
                 {
                    // form plugin settings
                    success: function(data){ // called when the form has been submitted correctly to the server
                        $("#status").fadeTo(500,1,function(){ $(this).html("You are now registered!").fadeTo(5000, 0); })
                    },
                    beforeSubmit:  function(data){ // called just before the form is submitted
                        $("#data").html("Data sent to the server : <br />" + $.param(data));
                    },
                    dataType: 'json',
                    resetForm: true
                 }
                );
            });
    </script>
     <script language="javascript" type="text/javascript">                   
                    
                    function canciones(){
                    var numCanciones = document.demoForm.numCanciones.value;
                    var div=document.getElementById("canciones");
                    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 />'
                    }
 
                    }
                    
      </script>
</body>

Lobito14 · #7 (**permalink**) 23/05/2010, 09:44

Nadie que sepa en que puedo estar fallando o como solucionarlo?!?!

quike88 · #8 (**permalink**) 24/05/2010, 07:08

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 />'

Lobito14 · #9 (**permalink**) 24/05/2010, 08:05

Gracias por tu respuesta, lo he cambiado... pero nada, no funciona... dios...

Lobito14 · #10 (**permalink**) 25/05/2010, 15:40

Nadie mas por ahi que sepa que hacer?? thank!

Lobito14 · #11 (**permalink**) 29/05/2010, 05:54

Nadie que pueda ayudarme?!?!