Ir al contenido



Foto

Envío de tabla dinámica en formulario

javasrcipt jquery ajax

  • Por favor identifícate para responder
1 respuesta en este tema

#1 AntonioVS

AntonioVS

    Newbie

  • Miembros
  • Pip
  • 1 mensajes

Escrito 20 diciembre 2017 - 01:18

Hola, 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 es 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 , 2-) enviar el formulario completo, se que es un problema enviar la tabla dentro del formulario pero me sirve enviarlo como array yo me encargo después buscar los datos en la controladora. Trabajo con python, django,jquery, bootstrap, se que este sobre PHP pero bueno que me puedan ayudar con el javascript sería de mucha ayuda aqui le dejo el código:


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


  • 0

#2 Delphius

Delphius

    Advanced Member

  • Administrador
  • 6.257 mensajes
  • LocationArgentina

Escrito 20 diciembre 2017 - 04:39

Hola AntonioVS,

Antes que nada ¡Bienvenido a DelphiAccess! Espero que esta comunidad te sea de mucho agrado y se convierta en tu segundo hogar.

Me he tomado la libertad de editar tu mensaje para darle formato al código.

 

Te aconsejo que cada vez que coloques código lo formatees ya que ayuda mucho a entenderlo mejor. Para ello antes de pegarlo acá, mientras estás escribiendo tu mensaje verás un botón con el símbolo "<>". Pulsa en el. Se te mostrará una cuadro de diálogo en donde podrás elegir el lenguaje y un textarea en donde ahi colocar el código. Al aceptar se colocará el código formateado en el mensaje.

 

Ahora respecto a tu duda no te sabría asesorar con Python, Django ni bootstrap. Si hay una forma de encararlo, mediante AJAX, pero sobre PHP, y desconozco hasta que punto es posible portarlo a las teconologías que empleas. Esperemos a los otros compañeros del foro, puede que alguno de ellos pueda asesorarte mejor.

 

Saludos,


  • 0





Etiquetado también con una o más de estas palabras: javasrcipt, jquery, ajax