Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » Django » Envío de formulario con una tabla dinámica

Django - Envío de formulario con una tabla dinámica

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 5
Ha disminuido su posición en 2 puestos en Django (en relación al último mes)
Gráfica de Django

Envío de formulario con una tabla dinámica

Publicado por Antonio (3 intervenciones) el 20/12/2017 20:43:14
bueno estoy ya trabajando con un formulario que tiene una tabla dinámica, en la tabla puedo adicionar y eliminar las filas hasta alli todo bien, lo que nececito que me ayuden en 2 cosas que no he podido resolver: 1-) El segundo select es dependiente del primero y no se hace nada no se que error pueda tener ,llevar las sumas totales de cada columna y fila , 2-) enviar el formulario completo, se que es un problema enviar la tabla dentro del formulario pero me sirve enviarlo como matriz yo me emmcargo después buscar los datos en la controladora. Trabajo con python, django,jquery, bootstrap, el codigo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
$(document).ready(function () {
    $("#nuevoServicio").click(function () {
        var tableReg = document.getElementById("tablaserviciosprest");
        $("#tablaserviciosprest").append("<tr>" + tableReg.rows[1].innerHTML + "</tr>");
 
        $('.eliminalinea').off().click(function (e) {
            $(this).parent('td').parent('tr').remove();
        });
        addcambios();
    });
});
 
