Agregar textbox y combobox dinamicamente

[axelb]

Hola, buenos dias, tengo un formulario para dar de alta un pedido, el cual tiene su cabecera, y debajo del mismo un boton "Cargar productos" que al darle clic, aparezcan n registros, uno con cada clic, y cada registro compuesto por un combobox con datos extraidos de la base de datos y dos campos de texto, luego de que cargue la cantidad de productos que necesita lo debe guardar en la base de datos.

Como puedo lograrlo??

Solo tengo un poco de conocimiento de php...

Desde ya muchas gracias a todos!

[IsaBelM]

el nombre de esos controles han de ser un array

<input type="text" name="t[]" />
<input type="text" name="t[]" />

para recogerlos

$_REQUEST["t"]

si sabes que la consulta trata de php, por qué la publicas en el foro de javascript??

[mauritosuarez]

Hola axelb, te paso el código.

HTML

Código HTML:

<form id="formestrucfile" name="formestrucfile" action="" method="post">
                            <input type="hidden" name="crearestructfile" value="si" />
                            <input type="hidden" name="id" value="<?php print $_GET["id"]; ?>" />
                            <input type="hidden" id="colfija" value="<?php print $colfija; ?>" />
                            <input type="hidden" id="estructura" value="<?php print $estructura ?>" />
                            <input type="hidden" id="cargafecha" value="<?php print $cargafecha; ?>" />
                            <input type="hidden" id="cargalogal" value="<?php print $cargalocal; ?>" />
                            <input type="hidden" id="noreportalocal" value="<?php print $noreportalocal; ?>" />
                            <table id="tabla" class="table">
                                <tbody>
                                    <tr style="font-size: 12px;">
                                        <th style="background-color: #ddd;">Nro Col &nbsp; 
                                            <img style="cursor:pointer;" title="Agregar columna" id="plus" src="<?php print Conectar::Url(); ?>img/icon/b_plus.png" /> &nbsp;
                                            <img style="cursor:pointer;" title="Quitar columna" id="minus" src="<?php print Conectar::Url(); ?>img/icon/b_minus.png" />
                                        </th>
                                        <th>Header</th>
                                        <th>Tipo dato</th>
                                        <th>Factor de ajuste</th>
                                        <th>Separador decimal</th>
                                        <th>Corte decimal</th>
                                        <th>Longitud</th>
                                    </tr>
                                    <?php for($i=1; $i < 5; $i++) { ?>
                                        <tr>
                                            <td class="id" style="background-color: #ddd;" >Col <?php print $i; ?></td>
                                            <td>
                                                <input class="header" type='text' id="header" name="header[]" style="text-transform: uppercase;" />
                                            </td>
                                            <td>
                                                <select id="<?php print $i; ?>" name="tipodato[]" class="tipodato" style="height: 25px;" onchange="ChangeCombo();">
                                                    <?php $e->ComboTipoDatos(); ?>
                                                </select>
                                            </td>
                                            <td>
                                                <input type='text' id="factor" name="factor[]" size="4" class="desabilitar" />
                                            </td>
                                            <td>
                                                <select id="separador" name="separador[]" style="height: 25px;" class="desabilitar">
                                                    <option value="0">NO APLICA</option>
                                                    <option value="1">. [PUNTO]</option>
                                                    <option value="2">, [COMA]</option>
                                                </select>
                                            </td>
                                            <td>
                                                <input type='text' id="cortedec" name="cortedec[]" size="4" class="desabilitarcorte"  />
                                            </td>
                                            <td>
                                                <input type='text' id="longitud" name="longitud[]" size="4" class="desabilitarlonfija"  />
                                            </td>
                                        </tr>
                                    <?php } ?>
                                </tbody>
                            </table>
                        </form>
<p class="clear"><button id="btncrearestructura" style="cursor: pointer;"><img alt="" src="<?php echo Conectar::Url(); ?>img/icon/b_save.png" /> Crear estructura de archivo</button></p>
 

JQUERY

Código Javascript:

$(document).ready(function(){
 
    $("#plus").click(function() {
        // Obtenemos el total de las columnas
        //var tds=$("#tabla td").length;
 
        // Obtenemos el total de las filas
        var trs=$("#tabla tr").length - 1;
        
        if(trs <= 24) {
            // clonacion de filas en la tabla
            $("#tabla tbody tr:eq("+trs+")").clone().appendTo("#tabla tbody").find('.desabilitar').attr('disabled','disabled');
 
            
            var trs=$("#tabla tr").length - 1;
            $("#tabla .id:last").html('Col '+ trs);
            $("#tabla .header:last").val('');
            $('#tabla .desabilitarlonfija:last').val('');
            
        }else {
            alert("No puede agregar mas de 25 filas.");
        }
    });
        
    /**
     * Funcion para eliminar la ultima columna de la tabla.
     * Si unicamente queda una columna, esta no sera eliminada
     */
    $("#minus").click(function(){
        // Obtenemos el total de columnas (tr) del id "tabla"
        var trs = $("#tabla tr").length;
        // Debe quedar como minimo la fila header table mas una fila
        if(trs > 2)
        {
            // Eliminamos la ultima columna
            $("#tabla tr:last").remove();
        }else {
            alert("Debe contener por lo menos 1 fila.");
        }
    });
 
});
 

