CODEWITHSUNDEEP
javascriptjquery
ilovedoingwebsites
ilovedoingwebsites

Reputation: 97

jquery get value from a select tag and use it in a click function

I have a dropdown select that I need to get the value from and put it inside the glassCode variable. I can get the value and display it on an alert box inside the change event. But, when I try to use it outside the change event I get nothing.

<form id="form1" name="form1" method="post">
    <select id="glassProduct">
        <option value="GI032">GI032 CLEAR FLOAT 3.2MM</option>
        <option value="GI040">GI040 CLEAR FLOAT</option>
    </select>
    <input type="button" name="calculate" id="calculate" value="Calculate">
    <input type="reset" value="Clear" />
</form>

The Jquery:

$("#glassProduct").change(function(){
    var glassCode=$(this).val();
    alert(glassCode);//this gives me the code
});//end of on change glassProduct

$("#calculate").click(function(){
    console.log("glass code: " +glassCode);//this gives me the same all the time
});

Upvotes: 1

Views: 433

Answers (4)

AlexBerd
AlexBerd

Reputation: 1504

If you do not need to use glassCode variable in global scope, there is no need to store it, just use Jquery selected in order to get select selected value:

    var glasscode;
    $("#calculate").click(function(){
      glasscode=$('#glassProduct option:selected').text()
      alert(glasscode);
    });

JSFIDDLE

Upvotes: 1

Gary
Gary

Reputation: 1247

I think you should know about the Scope and Scope Chain of Javascript

Understanding Scope and Context in JavaScript

the problem of your code is that the glassCode in change is not in the same scope with the one in click,although they have the same name.

so the Jquery should be 

var glassCode; // share the same scope in two function
$("#glassProduct").change(function(){
    glassCode=$(this).val();
    alert(glassCode);
});

$("#calculate").click(function(){
    console.log("glass code: " +glassCode);
});

Upvotes: 2

shilpa jain
shilpa jain

Reputation: 11

<form id="form1" name="form1" method="post">
<select id="glassProduct">
<option value="GI032">GI032 CLEAR FLOAT 3.2MM</option>
<option value="GI040">GI040 CLEAR FLOAT</option>
</select>
<input type="button" name="calculate" id="calculate" value="Calculate"><input type="reset" value="Clear" />
</form>
var glassCode;

$("#glassProduct").change(function(){
 glassCode=$(this).val();
        alert(glassCode);
//this gives me the code
});//end of on change glassProduct

$("#calculate").click(function(){

console.log("glass code: " +glassCode);//this gives me the same all the time
});

http://jsfiddle.net/Shilpa26/f7m94x9x/

Upvotes: 0

Rick Viscomi
Rick Viscomi

Reputation: 8852

Within the callback function, you declare var glassCode=$(this).val() which is a local variable. "Local" in this case refers to the callback function itself. That is also to say that the variable is out-of-scope from outside of this function.

To access glassCode from within another function, like the click handler, you need to define it on some object with global scope. The most straightforward way would be to define it on the global window object. However, this is generally frowned upon because it's easy to clutter the top-level object with many individual variables. The workaround is to use a namespace specific to your application. Consider this instead:

$("#glassProduct").change(function(){
  glass = window.glass || {};
  glass.glassCode=$(this).val();
  alert(glassCode);
});//end of on change glassProduct

$("#calculate").click(function(){
  console.log("glass code: " +window.glass.glassCode);
});

Upvotes: 0

Related Questions