2

Tengo un formulario de crear publicación donde hay checkboxs y inputs del tipo radio. Al enviar el formulario, se le da la opción al usuario de volver a crear otras publicaciones simplemente volviendo a hacer click en la misma opción de publicar sin tener que recargar la página. Para esto, al enviar la publicación, reseteo todos los input para que salgan vacíos y disponibles para llenarlos nuevamente con

$('.modal-dialog').find('input, textarea').val('');

Con los checkbox y los input hago lo siguiente:

$('input[type="radio"]').prop('checked', false);

El problema es que, si luego el usuario en su nueva publicación vuelve a checkearlos, se envían vacíos, como si no los hubieran seleccionado. Probé también con:

var allInp = document.getElementsByTagName('input');
for(i = 0; i < allInp.length; i++){
  if (allInp[i].type == 'radio' || allInp[i].type == 'checkbox'){
     allInp[i].checked = false;
 }
}

Pero el problema es el mismo. Cumplen su función de destildar todo lo seleccionado. Pero me deja los input radio y checkbox inutilizables para volver a seleccionarlos nuevamente.

¿Hay alguna forma de destildarlos todos, pero que queden disponibles para volver a ser seleccionados si el usuario así lo desea?

Muchas gracias

1
  • Creo que la pregunta es buena, pero debe reformularse un poco el título. No la edito porque no domino el tema Commented el 11 sept. 2022 a las 16:01

1 respuesta 1

1

El problema lo tienes en la línea en la que haces:

$('.modal-dialog').find('input, textarea').val('')

Le estás vaciando el valor incluso a los <input type="checkbox"> y a los <input type="radio"> y un input de estos tipos que no tenga valor, no se envía.

Tienes que controlarlo con algo como esto:

$(function () {
  const input = $('input, textarea')
  
  input.each(function () {
    const elemento = $(this)
    
    if (elemento.is('[type="checkbox"]') || elemento.is('[type="radio"]')) {
      elemento.prop('checket', false)
    }
    else {
      elemento.val('')
    }
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" value="1">
<input type="radio" value="2">
<input type="text" value="Hola">
<input type="number" value="3">
<textarea value="Hola como estás"></textarea>

De esta manera a los input que son tipo radio o checkbox se les cambia la propiedad checked a false y a los que son de cualquier otro tipo (incluidos los textarea) se les vacía el valor.

1
  • ¡Muchas gracias! Me había enfocado en que el problema era por el .prop(), y no se me pasó por la cabeza que podía ser por la anterior línea. Commented el 11 sept. 2022 a las 22:13

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.