1

Me gustaría ejecutar una función antes de enviar un formulario, pero al parecer nunca se ejecuta, ¿es posible ejecutarla antes de enviarlo sin usar atributos como onsubmit="return funcion()" o enviarlo con ajax?

Formulario HTML

         <form action="search" method="GET" class="form-search" name="s-627">
            <div class="search-container">
                <input class="searchBox" type="search" name="q" id="searchTerm">
                <button class="btn-form searchButton">
                    <span class="icon-search">s</span>
                </button>
            </div>
        </form>

Código de JS

        let form = document.querySelector('.form-search')
            form.addEventListener('submit', (e) => {
              e.preventDefault()
              console.log('submit')
              //función a ejecutar antes de enviar
              saveSearch(input.value)
        })
2
  • Actualmente sería difícil realizarlo sin usar ninguno de los dos métodos que mencionas, yo te recomendaría hacerlo con el onsubmit, que va a exigir menos líneas de código. Commented el 8 sept. 2019 a las 19:27
  • @JonathanArias ¿Qué necesito hacer?
    – qwerty
    Commented el 8 sept. 2019 a las 19:33

3 respuestas 3

1

Podrías usar el evento click y ejecutar dentro la función y posteriormente forzar el submit. Algo como esto:

let form = document.querySelector('.form-search')
    form.addEventListener('click', (e) => {
      e.preventDefault()
      console.log('submit')
      //función a ejecutar antes de enviar
      saveSearch(input.value)
      
      form.submit();
})
<form>
 <input type="text" name="in" value="some data" />
 <button>Go</button>
</form>

1

Solo para clarificar, el proceso con el evento onsubmit sería realmente sencillo, ya que evitamos procesos elaborados:

document.getElementById("myForm").onsubmit = function() {
    res = saveSearch(input.value); //la función saveSearch deberá retornar true para poder que se cumpla.
    if(res){
        return true;
    } else {
        return false;
    }
};

La ventaja es que el return false restringiría el envío en caso de que no se logre cumplir la otra función.

0

Se me ocurre que primero definas un id en tu buttom y cambies de tipo ademas de agregar una funciona a su click, quedando así:

<button type="button" id="btn_prueba" class="btn-form searchButton" onclick="subir()">
    <span class="icon-search">s</span>
</button>

También asignale un id a tu formulario:

<form action="search" method="GET" id="my_form" class="form-search" name="s-627">

Entonces lo uníco que falta es hacer la función que asignaste al botón:

<script>
    function subir(){
        //aqui haces la llamada a otras funciones o realizas todo lo que quieres
        sumar(2,3);
        // y ahora subes el formulario
        document.getElementById("my_form").submit();
    }
    function sumar(a,b){
        return a+b;
    }
</script>

Espero te funcione.

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.