.val () no obtiene el valor actualizado de la entrada

Tengo dos campos de entrada y estoy tratando de obtener sus valores usando jquery haciendo clic en un botón. Parece una operación muy simple, pero por mi vida no puedo hacer que funcione. Aquí está el fragmento de código:

Name: 
Message:
name1 = $("#name").val(); line1 = $("#line").val(); $("#submitButton").click(function(){ alert("Name: " + name1 + "\nMessage: " + line1); });

Si no especifico el valor, la alerta regresa con indefinido para ambas variables. Si cambio los valores de la entrada y hago clic en el botón, todavía dice test1 y test2. Tiene que haber algo simple que me esté perdiendo aquí, ¿alguien sabe qué es?

En su código, obtiene los valores cuando se inicializa el script, y luego hace referencia al valor que tenían en ese punto en su función de clic en lugar de obtener el valor actual.

Tratar:

 $("#submitButton").click(function(){ name1 = $("#name").val(); line1 = $("#line").val(); alert("Name: " + name1 + "\nMessage: " + line1); }); 
 name1 = $("#name").val() 

crea una nueva cadena string name1 que tiene el valor de $("#name").val() tal como está en este momento. .val() no recibe llamadas cada vez que intenta acceder a name1 . Lo más sencillo sería usar $("#name").val() lugar.

http://jsfiddle.net/wTvku/

Como se mencionó en otras respuestas, el problema es que usted está activando previamente las variables y esperando que éstas cambien mágicamente. Sin embargo, yo sugeriría fuertemente usar Vanilla JS

 document.getElementById('submitButton').onclick = function() { var name1 = document.getElementById('name').value, line1 = document.getElementById('line').value; alert("Name: " + name1 + "\nMessage: " + line1); }; 

debe envolver su código dentro del evento document.ready () …

 $(document).ready(function() { name1 = $("#name").val(); line1 = $("#line").val(); $("#submitButton").click(function(){ alert("Name: " + name1 + "\nMessage: " + line1); }); // Handler for .ready() called. }); 

Has establecido valores de variables fuera de la función de clic. El valor se establece en la carga de la página, no siempre que ejecute la función. Prueba esto:

 Name: 

Mensaje:
Enviar

… $ ( “# SubmitButton”) haga clic en (function () {nombre1 = $ ( “# nombre”) val (); línea 1 = $ ( “# line”) val (); alert ( “Nombre:” + nombre1 + “\ nMessage:” + línea 1);});