Skip to main content
se añadieron 320 caracteres en el cuerpo
Origen Enlace
lois6b
  • 7.6k
  • 5
  • 33
  • 54
<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>

<script>
// 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())
})

//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');
})
</script>

// 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())
})

//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');
  console.log(url)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

<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>

<script>
// 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())
})

//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');
})
</script>

// 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())
})

//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');
  console.log(url)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Origen Enlace
Header90
  • 548
  • 3
  • 10
  • 31

jquery no toma la información del input

Tengo unos input que recogen la información ingresada y construye la otra parte del link:

<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>

<script>
// 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())
})

//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');
})
</script>

Lo que sucede es que solo toma la información del primer input y no la del segundo, por lo tanto cuando doy click en 'ir' me lleva a un link a medio construir, qué hago?