Micah Morris Micah Morris - 6 months ago 56
Javascript Question

JQuery variable inside button function

I need to grab a variable from a form when the button is clicked, and then process other functions.

This is the error:

jquery.min.js:6 Uncaught RangeError: Maximum call stack size exceeded

Here's the JQuery:

var value;
var callMe = function(){
value = document.getElementsByClassName("instr");

$('#container :button').click(function(event){


More JQuery. There's more if it's needed.

function doAjax(value) {
//var value , ajax;
var ajax;
//value = 'CCBOT'; // This variable works when hard coded.

//Pass the values to the AJAX request and specify function arg for 'done' callback
ajax = theAjax(value);
ajax.fail(function( jqXHR, textStatus, errorThrown) {
//Output error information

Here's the html form:

<div id="container" class="center">
<label for="instr">Select Instrument</label>
<select name="instr" id="instr" class="instr" value="">
<option value="WHCBOT">WHEAT-SRW - CHICAGO BOARD OF TRADE</option>
<option value="WHMGE">WHEAT-HRSpring - MINNEAPOLIS GRAIN EXCHANGE</option>
<option value="CCBOT">CORN - CHICAGO BOARD OF TRADE</option>
<option value="OCBOT">OATS - CHICAGO BOARD OF TRADE</option>
<input id="button" type="button" value="Get Chart">
<div id="response-container">
The chart will appear here..


Your hardcoded test is 'CCBOT', a string value.

Your "live" test is document.getElementsByClassName('instr'), an HTMLCollection.

Since an HTMLCollection is quite clearly not what jQuery is expecting, unexpected behaviour results and the outcome is an unhandled error coming from deep within jQuery's depths.

jQuery doesn't handle type mismatches particularly well, as it tends to be very forgiving (just like HTML is), but in the end it works well with proper input so chances are if an error comes from jQuery, it's because you passed it something wrong.

Did you mean:

value = $(".instr").val();