Ver Mensaje Individual
  #1 (permalink)  
Antiguo 07/09/2015, 19:38
sarrhen
 
Fecha de Ingreso: mayo-2013
Ubicación: San Vicente
Mensajes: 127
Antigüedad: 11 años
Puntos: 1
input dinamico trabajen de forma independiente

Hola tengo este input dinamico pero la situacion es que cuando le doy al button + no me trabaja de forma indepentiende cada uno
Código HTML:
Ver original
  1. <title>Formulario Dinamico</title>
  2. <script type="text/javascript" src="js/jquery.min.js"></script>
  3. <script type="text/javascript" src="js/jquery.addfield2.js"></script>
  4. <div id="stylized" class="myform" style="margin:20px auto;">
  5. <form id="form" name="form" method="post" action="procesar1.php">
  6. <div id="material_comprado"> </div>
  7. <h1>Campos Din&aacute;mico</h1>
  8. <label><span class="small">A&ntilde;ade las conceptos</span>
  9. </label><br />
  10. <div id="div_1">
  11. <label>Codigo de Producto</label>
  12. <input type="text" name="concepto[]" id="concepto" style="width:200px;" /> <br>
  13. <label>Valor</label>
  14. <input type="text" name="valor[]" id="valor" style="width:200px;" />
  15. <input class="bt_plus" id="1" type="button" value="+" /><div class="error_form">
  16. </div>
  17. </div>
  18. <div id="div_2">
  19. <label>Codigo de Producto</label>
  20. <input type="text" name="concepto[]" id="concepto" style="width:200px;" /> <br>
  21. <label>Valor</label>
  22. <input type="text" name="valor[]" id="valor" style="width:200px;" />
  23. <input class="bt_plus1" id="2" type="button" value="+" /><div class="error_form">
  24. </div>
  25. </div>
  26. <button type="submit" class="boton">Enviar</button>
  27. <div class="spacer"></div>
  28. </form>
y este el js
Código Javascript:
Ver original
  1. $(document).ready(function() {
  2.     //ACA le asigno el evento click a cada boton de la clase bt_plus y llamo a la funcion addField
  3.         $(".bt_plus").each(function (el){
  4.             $(this).bind("click",addField);
  5.                                      });
  6.                             });
  7. $(document).ready(function() {
  8.     //ACA le asigno el evento click a cada boton de la clase bt_plus y llamo a la funcion addField
  9.         $(".bt_plus1").each(function (el){
  10.             $(this).bind("click",addField);
  11.                                      });
  12.                             });
  13. function addField(){
  14. // ID del elemento div quitandole la palabra "div_" de delante. Pasi asi poder aumentar el n�mero. Esta parte no es necesaria pero yo la utilizaba ya que cada campo de mi formulario tenia un autosuggest , as� que dejo como seria por si a alguien le hace falta.
  15. var clickID = parseInt($(this).parent('div').attr('id').replace('div_',''));
  16. // Genero el nuevo numero id
  17. var newID = (clickID+1);
  18. // Creo un clon del elemento div que contiene los campos de texto
  19. $newClone = $('#div_'+clickID).clone(true);
  20. //Le asigno el nuevo numero id
  21. $newClone.attr("id",'div_'+newID);
  22. //Asigno nuevo id al primer campo input dentro del div y le borro cualquier valor que tenga asi no copia lo ultimo que hayas escrito.(igual que antes no es necesario tener un id)
  23. $newClone.children("input").eq(0).attr("id",'parada'+newID).val('');
  24. //Borro el valor del segundo campo input(este caso es el campo de cantidad)
  25. //$newClone.children("input").eq(1).val('');
  26. $newClone.children("input").eq(1).val('');
  27. //Asigno nuevo id al boton
  28. $newClone.children("input").eq(2).attr("id",newID)
  29. //Inserto el div clonado y modificado despues del div original
  30. $newClone.insertAfter($('#div_'+clickID));
  31. //Cambio el signo "+" por el signo "-" y le quito el evento addfield
  32. $("#"+clickID).val('-').unbind("click",addField);
  33. //Ahora le asigno el evento delRow para que borre la fial en caso de hacer click
  34. $("#"+clickID).bind("click",delRow);                   
  35. function delRow() {
  36. // Funcion que destruye el elemento actual una vez echo el click
  37. $(this).parent('div').remove();
  38. }