-1

Buenas tardes se tiene el siguiente código HTML y JQUERY, lo que se desea hacer es poner en el <input type="text" id="txt-nombre"> el nombre de la variable "nombre" que ya está creado en el JQUERY y al darle "Click" en el botón debe de salir el siguiente mensaje: Hola juan.
Como pueden observar en el código JQUERY no me devuelve ningún valor, aunque creo que debería.

$(document).ready(function(){
    $(document).on("click","#btn-enviar",function () {
        var variable = $("#txt-nombre").val();
        var nombre = "Juan";
        var apellido = "Rodriguez";
        alert("Hola "+$("#"+variable).val());
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt-nombre">
<input type="button" value="Enviar" id="btn-enviar">

Entonces, ¿es posible hacer esto?, ¿hay alguna forma de llegar al resultado?.
Como siempre agradeciendo a las respuestas a este problema.

NOTA: Se desea colocar una variable en el <input type="text" id="txt-nombre"> (no colocar un valor, en su lugar debe ser una variable) y en un mensaje debe salir el "valor" de tal "variable" que se ingreso en la caja de texto.

0

5 respuestas 5

1

No se realmente que es lo que quieres pero si es que te salga el valor de la caja de texto te valdría con esto.

$(document).ready(function(){
    $(document).on("click","#btn-enviar",function () {
        var variable = $("#txt-nombre").val();
        var nombre = "Juan";
        alert("Hola "+variable);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt-nombre">
<input type="button" value="Enviar" id="btn-enviar">

0

En la pregunta planteas que:

... lo que se desea hacer es poner en el el nombre de la variable "nombre" que ya está creado en el JQUERY ...

En jQuery, el método para asignar el valor de un input es val(), como bien explica la documentación:

Set the value of each element in the set of matched elements.


Establece el valor de cada elemento en el conjunto de elementos coincidentes.

La sintaxis es la siguiente:

elemento.val(valor)

Donde elemento es el elemento HTML (en este caso el input); valor es el valor que quieres asignar a ese elemento, en este caso el contenido de la variable nombre.

Entonces, si lo que quieres es asignar el valor de nombre al input sólo tiene que hacer esto:

$("#txt-nombre").val(nombre);

La documentación dice que val() sirve también para obtener el valor actual del elemento. En ese caso, val() se usa sin ningún parámetro:

var variable = $("#txt-nombre").val();

En este caso, variable adquirirá el valor actual que haya en el input.

Viendo tu código, parece que lo que hay es una confusión entre asignar que se hace con elemento.val(valor) y obtener que se hace con elemento.val().

Prueba de asignar

$(document).ready(function(){
    $(document).on("click","#btn-enviar",function () {
        var nombre = "Juan";
        $("#txt-nombre").val(nombre);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt-nombre">
<input type="button" value="Enviar" id="btn-enviar">


Prueba de obtener

$(document).ready(function(){
    $(document).on("click","#btn-enviar",function () {
        var nombre=$("#txt-nombre").val();
        console.log(nombre);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt-nombre" value="María">
<input type="button" value="Enviar" id="btn-enviar">

0

pues realmente hay muchas formas de hacerlo. Varias de las respuestas de arriba son correctas.

Acá te paso otra.

    $(document).ready(function(){
    $(document).on("click","#btn-enviar",function () {
        var input = $("#txt-nombre");
        var nombre = "Juan";
        alert("Hola " + input.val());
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt-nombre">
<input type="button" value="Enviar" id="btn-enviar">

Lo que hago es crear una variable "input" y le asigno el objeto, por lo que puedo hacer uso de sus atributos y eventos.

0

De acuerdo con la documentación de JQuery, el método val sirve para obtener el valor actual del primer elemento que empate de varios.

Por ejemplo:

Si tienes un input en HTML con un value="Hola" así:

<input type="text" value="Hola" id="txt-nombre">

Para obtener el valor del atributo value sería así:

let contenidoCaja = $("#txt-nombre").val()
alert(contenidoCaja)

Dando en pantalla: Hola

Por lo tanto y con eso en mente, deberías modificar la línea del alert() de este modo:

alert("Hola "+"#"+variable);

Donde solo concatenamos los strings con la variable que contiene el value ingresado en el input por que lo que tratas es de asignar el valor del input en el mensaje del alert

EJEMPLO

    <input type="text" id="txt-nombre">
    <input type="button" value="Enviar" id="btn-enviar">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <script>
    $(document).ready(function(){
            $(document).on("click","#btn-enviar",function () {
                var variable = $("#txt-nombre").val();
                var nombre = "Juan";
                var apellido = "Rodriguez";
                alert("Hola "+"#"+variable);
            });
        });
    </script>

2
  • Hola @Aprendiz al ejecutar el código que me pasas solo muestra el valor de variable, pero en realidad lo que se quiere es que el valor que se ingresa en el campo de texto sea leída como una variable para luego mostrar su valor en un mensaje. Gracias por responder.
    – Daniel
    el 14 oct. 2019 a las 15:40
  • Añado el ejemplo @DanielR.Anccasi pues he probado lo que te respondí y funciona
    – user128299
    el 14 oct. 2019 a las 15:41
0

Bueno amigos la solución al problema se resolvería de la siguiente manera usando la función eval(), comparto el siguiente código por si alguien más le sirva el contenido.

$(document).ready(function(){
    $(document).on("click","#btn-enviar",function () {
        var variable = $("#txt-nombre").val();
        var nombre = "Juan";
        var apellido = "Rodriguez";
        alert("Hola "+ eval(variable));
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt-nombre">
<input type="button" value="Enviar" id="btn-enviar">

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.