Validaciones sobre tablas dinamicas PHP-JQuery

SiR_HuNTeR · March 4, 2016

Estimados colegas, junto con saludar.

Estoy programando con PHP y validando con JQuery. El inconveniente es que debo validar unos campos dentro de una tabla que es dinamica.

Por ejemplo, un texto nombre apellido con su rut al lado y un boton agregar (captan la idea?)

Por ejemplo, mi codigo HTML

<html>
<form>
<body>
<table border="0" class="clone-group1">
 <thead>
  <tr>
   <td style="width: 70%" >
    NOMBRES PROPIETARIO
   </td>
  <td style="width: 20%;" align="center">
    RUT
  </td>
  <td style="width: 10%;" align="center" >
    Agregar/ Eliminar
  </td>
 </tr>
 </thead>
 <tbody >
  <tr class="clone1">
   <td colspan=""	>
    <input class="2_nombres_prop" placeholder="Nombres" disabled style="width: 38%; display: inline 
;" type="text" id="2_nombres_prop" value="" name="2_nombres_prop[]" />
    <input class="2_ape_p_prop" placeholder="Apellido Paterno" disabled style="width: 30%; display: inline;" type="text" id="2_ape_p_prop" value="" name="2_ape_p_prop[]" />
    <input class="2_ape_m_prop" placeholder="Apellido Materno" disabled style="width: 30%; display: inline;" type="text" id="2_ape_m_prop" value="" name="2_ape_m_prop[]" />
   </td>
   <td>
    <input class="2_rut_prop" type="text" id="2_rut_prop" value="" name="2_rut_prop[]" /> 
   </td>
   <td align="center">
    <button type="button" class="btn btn-primary addButton1" aria-label="Left Align" id=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>Agregar
    </button>
   </td>
  </tr>
 </tbody>
</table>
</body>
</form>
</html>

Codigo en mi JS, para agregar y/o eliminar de forma dinamica, validar que los rut ingresados sean de empresa o persona natural y un inicializador de ID en cada TR de la tabla dinamica.

$(function(){
 var i = parseInt($('.n_item_1').val(), 10);
 var cloneItem = $(".clone1:last");//class de la tabla
 var cloneWrap	= $(".clone-group1");//div
 $(".addButton1").on("click", function () {
  if(i < 4){
	i = i + 1; 
	var clon = cloneItem.clone(true).attr('id', '_'+i).appendTo(cloneWrap);
	clon.find('[type=text]').val('');
			
	clon.find(".addButton1")
	.replaceWith( '<button type="button" class="btn btn-primary remButton1" aria-label="Left Align"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Eliminar</button>');
			
	$( ".n_item_1" ).remove();
	str_id = '<input type="hidden" class="n_item_1" name="n_item_1" value="'+i+'">';
	$("#form_shcl").append(str_id);	
  }
 });
 $("body").on("click", ".remButton1", function () {
	$(this).closest(".clone1").remove();
	i = i - 1;
	
	$( ".n_item_1" ).remove();
	str_id = '<input type="hidden"  class="n_item_1" name="n_item_1" value="'+i+'">';
	$("#form_shcl").append(str_id);
 });
});

 $(".clone-group1 tbody tr").click(function(){
  // OBTIENES EL ID DEL TAG DONDE ESTA EL PTERO
  var clone_id1=$(this).attr('id');
  // ARMAMOS LA VARIABLE 'ID' DEL TAG
  var clone1='#'+clone_id1;
  $(clone1+" #2_rut_prop").keypress( function(){
   // DESHABILITAMOS
   $(clone1+" #2_nombres_prop").prop('disabled', true);
   $(clone1+" #2_ape_p_prop").prop('disabled', true);
   $(clone1+" #2_ape_m_prop").prop('disabled', true);
   // LIMPIAMOS
   $(clone1+" ._prop").val('');
 });
$(clone1+" #2_rut_prop").change( function(){
   var rutdv = $(clone1+" #2_rut_prop").val().replace('.', '').replace('.', '');
   var rut = parseInt(rutdv.substr(0,rutdv.length-2));
   var largo=rut.length;

 switch(true){
  case(rut>50000000):
   // HABILITAMOS CAMPOS DE NOMBRE RESPECTIVOS
   $(clone1+" #2_ape_p_prop").prop('disabled', false);
   $(clone1+" #2_ape_p_prop").focus();
  break;
  case(rut<50000000):
   // HABILITAMOS CAMPOS DE NOMBRE RESPECTIVOS
   $(clone1+" #2_nombres_prop").prop('disabled', false);
   $(clone1+" #2_nombres_prop").focus();
   $(clone1+" #2_ape_p_prop").prop('disabled', false);
   $(clone1+" #2_ape_m_prop").prop('disabled', false);
  break;
  }
 });
});

$(document).ready(function(){
  var r=0;
  $(".clone-group1 tbody tr").each(function(){
   $(this).attr('id','_'+r);
   r++;
  });
});

Lo que debiera suceder, es que si ingreso un rut empresa, solo se habilita el campo apellido paterno, por otro lado si coloco un rut persona normal, se habilitan todos los campos.

Ahora lo que sucede es que cuando agrego una fila nueva (de forma dinamica), me valida el segundo y no el primero.. y no entiendo porque...

Tienen alguna idea??

Agradecido, desde ya.. quedo atento a cualquier comentario.

Sign In

Validaciones sobre tablas dinamicas PHP-JQuery

Recommended Posts

SiR_HuNTeR

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity