1

Quiero personalizar una URL a partir de un único dato, en este caso nombre. Al enviar abriría una nueva ventana añadiendo al final de la URL el nombre que coloqué en el input.

Por ejemplo: ingreso la palabra veterinaria y la nueva pestaña saldría palabras.com/veterinaria.

Espero puedan ayudarme. Éste es mi código:

<form id='form'>
  <label for="nombre">Ingresar nombre:</label>
  <input type="text" id="nombre" name="nombre">
  <li class="button">
    <button type="submit">Enviar</button>
  </li>     
</form>

Y así se ve el formulario:

introducir la descripción de la imagen aquí

4
  • 1
    Tendrias que empezar a probar algo, y cuando te trabes mostras como vas y asi te podemos ayudar. De cero no tiene gracia. Lo que yo haria seria, guardar en una variable la primer parte de la url (sin el nombre personalizado) y en otra variable guardaria el nombre.Al dar click en enviar pasarian 3 cosas: Se guarda la variable del nombre, se concatena en la variable de la url y se redirecciona a esta url
    – Agustin G.
    Commented el 6 jun. 2020 a las 19:43
  • 2
    debes colocar aquello que haz intentado en codigo, aunque tu duda puede ser resuelta redirigiendo al usuario por metodo GET mediante el mismo formulario hacia la misma ventana, seguro que deseas que en vez de ello se abra otra ventana?
    – Layer
    Commented el 6 jun. 2020 a las 19:43
  • favor de ayudarme agregué un poco de código
    – GianMarco
    Commented el 6 jun. 2020 a las 20:51
  • @GianMarco no incluyas la respuesta en tu pregunta. Basta con que la marques como aceptada (que ya hiciste). Saludos.
    – Alvaro Montoro
    Commented el 7 jun. 2020 a las 4:06

1 respuesta 1

1

Yo utilicé este html

    <form id='form'>
    <label for="nombre">Ingresar nombre:</label>
    <input type="text" id="nombre" name="nombre">
    <li class="button">
        <button type="submit">Enviar</button>
    </li>     
    </form>

Añade el siguiente codigo js para redireccionar la pagina

$('#form').submit(function (event){
     event.preventDefault();
     let sitio = 'http://palabras.com/';
     let url = site + $('#nombre').val();
     window.location.replace(url);
});

EDIT: necesitas JQuery lo puedes añadir a tu html, hay varias formas, yo personalmente para desarrollar utilizo JQuery local, en este enlace está bien explicado https://www.tutorialesjquery.com/2019/01/17/como-insertar-jquery-en-un-proyecto/

Aquí muestran las diferentes formas de añadir un fichero JavaScript a tu html https://www.google.com/amp/s/www.hostinger.es/tutoriales/insertar-javascript-en-html/amp/

Saludos, espero sea de ayuda.

5
  • Amigo utilice tu código, pero como estoy aprendiendo quisiera saber como insterto codigo JS.
    – GianMarco
    Commented el 7 jun. 2020 a las 1:44
  • el resultado sale asi localhost/?nombre=palabra, no hay forma de eliminar "?nombre=
    – GianMarco
    Commented el 7 jun. 2020 a las 1:46
  • 1
    Es que no tienes agregado el jquery.js al parecer, voy a editar la respuesta para que tengas toda la info dónde buscar y como añadir los scripts. pD: es amiga :D Commented el 7 jun. 2020 a las 2:50
  • Señorita Claudia en primer lugar me disculpo por la confusión. Así mismo muchas gracias tienes toda la razón, tenia que instalar JQUERY, te agradezco infinitamente por tu código y por las recomendaciones que diste, un saludo y cuídate mucho.
    – GianMarco
    Commented el 7 jun. 2020 a las 3:49
  • Me alegro mucho, un gusto. Saludos Commented el 7 jun. 2020 a las 4:58

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.