Suma de inputs dinamicos

LABANDADELOSO · #1 (**permalink**) 07/07/2016, 13:42

HOLA A TODOS,

Me encuentro realizando un formulario de ingreso de productos, con inputs agregados dinamicamente con la siguiente funcion, la cual funciona sin ningun problema, pero ademas de eso, necesito mostrar en la vista en tiempo real, el resultado entre precio y cantidad de cada producto.
Alguna idea de como realizarlo?

Saludos.

Código:

$(document).ready(function() {
    $("#add").click(function() {
        var intId = $("#buildyourform div").length + 1;
        var fieldWrapper = $("<div class=\"products\" id=\"field" + intId + "\"/>");
        var fName = $("<input type=\"text\" name=\"data[Product]["+ intId +"][nombre]\" class=\"form-control\" placeholder=\"Detalle del producto\" style=\"width:30%;\" />");
        var fType = $("<input type=\"text\" name=\"data[Product]["+ intId +"][cantidad]\" class=\"form-control\" placeholder=\"Cantidad\" style=\"width:20%;\" />");
        var fType2 = $("<input type=\"text\" name=\"data[Product]["+ intId +"][precio]\" class=\"form-control\" placeholder=\"Valor\" style=\"width:20%;\" />");
        var removeButton = $("<input type=\"button\" class=\"btn btn-danger btn-fill\" style=\"width:15%;\" value=\"Eliminar\" />");

        removeButton.click(function() {
            $(this).parent().remove();
        });
        fieldWrapper.append(fName);
        fieldWrapper.append(fType);
        fieldWrapper.append(fType2);
        fieldWrapper.append(removeButton);
        $("#buildyourform").append(fieldWrapper);
    });
    $("#preview").click(function() {
        $("#yourform").remove();
        var fieldSet = $("<fieldset id=\"yourform\"><legend>Your Form</legend></fieldset>");
        $("#buildyourform div").each(function() {
            var id = "input" + $(this).attr("id").replace("field","");
            var label = $("<label for=\"" + id + "\">" + $(this).find("input.fieldname").first().val() + "</label>");
            var input;
            switch ($(this).find("select.fieldtype").first().val()) {
                case "checkbox":
                    input = $("<input type=\"checkbox\" id=\"" + id + "\" name=\"" + id + "\" />");
                    break;
                case "textbox":
                    input = $("<input type=\"text\" id=\"" + id + "\" name=\"" + id + "\" />");
                    break;
                case "textarea":
                    input = $("<textarea id=\"" + id + "\" name=\"" + id + "\" ></textarea>");
                    break;    
            }
            fieldSet.append(label);
            fieldSet.append(input);
        });
        $("body").append(fieldSet);
    });
});

Código HTML:

<div class="products">
                                                <input type="text" name="data[Product][0][nombre]" class="form-control" placeholder="Detalle del producto" style="width:30%;" />
                                                <input type="text" id="cantidad" name="data[Product][0][cantidad]" class="form-control" placeholder="Cantidad" style="width:20%;" />
                                                <input type="text" id="precio" name="data[Product][0][precio]" class="form-control" placeholder="Valor" style="width:20%;" />
                                                <input type="button" value="Agregar" class="btn btn-info btn-fill" id="add" />
</div>

#2 (**permalink**) 07/07/2016, 14:45

Buscas algo como esto?

Código HTML:

Ver original<html>
    <head>
        <script type="text/javascript">
        function add(){
        var elemento1 = document.createElement('input');
        elemento1.type = "text";
        elemento1.setAttribute("name", "precio");
        
        var elemento2 = document.createElement('input');
        elemento2.type = "text";
        elemento2.setAttribute("name", "cantidad");
        
        var elemento3 = document.createElement('br'); 
        
        var contener = document.getElementById('contener');
        
        contener.appendChild(elemento1);
        contener.appendChild(elemento2);
        contener.appendChild(elemento3);
        }
        
        function suma(){
        var total = 0;
            for(k=0;k<document.getElementsByName("precio").length;k++){
            total += parseInt(document.getElementsByName("precio")[k].value)*parseInt(document.getElementsByName("cantidad")[k].value);
            }
        document.getElementById("total").innerHTML = total;
        }
        
        </script>
    </head>
    <body>
    
    <input type="button" onclick="suma();" value="sumar todo" /> Suma: <span id="total"></span><br/>
    
    <input type="button" value="Agregar +" onclick="add();"/><br/>
    Precio/cantidad
        <div id="contener"></div>   
    </body>
</html>

LABANDADELOSO · #3 (**permalink**) 07/07/2016, 14:57

Exactamente, solo me faltaria ir agregando un indice (el cual ire aumentando, a medida que agrego un nuevo input, al nombre del input, dado que trabajo con un framework, y necesito recorrerlo en el controlador para generar multiples registros en la base de datos.

name="data[Product][$indice][cantidad]"

Cita:

Iniciado por alvaro_trewhela

Buscas algo como esto?

Código HTML:

Ver original<html>
    <head>
        <script type="text/javascript">
        function add(){
        var elemento1 = document.createElement('input');
        elemento1.type = "text";
        elemento1.setAttribute("name", "precio");
        
        var elemento2 = document.createElement('input');
        elemento2.type = "text";
        elemento2.setAttribute("name", "cantidad");
        
        var elemento3 = document.createElement('br'); 
        
        var contener = document.getElementById('contener');
        
        contener.appendChild(elemento1);
        contener.appendChild(elemento2);
        contener.appendChild(elemento3);
        }
        
        function suma(){
        var total = 0;
            for(k=0;k<document.getElementsByName("precio").length;k++){
            total += parseInt(document.getElementsByName("precio")[k].value)*parseInt(document.getElementsByName("cantidad")[k].value);
            }
        document.getElementById("total").innerHTML = total;
        }
        
        </script>
    </head>
    <body>
    
    <input type="button" onclick="suma();" value="sumar todo" /> Suma: <span id="total"></span><br/>
    
    <input type="button" value="Agregar +" onclick="add();"/><br/>
    Precio/cantidad
        <div id="contener"></div>   
    </body>
</html>

#4 (**permalink**) 07/07/2016, 19:59

Pero ahi está, pudes recorrer todo elemento agregado al dom. En cuanto a la base de datos... ¿Cómo conectarás js a la bd?