Catch value of ajax dropdown

This explains how to catch the selected value of the dropdown box (which came from an ajax response), in our form.

Suppose our form has a dependant dropdown, that gets populated from an ajax request to another page.
Now how to catch the value selected in this dynamic dropdown ?

You can use a function like update_val(this.value) as an onchange event to this ajax dropdown. In this function, which is present on your form page, you can update a hidden field in your form with the selected value from the dynamic dropdown.

Because we cannot catch the selected value of the ajax dropdown in our form page directly.

Example: We need to display a dynamic dropdown of fruits based on a value selected from the location dropdown in our form. Here, "ajax_selectbox" is the hidden field in the form "form1".

form page:

function update_val(select_val)
{
document.form1.ajax_selectbox.value = select_val.value;
}

ajax page:

// sample ajax response of fruits, based on the location selected

if($location == 'NY')
{
$arr = array(1=>'Apple',2=>'Mango',3=>'Guava');

echo '<select name="fruits" id="fruits" style="border:1px solid #666666; background-color:#b5d9f7; width:150px" onchange="update_val(this)">
<option value="select">select Fruit</option>';

foreach($arr as $k=>$v)
{
?>
<option value="<?php echo $k; ?>">
<?php echo $v; ?>
</option>
<?php
}
echo '</select>';
}