Use a variable outside the function jquery

Question

How I Can use a variable outside the function where it was declared?

Wanna Edit for full code, for more help in my case..

$(document).ready(function(){
 var bank_id = null;
 var purpose_id = null;
 $('#bank_id').on('change',function(e)
 {
 bank_id = e.target.value;
 });
 $('#purpose_id').on('change',function(e)
 {
 purpose_id = e.target.value;
 });
 var data = {
 "purpose_id" : purpose_id,
 "bank_id" : bank_id
 };
 $.post("financialLoans/getRates", data, function(result){
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" required="" id="bank_id" name="bank_id"><option selected="selected" value="">Select</option><option value="1">Foo.</option><option value="2">bar</option>
</select>
<select class="form-control" required="" id="purpose_id" name="purpose_id"><option selected="selected" value="">Select</option><option value="1">Foo.</option><option value="2">bar</option>
</select>

• vol7ron: you're using it outside the function, but its being executed immediately. If you want it to execute after there is a change, then you should put the conditional block inside the function.
• tik27: They way you have it the if gets executed immediately. Either you have to have the change call the function or have a watch that kicks off when the variable is changed
• Samuel Viana: i need outside of function for comparation with another dropdown

Answer 1

You can use var outside of all functions(same as global scope) to declare a global variable.
Note: var will scope variable where it resides, outside of the function is the global scope (or the window object, same as the second example)

var myGlobalVariable;
$('#bank_id').on('change',function(e) { ... });

Or, you can use window property:

$('#bank_id').on('change', function(e) {
 window.myGlobalVariable = ...
});

---

Snippet example:

//global variable
var globalVar = null;
$(document).ready(function(){
 //NOTE: bank_id is inside $(document).ready() scope, not global. But you still can use bank_id whenever you want inside this one.
 var bank_id = null;
 
 $('#bank_id').on('change',function(e) {
 //using bank_id inside $(document).ready() scope! :)
 bank_id = parseInt(e.target.value);
 globalVar = e.target.value;
 });
 
 $('#another_input').on('change', function(e) {
 //checking bank_id in another function! :D
 if(bank_id == 1){
 alert("Second input: " + e.target.value + " and bank_id is 1!");
 }else{
 alert("bank_id isn't 1. :(");
 }
 alert("Global variable changed too, it was null, and now have the same value as bank_id.\nCalling by name: " + globalVar + ".\nAnd calling by window object: " + window.globalVar + ".");
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="bank_id"/>
<input type="text" id="another_input"/>

• Diablo: This is exactly what I was going say as well. If you need it 'everywhere' you are referring to global scope.

Answer 2

Just pass the variable from the event handler inside some function:

$(document).ready(function(){
 var bank_id = null;
 $('#bank_id').on('change',function(e)
 {
 bank_id = e.target.value;
 changeSomething(bank_id);
 });
 function changeSomething(bank_id) {
 if(bank_id === "1"){
 console.log(bank_id);
 }
 }
});