Concatenar string con JQuery
Bienvenidos a Vertutoriales.com, en esta ocasión y respondiendo a la duda de un seguidor, os voy a explicar como concatenar una variable a una cadena y almacenarla en otra con JQuery.
Como tampoco tiene mucho que explicar, veamos el código directamente:
Por un lado tendríamos una caja de texto:
[codesyntax lang=”html4strict”]
<input id="dominio" type="text" />
[/codesyntax]
Y por otro un código en JQuery:
[codesyntax lang=”javascript”]
<script>
var dominio = "http://webmail."+$("#dominio").val();
</script>
[/codesyntax]
En este ejemplo, estaríamos añadiendo el valor de la caja con el id=”dominio” y lo estaríamos uniendo a un valor de string llamado “http://webmail.”, a la hora de concatenar simplemente se añade el signo de “+”
Así de rápido y sencillo. Os dejo el código completo para copiar y pegar:
[codesyntax lang=”html4strict”]
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function redireccion(){
var dominio = "http://webmail."+$("#dominio").val();
window.location.href=dominio;
}
</script>
</head>
<body>
http://webmail.<input id="dominio" type="text" />
<button onClick="redireccion();">Ver Correo</button>
</body>
</html>
[/codesyntax]
Recordad que para este ejemplo necesitamos insertar la librería de JQuery tal y como se muestra en el vídeo tutorial.
Si os ha gustado compartid! sino… podéis exponer vuestros comentarios más abajo 😉
Comments
compadre revisa de web por que tu los esta malo no se si as piyado en el responsive como se clona las imagen
Señor X no te entiendo 🙂
Saludos
Un poco antiguo esto pero es lo único que he encontrado para que se acerca a lo que necesito.. me podrán ayudar? …. he usado tu código y funciona muy bien, pero lo que necesito es concatenar 3 partes de una dirección…. por ejemplo.. la primera http://www. la segunda que seria lo que se escribe en el cuadro de texto por ejemplo (123) – y el resto por ejemplo .sistemas.com…. así al darle al botón de ir, me arme la dirección http://www.123.sistemas.com
Espero me puedan ayudar con esto, muchisimas gracias
Buenas Gabriel, el código es el código, no pasará de moda siendo la misma tecnología. Con respecto al código, en principio sería seguir exactamente el mismo ejemplo del que concatenamos la url.
var dominio = “http://www.”+$(“#dominio”).val()+”.sistemas.com”;
window.location.href=dominio;
No tendría más código, simplemente concatenamos a continuación.
Ya me dices si te soluciona la idea que tienes, sino deberás de definirme mejor el problema! 🙂
Ya me dices! Salud!
Saludos Carlos DK
Perfectísimo! me sirvió muy bien, mil gracias por tomarte el tiempo y echarme la mano. se agradece mucho.
Nada, el blog aparte de para consultas propias (en plan recordatorio) también es una manera de devolver todo lo que he sacado de internet y ayudar a la comunidad 😉
Si te apetece suscríbete a Youtube/Facebook/Twitter 🙂
Hola amigo, he seguido las instrucciones del video, y solo he modificado la parte inicial de la url, pero sencillamente cuando doy clic no me redirige a nunguna parte, incluso cuando solo copio y pego el codigo que colocaste e intento realizar el mismo ejemplo del video.
¿Que puede estár pasando?
Gracias
Te recomendaría utilizar el inspector de elementos para ver qué mensaje te devuelve para poder saber lo que está pasando. Con un simple “no me funciona” no puedo tener ni idea.
Aunque revisando el código. Mira si es por que estás haciendo la llamada en http en vez de https, actualmente los navegadores están forzando https por seguridad y puede ser que no te esté cargando la librería. Igualmente, esta información te aparecerá en el inspector de elementos 🙂
Salud!
Hola Amigo, he seguido tus instrucciones y nada, seráa que observando el codigo se podrá encontrar el error: Disculpa, explicas muy buen, pero soy nueva en esto:
function redireccion(){
var dominio = “https://sites.google.com/contabiligroup.com/”+$(“#dominio”).val();
window.location.href=dominio;
}
https://sites.google.com/contabiligroup.com/
Continuar
El código está correcto, pero ten en cuenta que:
1.- Es necesaria la librería JQuery para ejecutar ese código.
2.- Que la caja de texto () tiene que tener el valor id=”dominio”
3.- Finalmente llamar a la función redireccion 🙂
Es interesante que aprendas a utilizar el inspector de elementos. Cualquier navegador lo integra, por ejemplo Chrome o Firefox, si pulsas con el botón derecho sobre la pantalla aparecerá la opción de “inspecionar”, desde ahí pulsa en la pestaña “console” y es posible que tengas algún error. Si lo tienes. Pégalo en el comentario para poder ayudarte 😉
Suerte!
Hola Carlos
corrí el codigo en un editor y funciona muy bien, pero cuando lo corró en WordPress no va bien, dado que el editor borra el fragmento cuando llama la funcion: onClick=”redireccion();”,,, no sé por qué sucede,,, Yo uso el maqueteador “WPBakery Visual Composer”
soy nuevo en el tema
Gracias
Buenas Gustavo, hasta donde sé, no puedes meter código directamente desde el editor. Tampoco tengo grandes conocimientos de WP, pero supongo que podrás añadirlo a las funciones generales de WP para poder utilizarla desde cualquier sitio.
Prueba a incluir el onClick como un script en vez de la propia etiqueta como si fuera en un js.
gracias Carlos
me funciono super como me dijiste,, lo hice asi:
en header.php pegas:
en footer.php pegas, cambias url tuya (la mia es la que aparece):
var dominio = “http://viajes.guiaplanet.co/”+$(“#dominio”).val();
var btn = document.getElementById(“buscar-vuelos”);
btn.onclick = function(){window.location.href=dominio;}
en html pegas, cambias url tuya:
Buscar vuelos
En los comentarios tampoco te deja XD, pero me alegro que te sirva. Por ayudar, si puedes poner el código sin las etiquetas script… a ver si así funciona.
Aún así gracias por volver y comentar el resultado funcional 🙂