problem with an increaseable form

Question

problem with an increaseable form

Navigation

#1 by (1 votes)

0

Hello friends I have the following problem I have an incretable form inside an html table, everything works perfect, the problem is the following in incremental form I have a drop-down list, when I choose the option of another user I enable an input this works, when I give it more to add another row and I want to enable the input of that row I always enable the first row and not the second and are with all the fields that will increase,

This would be my form

     <input type="hidden" name="id_r" value="<?php echo  $row['id_r'] ?>">  

     <input type="checkbox" onclick="document.getElementById('Informativa').style. display = (this.checked) ? 'block' : 'none' " name="tipo_m" value="informativa" >
      <strong>Informativa</strong>


     <input type="checkbox" onclick="document.getElementById('Acuerdo').style. display = (this.checked) ? 'block' : 'none' " name="tipo_m" value="acuerdos" >
     <strong>Acuerdo</strong>

      <div id="Informativa" style="display: none">

      <table class="table bg-info"  id="tabla">


       <tr class="fila-fija">
       <input type="hidden" name="titulo" value="<?php echo $row['titulo'] ?>">
       <input type="hidden" name="seguidor[]" value="Informativa">

        <td><label>Descripción</label>
        <textarea required name="descripcion[]"  class="form-control" placeholder="Descripcion de la Actividad"/></textarea></td>

       <td><label>Usuario</label>
       <select  class="form-control" name="usuario[]" onchange="if(this.value=='padicional') {document.getElementById('padicional').disabled = false} else {document.getElementById('usuario').disabled = true} ">
        <option></option>
        <option value="padicional">Otro Usuario</option>

        <?php
        $query = "SELECT * FROM usuario";
        $registros=mysql_query($query,$conexion) or die("Problemas en el select:".mysql_error());
            while($row = mysql_fetch_array($registros)){
              $usuario=$row['usuario'];


        ?>
        <option value="<?php echo $usuario;?>"><?php echo $usuario;?></option>

        <?php }?>

        </select>

        </td>

        <td><label>Participante adicional</label><input type="text" id="padicional" name="padicional" class="form-control" disabled></td>


        <td class="col-md-1"><label>Fecha de Ejecución</label>
        <input type="date" name="fecha_inicio[]"  value="<?php echo date('Y-m-d') ?>"  class="form-control"/></td>

        <td class="col-md-1"><label>Fecha de Seguimiento</label>
        <input type="date"  name="fecha_final[]" value="<?php echo date('Y-m-d') ?>" class="form-control"/></td>



        <td class="eliminar"><label>Quitar</label><p></p><input class="btn btn-danger" type="button"   value="Menos -"/></td>

      </tr>



    </table>
    <div class="btn-der">
      <input type="submit" value="Registrar Actividad" class="btn btn-info"/>
      <button id="adicional" name="adicional" type="button" class="btn btn-warning"> Más + </button>

    </div>
    </div>

</form>

This is the javascript that increases

    $(function(){

    // Clona la fila oculta que tiene los campos base, y la agrega al final de la tabla
    $("#adicional").on('click', function(){
      $("#tabla tbody tr:eq(0)").clone().removeClass('fila-fija').appendTo("#tabla");




    });




    // Evento que selecciona la fila y la elimina 
    $(document).on("click",".eliminar",function(){
      var parent = $(this).parents().get(0);
      $(parent).remove();
    });





 });
</script>

javascript html

asked by Alexis Lozada 07.10.2017 в 16:01

source

1 answer

Replace string using pattern to get thumbnail from youtube close app from notification

score 1 · Accepted Answer

Good several things:

I recommend changing the id of all the elements per class, why? because as you are generating new rows are going to be with id repeated and good practices of html dictate that a id is a unique identifier and unrepeatable on the site.

If you are using jQuery to perform some functions use it also for the event change of select in question.

I leave you a code of how you should work correctly what you want to achieve:

<select  class="form-control" name="usuario[]" class="selectUsuario">

$(".selectUsuario").change(function(){
if($(this).val() == 'padicional'){
    $(this).parent().parent().find('#padicional').attr('disabled','disabled');
}else {
    $(this).parent().parent().find('#padicional').removeAttr('disabled');
}
})

I hope you serve, greetings!