Checkbox generated by default in append sends wrong value

-1

Hi I explain, I have a script that generates inputs dynamically, it worked perfectly, the detection of checkboxes with this code:

$(document).on("change", "input[type='checkbox']", function() {
    var checkbox_val = ( this.checked ) ? 'Si' : 'No';
    $(this).siblings('input.checkbox_handler').val(checkbox_val);
});

The problem was that by default I did not show any input so I added one statically, the problem is that now when I checkbox frames it sends me a wrong value, if I frame it for example it gives me the opposite value. This is my complete code:

<script>



$(document).ready(function() {
    var max_fields      = 10;
    var wrapper         = $(".container1");
    var add_button      = $(".add_form_field");

     var selectproductos = "<?php $sql = "Select producto from productos"; $query = $db->prepare($sql);
    $query->execute();

       while($row = $query->fetch(PDO::FETCH_ASSOC)) {
    echo '<option>'.$row['producto'].'</option>';
       }
     ?>";

            var selectunidades = "<?php $sql = "Select unidad from unidades";

    $query = $db->prepare($sql);
    $query->execute();
       while($row = $query->fetch(PDO::FETCH_ASSOC)) {
    echo '<option>'.$row['unidad'].'</option>';
       }
     ?> ";

          $(wrapper).children('table').append('<tr>   <td> <select required name="productos[]"><option value="">Selecciona un Producto</option>'+selectproductos+'</select><td><select required name ="unidad[]"><option value="">Selecciona una unidad</option>'+selectunidades+'</select></td><td><input type="text" class="inputancho" name="cantidad[]" placeholder="cantidad" required="required"/></td><td><input type="date"  name="fecha_de_embarque[]" required="required"/></td>  <td> <textarea  rows="2" cols="30" name="notas[]" id="notas" maxlength="255"></textarea> </td> <td>    <input type="hidden" class="checkbox_handler" name="etiquetado[]" value="No" /><input type="checkbox" name="etiquetado_ck[]" value="Si" />   </td><td><a href="#" class="delete">Eliminar</a></<td></tr>'); //add input box


    var x = 1;
    $(add_button).click(function(e){
        e.preventDefault();
        if(x < max_fields){
            x++;
                var selectproductos = "<?php $sql = "Select producto from productos"; $query = $db->prepare($sql);
    $query->execute();

       while($row = $query->fetch(PDO::FETCH_ASSOC)) {
    echo '<option>'.$row['producto'].'</option>';
       }
     ?>";

            var selectunidades = "<?php $sql = "Select unidad from unidades";

    $query = $db->prepare($sql);
    $query->execute();
       while($row = $query->fetch(PDO::FETCH_ASSOC)) {
    echo '<option>'.$row['unidad'].'</option>';
       }
     ?> ";




$(document).on("change", "input[type='checkbox']", function() {
    var checkbox_val = ( this.checked ) ? 'Si' : 'No';
    $(this).siblings('input.checkbox_handler').val(checkbox_val);
});

        }
  else
  {
  alert('You Reached the limits')
  }
    });

   $(wrapper).on("click",".delete", function(e){
    e.preventDefault(); $(this).parent('td').parent('tr').remove(); x--;
})



});

$(document).keypress(function(e) {
    if(e.which == 13) {

        $("#botonagregarproducto").click();

    }
});

    $(document).on("change", "input[type='checkbox']", function() {
    var checkbox_val = ( this.checked ) ? 'Si' : 'No';
    $(this).siblings('input.checkbox_handler').val(checkbox_val);
});

$(document).trigger($.Event('keypress', { keycode: 13 }));

</script>

And so I do the post:

if(isset($_POST['Submit'])) {   
                $id_cliente = $_POST['id_cliente'];
        $orden_de_compra = $_POST['orden_de_compra'];//funcionando


            $productos= (is_array($_POST['productos'])) ? $_POST['productos'] : array();
        $unidad= (is_array($_POST['unidad'])) ? $_POST['unidad'] : array();

            $cantidad= (is_array($_POST['cantidad'])) ? $_POST['cantidad'] : array();

            $fecha_de_embarque= (is_array($_POST['fecha_de_embarque'])) ? $_POST['fecha_de_embarque'] : array();

            $notas = (is_array($_POST['notas'])) ? $_POST['notas'] : array();
            $etiquetado= (is_array($_POST['etiquetado'])) ? $_POST['etiquetado'] : array();
    
asked by Daniel Treviño 02.11.2017 в 18:43
source

2 answers

0

And if instead of doing the onChange in the $ (document) .on you do it this way

$("td input[type='checkbox']").on("change", function() {
    var checkbox_val = $(this).prop('checked') ? 'Si' : 'No';
    $(this).siblings('input.checkbox_handler').val(checkbox_val);
});
    
answered by 02.11.2017 в 19:17
0

I solved it by writing this immediately after my inputs by default:

$(document).on("change", "input[type='checkbox']", function() {
    var checkbox_val = ( this.checked ) ? 'Si' : 'No';
    $(this).siblings('input.checkbox_handler').val(checkbox_val);
});

And this is my complete code now:     

$(document).ready(function() {
    var max_fields      = 10;
    var wrapper         = $(".container1");
    var add_button      = $(".add_form_field");

     var selectproductos = "<?php $sql = "Select producto from productos"; $query = $db->prepare($sql);
    $query->execute();

       while($row = $query->fetch(PDO::FETCH_ASSOC)) {
    echo '<option>'.$row['producto'].'</option>';
       }
     ?>";

            var selectunidades = "<?php $sql = "Select unidad from unidades";

    $query = $db->prepare($sql);
    $query->execute();
       while($row = $query->fetch(PDO::FETCH_ASSOC)) {
    echo '<option>'.$row['unidad'].'</option>';
       }
     ?> ";

          $(wrapper).children('table').append('<tr>   <td> <select required name="productos[]"><option value="">Selecciona un Producto</option>'+selectproductos+'</select><td><select required name ="unidad[]"><option value="">Selecciona una unidad</option>'+selectunidades+'</select></td><td><input type="text" class="inputancho" name="cantidad[]" placeholder="cantidad" required="required"/></td><td><input type="date"  name="fecha_de_embarque[]" required="required"/></td>  <td> <textarea  rows="2" cols="30" name="notas[]" id="notas" maxlength="255"></textarea> </td> <td>    <input type="hidden" class="checkbox_handler" name="etiquetado[]" value="No" /><input type="checkbox" name="etiquetado_ck[]" value="Si" />   </td><td><a href="#" class="delete">Eliminar</a></<td></tr>'); //add input box

$(document).on("change", "input[type='checkbox']", function() {
    var checkbox_val = ( this.checked ) ? 'Si' : 'No';
    $(this).siblings('input.checkbox_handler').val(checkbox_val);
});


    var x = 1;
    $(add_button).click(function(e){
        e.preventDefault();
        if(x < max_fields){
            x++;
                var selectproductos = "<?php $sql = "Select producto from productos"; $query = $db->prepare($sql);
    $query->execute();

       while($row = $query->fetch(PDO::FETCH_ASSOC)) {
    echo '<option>'.$row['producto'].'</option>';
       }
     ?>";

            var selectunidades = "<?php $sql = "Select unidad from unidades";

    $query = $db->prepare($sql);
    $query->execute();
       while($row = $query->fetch(PDO::FETCH_ASSOC)) {
    echo '<option>'.$row['unidad'].'</option>';
       }
     ?> ";

          $(wrapper).children('table').append('<tr>   <td> <select required name="productos[]"><option value="">Selecciona un Producto</option>'+selectproductos+'</select><td><select required name ="unidad[]"><option value="">Selecciona una unidad</option>'+selectunidades+'</select></td><td><input type="text" class="inputancho" name="cantidad[]" placeholder="cantidad" required="required"/></td><td><input type="date"  name="fecha_de_embarque[]" required="required"/></td>  <td> <textarea  rows="2" cols="30" name="notas[]" id="notas" maxlength="255"></textarea> </td> <td>    <input type="hidden" class="checkbox_handler" name="etiquetado[]" value="No" /><input type="checkbox" name="etiquetado_ck[]" value="Si" />   </td><td><a href="#" class="delete">Eliminar</a></<td></tr>'); //add input box



$(document).on("change", "input[type='checkbox']", function() {
    var checkbox_val = ( this.checked ) ? 'Si' : 'No';
    $(this).siblings('input.checkbox_handler').val(checkbox_val);
});

        }
  else
  {
  alert('You Reached the limits')
  }
    });

   $(wrapper).on("click",".delete", function(e){
    e.preventDefault(); $(this).parent('td').parent('tr').remove(); x--;
})



});

$(document).keypress(function(e) {
    if(e.which == 13) {

        $("#botonagregarproducto").click();

    }
});

$(document).trigger($.Event('keypress', { keycode: 13 }));

</script>
    
answered by 03.11.2017 в 18:48