Mike
Mike

Reputation: 23

jquery variable not being sent

I'm extremely new to jQuery and JS. I've looked around a bit and haven't found an answer that clicks in my head.

I'm doing the typical one dropdown content depends on another's choice. I have it completely working except the part where it pulls the variable from the first dropdown box.

Here's what I have for code:

HTML:

<p>Processor Assignment *<br><small>Please Choose the Processor whom you are assigning this Serve.  Only Network Member Providers are shown in this list.</small></p>
<select name="assigned_to" id="assigned_to">
   <option value="2">test</option>
   <option value="3">Test_Processor</option>
</select>

<p>Service Type*</p>
<p id="services_list">Please choose a processor.</p>

The JS:

$(document).ready(assigned_to_selectbox_change);

function assigned_to_selectbox_change() {
    $('#assigned_to').change(update_services_list);
}

function update_services_list() {
    var processor_id = $('#assigned_to').attr('value');
    $.get('http://example.com/path/to_ajax/method/' + processor_id, show_services_list);
}

function show_services_list(services) {
    $('#services_list').html(services);
}

if I hardcode it, IE http://example.com/path/to_ajax/method/3 this all works swimmingly. Everything populates as expected.

Any idea why it's not picking up the assigned_to value? I have confirmed that PHP/MySQL/etc is working correctly and returning correct results when a variable is passed.

Upvotes: 1

Views: 53

Answers (1)

Jason P
Jason P

Reputation: 27022

Try .val() instead of .attr('value'):

 var processor_id = $('#assigned_to').val();

Also, if there isn't a specific reason you're splitting your code into so many functions, I find this to be more concise:

$(document).ready(function() {
    $('#assigned_to').change(function() {
        $.get('http://example.com/path/to_ajax/method/' + this.value, function(services) {
            $('#services_list').html(services);
        });
    });
}));

Upvotes: 4

Related Questions