How to save value from JQuery $.post to a Javascript Global Variable

Question

I am using Javascript and JQuery.

I have the following Variable var RoleID=""; and I have placed it outside of all functions.

I have a function

role_submit(){
var role=$('#emp_role').val();
var url="submitrole.php";
$.post(url, {role2: role} ,function(data){
var RoleID=data;
alert(RoleID);
})
}

This function gets the value of an <input type="text" id="emp_role"> and submits to a url='submitrole.php' using JQuery $.post and gets back an ID from url='submitrole.php' in return which is saved in RoleID and afterwards RoleID is alerted. This all is executed using <button onclick="role_submit();" type="submit">Submit</button> and works fine meaning that the ID which should come from url='submitrole.php' comes accurately and is also alerted accurately.

The issue arises when I use following function to look at the global variable var RoleID

function alert_roleID(){alert(RoleID);}

I call to this function using

<button onclick="alert_roleID();" type="submit" >Role ID</button>

This time the alert pops up showing nothing rather than the ID I got back from url='submitrole.php'. How can I get the global variable RoleID to have the value of from url='submitrole.php'?

you post callback function defines a locally scoped RoleID which isn't the same as the globally scoped RoleID - that's how javascript works - remove var in the callback, and you will be updating the global RoleID — Jaromanda X
– Jaromanda X, Commented Dec 2, 2016 at 0:00

I wrestled a bear once. · Accepted Answer · 2016-12-02 00:07:14Z

1

There are two ways.

Set the variable to the window explicitly. Window is the global scope.

function role_submit(){
  var role=$('#emp_role').val();
  var url="submitrole.php";
  $.post(url, {role2: role} ,function(data){
    window.RoleID=data;
    alert(RoleID);
  })
}

Or define the variable in the global scope. If you do it this way, make sure you don't use var when you redefine it. If you use var it makes a new variable only visible in that scope (function).

var RoleID;
function role_submit(){
  var role=$('#emp_role').val();
  var url="submitrole.php";
  $.post(url, {role2: role} ,function(data){
    RoleID=data;
    alert(RoleID);
  })
}

answered Dec 2, 2016 at 0:07

I wrestled a bear once.

23.5k20 gold badges74 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aruna · Accepted Answer · 2016-12-02 00:06:53Z

0

Once you declared the variable outside, you should not use 'var' once again inside the function since this will recreate the local scoped variable instead of a global scoped variable and inaccessible outside the function. So you can remove the 'var' as below,

var RoleID = '';

role_submit(){
var role=$('#emp_role').val();
var url="submitrole.php";
$.post(url, {role2: role} ,function(data){
   RoleID=data;
alert(RoleID);
})
}

answered Dec 2, 2016 at 0:06

Aruna

12k3 gold badges31 silver badges42 bronze badges

Collectives™ on Stack Overflow

How to save value from JQuery $.post to a Javascript Global Variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related