return value from jquery function

Question

Possible Duplicate:
jQuery ajax return value

I have this jQuery script:

$('#headerSubmit').click(function() {
    var source = $('#header').attr('value');
});

that gets the value attribute of the element and stores it in the source variable.

How do I return the source variable to use in the rest of the script?

Thanks.

Answer 1

As you would be setting the source variable after a click, any code that uses that variable should be executed only after such event. Therefore, you should paste your code right after it:

$('#headerSubmit').click(function() {
    var source = $('#header').attr('value');
    // Rest of the code here
});

Otherwise, the variable wouldn't be initialized before a click.

Edit: Note all other answers incite you to declare the variable on global scope. This is useless unless your code executes after a click since the variable would be null.

Answer 2

var source;
$('#headerSubmit').click(function() {
    source = $('#header').attr('value');
});

Answer 3

Define var source outside of this click script. and use like this :

var source;
$('#headerSubmit').click(function() {
    source = $('#header').attr('value');
});

In this way 'source' will have global scope, and can be used anywhere with the assigned value later on.

Answer 4

Declare 'source' as global.

That is..

var source;
//your piece of jquery code
$('#headerSubmit').click(function() {
   source = $('#header').attr('value');
});

Answer 5

If you want source to be used in the entire script, declare it outside the function:

var source = null;
$('#headerSubmit').click(function() {
    source = $('#header').attr('value');
});

Answer 6

You can return a variable with

 return source;

Sounds like you probably are just trying to call that variable later in the script. This is a problem with scope. If you take out the var and just declare

source = $('#header').attr('value');

You will be able to call that variable in other parts of your script.

Answer 7

The way you are using it is asynchronous. You are setting a callback which is triggered on the "click" event. To have it available to the rest of the script, you have two options.

1. use a global variable. (using this is bad sometimes though)

   var myGlobalVariable;
   $('#headerSubmit').click(function() {
       var myGlobalVariable = $('#header').attr('value');
   });
   

2. Call the function that needs this value inside the callback.

   function myAnotherFunction(val){
        alert("I received" + val + ". I will update my set of"
             +" variables without putting it as global variable");
   }
   
   $('#headerSubmit').click(function() {
       myAnotherFunction($('#header').attr('value'));
   });
   

Answer 8

var source;
$('#headerSubmit').click(function() {
    source = $('#header').attr('value');
   return source;
});

Answer 9

To declare a variable in the global scope, you must initialize it before you try setting it in a function, otherwise the declaration is only applicable to the local scope. If you get your scopes wrong then your references will be invalid and you can expose yourself to bigger issues.

In this case, you will be unable to reference the variables value elsewhere in your script as you are intending to do since the variable only exists within your function currently.

Per MDN:

When you declare a variable outside of any function, it is called a global variable, because it is available to any other code in the current document. When you declare a variable within a function, it is called a local variable, because it is available only within that function.

var source;
$('#headerSubmit').click(function() {
    source = $('#header').attr('value');
});