es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Captura y edita los datos del formulario antes de que el botón de envío sea presionado.

Captura y edita los datos del formulario antes de que el botón de envío sea presionado.

22 Jul, 2023 Programación

Necesito obtener los valores de las casillas de verificación antes de enviar el formulario usando vanilla JS o jQuery, modificar y continuar con el envío.
Por ejemplo:

<form name="myForm" method="post">

  <input type="checkbox" name="cbxs" value="cb_1">
  <input type="checkbox" name="cbxs" value="cb_2">

  <button type="submit">Enviar</button>
</form>

Necesito verificar si una sola casilla de verificación está marcada para envolverla en un arreglo como cbxs=['cb_1'], si se marcan 2 o más, no hacer nada. En este caso, el backend siempre recibe un arreglo de casillas de verificación como cbxs=['cb_1'] o cbxs=['cb_1', 'cb_2'].

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución

    Usando JavaScript puro, podemos agregar un event listener al botón de enviar del formulario y verificar los valores de las casillas de verificación antes de enviarlos. Si solo se selecciona una casilla de verificación, podemos modificar los datos del formulario para envolverlo en un arreglo.

    const myForm = document.querySelector('form[name="myForm"]');
const submitBtn = myForm.querySelector('button[type="submit"]');
submitBtn.addEventListener('click', function(e) {
  e.preventDefault(); // evitar el envío predeterminado del formulario

  const checkboxes = myForm.querySelectorAll('input[type="checkbox"]');
  const checkedCheckboxes = Array.from(checkboxes).filter(cbx => cbx.checked);
  if (checkedCheckboxes.length === 1) {
    const cbxValue = checkedCheckboxes[0].value;
    const newData = new FormData(myForm);
    newData.delete('cbxs');
    newData.append('cbxs[]', cbxValue);
    sendForm(newData); // función personalizada para enviar los datos del formulario
  } else {
    sendForm(new FormData(myForm)); // enviar los datos originales del formulario
  }
});

function sendForm(formData) {
  // función personalizada para enviar los datos del formulario
}

    Usando jQuery, podemos lograr el mismo resultado con un código más simple:

    $('form[name="myForm"]').on('submit', function(e) {
  e.preventDefault(); // evitar el envío predeterminado del formulario

  const checkboxes = $('input[type="checkbox"]');
  const checkedCheckboxes = checkboxes.filter(':checked');
  if (checkedCheckboxes.length === 1) {
    const cbxValue = checkedCheckboxes.val();
    const newData = $(this).serializeArray().filter(field => field.name !== 'cbxs');
    newData.push({ name: 'cbxs[]', value: cbxValue });
    sendForm($.param(newData)); // función personalizada para enviar los datos del formulario
  } else {
    sendForm($(this).serialize()); // enviar los datos originales del formulario
  }
});

function sendForm(formData) {
  // función personalizada para enviar los datos del formulario
}

    Ten en cuenta que en ambos ejemplos estamos evitando el envío predeterminado del formulario y llamando a una función personalizada para enviar los datos del formulario. Esta función debe modificarse según tus necesidades específicas, como invocar una solicitud AJAX al backend.

Comments are closed.