0

Tengo un boton con una dirección de ejemplo

<a href='es.stackoverflow.com'>Visitar página</a>

y unos input:

<form action="">
parte 1 link: <input type="text" name="Complemento del link 1">
<br>
<br>
parte 2 link: <input type="text" name="Complemento del link 2">
</form>

lo que quiero lograr es que los datos que se ingresen en estos inputs sean complementos del link que se encuentra en el boton.

ejemplo, si ingreso en el input 1 'questions' y en el input 2 'ask' quedaría 'es.stackoverflow.com/questions/ask'

y al dar click en el boton me mande a la pagina, ¿cómo lo hago con javascript o jquery?

hay una pregunta similar, pero lo que quiero es que el link se complemente con los datos de los input. la dejo aquí por si no han entendido lo que quiero lograr:

¿Agregar parámetros a una url?

3
  • 1
    que has intentado?
    – user75901
    Commented el 18 mar. 2019 a las 5:23
  • de todo, pero apenas estoy aprendiendo javascript
    – Header90
    Commented el 18 mar. 2019 a las 5:28
  • Visita, por favor, esta pregunta en la que respondo a algo muy similar a lo que tu quieres: es.stackoverflow.com/a/246854/116189 Commented el 25 mar. 2019 a las 11:43

3 respuestas 3

1

Pues una forma de hacerlo es agregar un par de inputs con sus id, y añadir los datos a la url y luego hacer el redireccionamiento. Te dejo el un ejemplo de código hecho con jQuery. Te recomiendo tratar de hacerlo con JS puro.

<div>
  <h1>URL</h1>
  <!-- Esto se modifica visualmente para que el usuario sepa a donde va a ir. -->
  <h2>http://ejemplo.com/<span id="spanData1"></span>/<span id="spanData2"></span></h2>
  <!-- Estos son los inputs de data. -->
  <input type="text"id="data1">
  <input type="text"id="data2">
  <!-- Este botón hará la redirección -->
  <button id="ir">Ir</button>

</div>
// Variables para la modificación de URL
var data1 = ''
var data2 = ''

// Al usar un tecla y levantarla
$('#data1').keyup(function(){
    // Modificar la URL que se ve
  $('#spanData1').text($('#data1').val())
  // Guardar el dato en la variable correspondiente
  data1 = $('#data1').val();
})

// Hace lo mismo que el anterior pero para el segundo
$('#data2').keyup(function(){
  $('#spanData2').text($('#data2').val())
  data2 = $('#data2').val();
})

//Al hacer click en el boton ir
$('#ir').click(function(){
    // Crear la URL para la redirección y...
    var url = 'http://ejemplo.com/' + data1 + '/' + data2;
  // Hacer la Redirección en una ventana nueva
  window.open(url, '_blank');
})

Esta es solo una forma, hay muchas otra formas de hacerlo.

Si quieres ver el código funcionando usa este link: https://jsfiddle.net/COANelmejor/8wj7bkg9/20/

2
  • ya lo probé, pero sólo toma el dato ingresado en el input 1 más no el del 2.
    – Header90
    Commented el 19 mar. 2019 a las 0:39
  • Tienes razón olvidé agregar el segundo dato. Ya está corregido. Commented el 12 abr. 2019 a las 2:04
1

Asignandole IDs a los dos inputs y al anchor:

<a id="milink" href='https://www.stackoverflow.com'>Visitar página</a>

<form action="">
  parte 1 link: <input id="complemento1" type="text" name="Complemento del link 1">
  <br>
  <br>
  parte 2 link: <input id="complemento2" type="text" name="Complemento del link 2">
</form>

podemos correr el siguiente script:

<script>
  const milink = document.getElementById("milink");
  const complemento1 = document.getElementById("complemento1");
  const complemento2 = document.getElementById("complemento2");
  const urlOriginal = milink.getAttribute("href");
  let primerComplemento = "";
  let segundoComplemento = "";

  complemento1.addEventListener("input", configurarVariables);
  complemento2.addEventListener("input", configurarVariables);

  function configurarVariables(e) {
    const valor = this.value;
    const id = this.getAttribute("id");
    cambiarTexto(valor, id)
  }

  function cambiarTexto(texto, complemento) {
    if (complemento === 'complemento1') {
      primerComplemento = texto;
      const nuevaUrl = `${urlOriginal}/${primerComplemento}/${segundoComplemento}`;
      milink.setAttribute("href", nuevaUrl);
    } else {
      segundoComplemento = texto;
      const nuevaUrl = `${urlOriginal}/${primerComplemento}/${segundoComplemento}`;
      milink.setAttribute("href", nuevaUrl);
    }
  }
</script>

Lo que el script anterior hace: milink, complemento1 y complemento2 son constantes que representan los elementos html con los respectivos ids.

urlOriginal es el valor del href del anchor.

primerComplemento y segundoComplemento son variables que guardarán el estado de las variables.

complemento1 y complemento2 tendrán event listeners que llamarán a la función configurarVariables

configurarVariables obtendrá el valor del input y el id a travez de la función this.

luego se pasarán a otra función llamada cambiarTexto que verificará cuál es el complemento que al que se le está haciendo el cambio, luego cambiará el valor correspondiente en primerComplemento o segundoComplemento, para finalmente cambiar el valor final de la url con una template literal que es básicamente concatenación de strings(valor1 + valor2 + valorn) pero en es6

1

mmm... bueno tambien soy algo nuevo en esto y es por eso que trato de simplificar las cosas al maximo. Sino es la solucion al menos tratare de mostrarte el camino:

1) Puedes crear un enlace con la direccion directa:

<a href='es.stackoverflow.com/questions/ask'>Seccion preguntas</a>

2) Prueba con lo siguiente, luego agregas la variable "z" a un "window.open" o a un "location.href" a ver como te va.

function valores() {  
  var w = document.getElementById("myInput").value;
  var x = document.getElementById("myText1").value;  
  var y = document.getElementById("myText2").value;
  var z = w + "/" + x + "/" + y;
  
  document.getElementById("url").innerHTML = z;
}
<input type="hidden" id="myInput" value="es.stackoverflow.com">
<input type="text" id="myText1" value="questions">
<input type="text" id="myText2" value="ask">

<button onclick="valores()">Obtener datos</button>
<br>
<p id="url"></p>

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.