Making Java Script global variables - php

Question

I am using the var function to create variables so that I can use them in PHP So I can use the post function, Basically I imported them in javascript.
Anyway how do I make them global variables?
Ive tried including them in the document.ready function or even before the code starts executing document.ready function. it be alot neater then just repeating those var everywhere.
Here is the code
$(document).ready(function () {
var user_login = $('#user_login').val();
var user_pass = $('#pass_login').val();
$('#field').keyup(function (e) {
if (e.keyCode == 13) {
//If enter is pressed vailidate the form
e.preventDefault();
$.ajax({
url: 'ajax/check.php',
type: 'post',
data: {
user_login: user_login,
pass_login: user_pass
},
success: function (data) {
$('#content').html(data);
}
});
};
});
$('#submit').click(function (e) {
if (e.keyCode != 13) {
$.ajax({
url: 'ajax/check.php',
type: 'post',
data: {
user_login: user_login,
pass_login: user_pass
},
success: function (data) {
$('#content').html(data);
}
});
}
});
});

Answer 1

You probably dont want them to be global, as there is no reason. As you have this coded now the variables will be evaluated only once as soon as the document is ready which will be before a user has entered anything in your form fields. You want to evaluate them in your onkeyup handler or on submit of the form so that you have the current values. Im not sure that your check.php does but it should look something like this:
$(function(){
$('form#theform').submit(function(e){
e.preventDefault();
var user_login = $('#user_login').val(),
user_pass = $('#pass_login').val();
// you ajax submit here
});
$('#field').keyup(function(e){
e.preventDefault();
var user_login = $('#user_login').val(),
user_pass = $('#pass_login').val();
// do your validation, if successful then do: $('theform').trigger('submit');
});
});
The reason you dont want to use globals here is because you ALWAYS need the most recent input. If you use a global variable then there is no way to tell that you have the most recent input because things are going to get out of sync.

Answer 2

Global is probably not the way to go here. It sounds like you are more interested in reducing the duplicate code? You could refactor the current code into something like:
$(document).ready(function () {
function submitForm() {
var user_login = $('#user_login').val();
var user_pass = $('#pass_login').val();
$.ajax({
url: 'ajax/check.php',
type: 'post',
data: {
user_login: user_login,
pass_login: user_pass
},
success: function (data) {
$('#content').html(data);
}
});
}
$('#field').keyup(function (e) {
if (e.keyCode == 13) {
//If enter is pressed vailidate the form
e.preventDefault();
submitForm();
};
});
$('#submit').click(function (e) {
if (e.keyCode != 13) {
submitForm();
}
});
});

Answer 3

You need to call .val() on your input each time you want to get the current value of the inputs. If you only call it once at the beginning, the variables won't stay up-to-date as the user types in the inputs.
Do something like this:
$(document).ready(function() {
// Make a function that returns the data, then call it whenever you
// need the current values
function getData() {
return {
user_login: $('#user_login').val(),
user_pass: $('#pass_login').val()
}
}
function check(e) {
e.preventDefault();
$.ajax({
url: 'ajax/check.php',
type: 'post',
data: getData(), // get current values
success: function (data) {
$('#content').html(data);
}
});
}
// Don't repeat so much; use the same function for both handlers
$('#field').keyup(function(e) {
if (e.keyCode == 13) check(e);
});
$('#submit').click(function(e) {
if (e.keyCode != 13) check(e);
});
});