function addcambios() {
    $(".seleccionarArea1").change(function () {
        var $servselect = $(this).parents("tr").find("td")[1].children[0];
        $servselect.disabled = false;
 });
}
function empty(unselect) {
    for (var i = 1; i < unselect.children.length; i++) {
        unselect.children[i].remove();
    }
}
 
 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<form role="form" action="" method="post" class="form-horizontal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3>Adicionar Servicio Prestado</h3>
    </div>
    <div class="modal-body ">
 
        <div class="panel panel-default ">
            <div class="panel-body 2">
                <div class="form-group">
                    <label for="areaSP" class="control-label col-lg-1">Área*:</label>
                    <div class="col-lg-4">
                        <select class="form-control" id="areaSP" name="areaT">
                            <option value="">Seleccione Área ...</option>
                            {% for area in area_List %}
                                <option value="{{ area.pk }}">{{ area.area }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="clienteSP" class="control-label col-lg-1">Cliente*:</label>
                    <div class="col-lg-6">
                        <select class="form-control" id="clienteSP" name="areaT">
                            <option value="">Seleccione Cliente ...</option>
                            {% for cliente in cliente_List %}
                                <option value="{{ cliente.pk }}">{{ cliente.nombreEmp }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="carnetI" class="control-label col-lg-2">Servicios Prestados*:</label>
                    <div class="col-xs-offset-1 col-lg-11">
                        <table class="table table-bordered" id="tablaserviciosprest">
                            <thead>
                            <tr>
                                <th>Área</th>
                                <th>Servicio</th>
                                <th>Precio CUP</th>
                                <th>Precio CUC</th>
                                <th>Precio Total</th>
                                <th>Cantidad</th>
                                <th>Costo Total</th>
                                <th>Opciones</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr style="display:none; ">
                                <td class="col-lg-2">
                                    <select id="seleccionarArea[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarArea"
                                            name="seleccionarArea[]">
                                        <option value="">Seleccione Área ...</option>
                            <option value="1">Comercio</option>
                            <option value="2">Aplicaciones Informáticas</option>
                            <option value="3">Desarrollo</option>
                                    </select>
                                </td>
                                <td class="col-lg-2">
                                    <select id="seleccionarServicioP[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarServicioP"
                                            name="seleccionarServicioP[]" disabled="">
                                        <option value="">Seleccione Servicio ...</option>
                                    </select>
                                </td>
                                <td><input type="text" id="precioCUP" name="precioCUP[]" placeholder="CUP"
                                           class="form-control">
                                </td>
                                <td><input type="text" id="precioCUC" name="precioCUC[]" placeholder="CUC"
                                           class="form-control"></td>
                                <td><input type="text" id="precioTotal" name="precioTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td><input type="text" id="cantidad" name="cantidad[]" class="form-control"
                                           placeholder="Cantidad"></td>
                                <td><input type="text" id="costoTotal" name="costoTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td>
                                    <button type="button" class="eliminalinea btn btn-default btn-xs col-lg-offset-4">
                                        <span class="glyphicon glyphicon-minus " style="color: red"></span></button>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-lg-2">
                                    <select id="seleccionarArea[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarArea"
                                            name="seleccionarArea[]">
                                        <option value="">Seleccione Área ...</option>
                            <option value="1">Comercio</option>
                            <option value="2">Aplicaciones Informáticas</option>
                            <option value="3">Desarrollo</option>
                                    </select>
                                </td>
                                <td class="col-lg-2">
                                    <select id="seleccionarServicioP[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarServicioP"
                                            name="seleccionarServicioP[]" disabled>
                                        <option value="">Seleccione Servicio ...</option>
                                    </select>
                                </td>
                                <td><input type="text" id="precioCUP[]" name="precioCUP[]" placeholder="CUP"
                                           class="form-control">
                                </td>
                                <td><input type="text" id="precioCUC[]" name="precioCUC[]" placeholder="CUC"
                                           class="form-control"></td>
                                <td><input type="text" id="precioTotal[]" name="precioTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td><input type="text" id="cantidad[]" name="cantidad[]" class="form-control"
                                           placeholder="Cantidad"></td>
                                <td><input type="text" id="costoTotal[]" name="costoTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td>
                                    <button type="button" class="eliminalinea btn btn-default btn-xs col-lg-offset-4" disabled>
                                        <span class="glyphicon glyphicon-minus " style="color: red"></span></button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <button type="button" id="nuevoServicio" class="btn btn-danger nuevoServicio">Nuevo Servicio
                        </button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="porCobrar" class="control-label col-lg-2">Por Cobrar:</label>
                    <div class="checkbox col-lg-7">
                        <input id="porCobrar" name="porCobrar" type="checkbox" checked>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <div class="col-lg-12 text-right">
            <button type="submit" class="btn btn-primary" name="submit">Guardar</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        </div>
    </div>
</form>

Espero que me puedan ayudar ya que llevo varios dias en esto y no doy con la solución
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de abzerox
Val: 19
Ha mantenido su posición en Django (en relación al último mes)
Gráfica de Django

Envío de formulario con una tabla dinámica

Publicado por abzerox (3 intervenciones) el 21/12/2017 00:04:43
Hola Antonio, hize algunos cambios en el código de tu estudialo y nos comentas si es lo que buscabas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
$(document).ready(function () {
 
    // ENVIO DEL FORMUARIO

    $('form').on('submit', function() {
       $table = $("#tablaserviciosprest tbody");
       $rows = $table.children();
 
       // guarda los datos que luego seran enviados por Ajax, como un JSON.

       let data = {'count': $rows.length}
 
       $rows.each( function(index, row) {
 
            // recupero todos los selects

            let selects = Array.from(row.querySelectorAll('select'));
            data['row_'+index] = []
 
            for (let select of selects) {
                data['row_'+index].push(select.value)
            }
 
            // recupero todos los inputs

            let inputs = Array.from(row.querySelectorAll('input'));
            for (let input of inputs) {
                data['row_'+index].push(input.value)
            }
       });
 
       console.log(data);
 
       // JSON

       console.log(JSON.stringify(data));
    });
 
    function addcambios() {
        $(".seleccionarArea").change(function () {
 
            var $servselect = $(this).parents("tr").find("td")[1].children[0];
            if ($(this).val() === '') {
                $servselect.disabled = true;
            } else {
                $servselect.disabled = false;
            }
        });
    }
 
    function empty(unselect) {
        for (var i = 1; i < unselect.children.length; i++) {
            unselect.children[i].remove();
        }
    }
 
   $("#nuevoServicio").click(function () {
        var tableReg = document.getElementById("tablaserviciosprest");
        $("#tablaserviciosprest").append("<tr>" + tableReg.rows[1].innerHTML + "</tr>");
 
        $('.eliminalinea').off().click(function (e) {
            $(this).parent('td').parent('tr').remove();
        });
        addcambios();
    });
 
 
    addcambios();
});
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar