0

tengo el siguiente problema, tengo un formulario, donde al seleccionar una fecha me trae unos checkbox que me responde un json, todo depende del día que selecciono. El form tiene otros datos aparte, y mi guardar va con un submit. El problema se me genera que si completo todos los campos del formulario, menos los checkbox, me arroja la alerta que no seleccione ninguno (que eso esta bien, porque me esta validando el campo), pero de vuelta no me muestra los checkbox, los pierdo, solo me vuelven a aparecer si selecciono la fecha. Tengo mi siguiente código del formulario

 <form action="{{route('crear', array_merge(array("t"=>$tt)))}}" method="post" id="formValidacion" enctype="multipart/form-data" novalidate="true">
 {{ csrf_field() }}
 //Aca tengo más datos del form, como área, fecha, descripciones
   
 //Este div me trae los checkbox
 <div class="col-xl-12">
      <label>Seleccione</label>
      <div id="periodos"></div>
 </div>
   <button type="submit" class="btn btn-primary">Guardar<i class="icon-paperplane"></i></button>
 </form>

Y en mi jquery tengo esto:

<script>
     $(document).ready(function () {
          $('#fecha').change(function (){
                event.preventDefault();
                fecha=$(this).val();
                
                url="{{route('periodos')}}";
                $.getJSON(url, {e: fecha}, function (data) {
                    swal.close();
                    $("#periodos").html('');
                    var string1 = JSON.stringify(data);
                    var parsed = JSON.parse(string1);
                    $.each(parsed, function (i, item) {
                        $('#periodos')
                            .append('<input type="checkbox" id="' + item.Id + '" name="periodos[]" value="' + item.Id + '">')
                            .append('<label>' + item.Label + '</label></div>')
                            .append('<br>');
                    });
                })
            });
     });
</script>

Como lograr, si el form arroja error, mis checkbox sigan apareciendo, sin tener que seleccionar la fecha nuevamente? Ayuda por favor

8
  • ¿ te funciona ? <input type="checkbox" id="periodo" name="periodo" @if (old('periodo')) checked @endif>
    – Orici
    Commented el 4 may. 2021 a las 16:54
  • esto: $('#periodos').append( esta insertando los checkbox dentro del checkbox inicial, eso esta mal diseñado y programado y los checkbox se eliminan si ocurre algun evento que le haga trigger al campo de fechas.
    – user46896
    Commented el 4 may. 2021 a las 16:55
  • @Orici edité mi código, porque me equivoqué
    – Karli
    Commented el 4 may. 2021 a las 18:08
  • @FranciscoNúñez entiendo que esto $('#periodos').append inserta, yo me equivoqué en el código del formulario, lo he modificado, para ver si me pueden orientar con mi pregunta, gracias
    – Karli
    Commented el 4 may. 2021 a las 18:09
  • primero que nada cuando trabajas con jquery y ajax debes usar funciones delegadas: esto $('#fecha').change(function (){ debería de ser: $(document).on('change','#fecha', function (){
    – user46896
    Commented el 4 may. 2021 a las 20:40

1 respuesta 1

0

Lastimosamente el ejemplo dado no es reproducible así que intentaré crear un ejemplo que ejecute una funcionalidad lo mas cercano posible a lo que intentas realizar:

var data ={1:true,2:false,3:true};
$(document).ready(function(){
  console.log('Documento Ready');
  $(document).on('change','#fecha',function (){
    event.preventDefault();
    console.log('click en #Fecha');
    let container = $("#bloques");
    container.html('');
    for (var node in data) {
    //analizamos la data obtenida desde el ajax, la concatenamos y la colocamos dentro de div contenedor:
      container.append('<input type="checkbox" id="checkbox_' + node + '" name="periodos[]" value="' + node + '"><label>' + data[node] + '</label><br>');
    }
  });
});
<form method="post" id="formValidacion" enctype="multipart/form-data" novalidate="true">
   <select id="fecha">
      <option value="1">Opción 1</option>
      <option value="2">Opción 2</option>
   <select>
   <div class="col-xl-12">
      <label>Seleccione</label>
      <div id="bloques">
         <!-- Aqui deben aparecer los CheckBox -->
      </div>
   </div>
   <button type="submit" class="btn btn-primary">Guardar<i class="icon-paperplane"></i></button>
 </form>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.