1

Tengo el siguiente codigo en HTML

<form class="w3-center w3-padding-16" method="get" action="" >
    <input type="search" name="q" placeholder="Buscar en {{categoria}}" autofocus required>
    <input type="submit">                            
</form>

Cuando pongo algo en la busqueda se me añade "?=TEXTO_BUSCADO" y yo quiero que me redirija a un href tal que asi "example.com/TEXTO_BUSCADO"

2
  • ¿Puedes usar javascript? Con HTML no se va a poder
    – Rodrigo
    Commented el 7 mar. 2021 a las 23:50
  • No habria problema Commented el 7 mar. 2021 a las 23:51

1 respuesta 1

1

Puedes usar Javascript, de manera que prevenimos que el formulario se envíe y obtenemos el valor del input, finalmente redirigimos a la página

sendToUrlForm.addEventListener("submit", e => { // Escuchar cuando se envíe el formulario
  const sendUrl = "https://ejemplo.com"; // Url a redirigir
  e.preventDefault(); // Prevenir que se envíe
  location.href = sendUrl+"/"+sendToUrlForm.querySelector("[name=q]").value;
  // Será reenviado a "ejemplo.com/VALOR_DEL_INPUT"
});
<form class="w3-center w3-padding-16" id="sendToUrlForm" method="get" action="" >
    <input type="search" name="q" placeholder="Buscar en {{categoria}}" autofocus required>
    <input type="submit">                            
</form>

Usaremos querySelector para obtener un elemento dentro del form

Si el form cambia de id, es importante cambiarlo en el código JS también

En este caso, le he puesto id="sendToUrlForm", por lo tanto, para referirnos a el form, usamos sendToUrlForm en Javascript

1
  • Funciona a la perfeccion, muchisimas gracias ;) Commented el 8 mar. 2021 a las 0:09

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.