Espero te sirva.

Saludos.

[axelb]

hola, gracias IsaBelM, pero me parece que no has entendio el problema!

mauritosuarez. eh intentado probar el codigo que me has dado, pero no logro hacerlo funcionar! cual es la relacion, la conexion entre un archivo y el otro?? cual es la extension que debenen tener los archivos?? muchas gracias desde ya!!!! espero que puedas seguir ayudandome!!!!

[IsaBelM]

Iniciado por axelb

Hola, buenos dias, tengo un formulario para dar de alta un pedido, el cual tiene su cabecera, y debajo del mismo un boton "Cargar productos" que al darle clic, aparezcan n registros, uno con cada clic, y cada registro compuesto por un combobox con datos extraidos de la base de datos y dos campos de texto, luego de que cargue la cantidad de productos que necesita lo debe guardar en la base de datos.

Como puedo lograrlo??

es difícil entenderte tal y como te expresas. mas entendible

tengo un formulario para dar de alta un pedido, el cual tiene su cabecera, y debajo del mismo un boton "Cargar productos". necesito que al darle clic aparezcan n registros, uno con cada clic,

usa el método cloneNode()

[axelb]

si es cierto, disculpa! en el apuro termine haciéndolo mas complicado!

Tendrías algún ejemplo de como implementarlo?? como dije ante, solo manejo un poco de php, y la verdad que no se de que trata esto...

Muchas gracias

[IsaBelM]

puede ser algo así

window.addEventListener('load', function() {

document.getElementById('clonar').addEventListener ('click', function() {

var txt = document.getElementById('f').elements[0].cloneNode(false);
var com = document.getElementById('f').elements[1].cloneNode(false);

var fragListado = document.createDocumentFragment();

fragListado.appendChild(txt);
fragListado.appendChild(com);

document.getElementById('f').appendChild(fragLista do);

}, false);

}, false);



<form id="f">
<input type="text" name="t[]" value="" />
<select name="s[]">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</form>

<span id="clonar">clonar</span>

[axelb]

con mi poco conocimiento, puedo imaginar que esto es javascript

Iniciado por IsaBelM

window.addEventListener('load', function() {

document.getElementById('clonar').addEventListener ('click', function() {

var txt = document.getElementById('f').elements[0].cloneNode(false);
var com = document.getElementById('f').elements[1].cloneNode(false);

var fragListado = document.createDocumentFragment();

fragListado.appendChild(txt);
fragListado.appendChild(com);

document.getElementById('f').appendChild(fragLista do);

}, false);

}, false);

pero al ponerlo en un archivo html, me da error en la siguiente linea:

document.getElementById('f').appendChild(fragLista do);

que es lo que he hecho mal?

[IsaBelM]

no has hecho nada mal. es sólo mi mala costumbre de no usar los highlight cuando publico código. prueba ahora

Código Javascript:

document.getElementById('f').appendChild(fragListado);
 

[axelb]

bueno, ahora funcionó! estoy con poco tiempo, asi que no pude analizar el código todavia, pero tengo una ultima pregunta, como haga para guardar esos "n" datos??

se hacerlo cuando se la cantidad de datos que se van a guardar, pero ahora no voy a saber como!

Muchísimas gracias IsaBelM!! Me está sirviendo mucho tu ayuda!!

[IsaBelM]

ya está respondido

[axelb]

muy cierto! gracias!!!! en estos dias con un poco mas de tiempo me pongo a estudiar esto!!! Muy agradecido! d verdad! gracias por la paciencia y por la ayuda!! saludos

[axelb]

IsaBelM, he notado que al duplicar, los combobox aparecen vacios! a que se debe esto?

Otra cuestión, no logro hacer que los duplicados aparezcan uno debajo del otro! :o
He intentado con los <br>, tablas y hasta probe con <hr> para lograr algo parecido!

Me siento mal por no lograr mi cometido por mi mismo!

[IsaBelM]

cambia el false por true

document.getElementById('f').elements[1].cloneNode(true);

puedes crear un salto de línea. todo dependerá del layout que tengas

var salto = document.createElement('br');

var fragListado = document.createDocumentFragment();

fragListado.appendChild(salto);
fragListado.appendChild(txt);
fragListado.appendChild(com);

[axelb]

nuevamente muchas gracias IsaBelM! por lo pronto pude ponerlo como quería, pero no tuve el tiempo necesario para probar el funcionamiento, de todas formas confío en que no va a haber problemas!! Una vez mas, GRACIAS!