How to call another script when one has been selected

[rdkurth]

How can I call another script and pass a id so I can fill another drop down pulling data from mysql. I have added the scripts below I just don't understand how to call them

$( document ).ready(function() 
{
$.ajax({    //create an ajax request to load_page.php
        type: "GET",
        url: "customer.php",
        dataType: "html",   //expect html to be returned
        success: function(response){                    
            $(".responsetext").html(response); 
            //alert(response);
        }
    });	
});

THIS SCRIPT FILLES THE DROPDOWE BELOW USING responsetext

<select name="customer"id="customer" class="form-control input-sm responsetext">
</select>

SO WHEN I SELECT THIS IT WILL PASS THE ID AND RUN THE SCRIPT BELOW

$(function() {  //  document.ready
    $("#id").on("change", function() {
        $.ajax({
            url: "contact.php",
            type: "GET",
            data: {
                id: $(this).val()
            },
            success: function(data) {
                $(".contactresults").html(data);
            }
        });
    });
});

SO IT WILL FILL THIS SELECT BOX WITH contactresults

	<select name="contact" class="form-control input-sm contactresults" id="contact">
                    </select>

[mogosselin]

I'll assume that your PHP scripts are outputting something like this:

customer.php:
<option value="1">Customer #1</option>
<option value="2">Customer #2</option>
<option value="3">Customer #3</option>

contact.php:
<option value="11">Address #1 of selected customer</option>
<option value="22">Address #2 of selected customer</option>
etc...

In your first piece of code, what is this?

$(".responsetext").html(response);

This is JQuery and it means "take the element with a class "responsetext" and put the content of the variable "response" into it.

So ti will select this element:

<select name="customer"id="customer" class="form-control input-sm responsetext">
</select>

and will stuff whatever customer.php returns. It should already work. But, I would first add a space between name="customer"id="customer" so it's 

<select name="customer" id="customer" class="form-control input-sm responsetext">
</select>

(if it's not just a copy-paste error)

 

And I would change this line:

$(".responsetext").html(response);

for this line

$("#customer").html(response);

Instead of "find the element with the class responsetext", it's "find the element with the ID customer". Shouldn't change much, except it's better to use ID if you only want to select one object and it's more efficient too.

 

Now your third piece of code:

$("#id").on("change", function() {

It means "select the HTML element with the id "id". (the pound # sign means "id", the dot sign means "class") Well, I don't see any element with the id "id". But I see an element with the id "contact":

<select name="contact" class="form-control input-sm contactresults" id="contact">

So change it for

$("#customer").on("change", function() {

This should now work if your PHP returns the correct HTML. You could always try by hardcoding the result in the PHP just to see if it works.

Edited February 25, 2014 by mogosselin