Dropdown dependent on other dropdown ajax
<p>I want to make a dropdown dependent on the first dropdown using PHP. I have come to this at this moment, but it won't work.</p>

<p>I'm trying to make the user first select a value from the first dropdown. Press the Go button. Then second dropdown appears. </p>

<p>When pressing second GO button (from dropdown 2) a table with data must be shown. That is the function called get_latest_prices)</p>

<pre><code>function show_products( $attrs )
{
    global $wpdb;

    $products = get_products();

    $type = get_types();

    $html .= get_cluetip_js();
</code></pre>

<p>Creation of the first dropdown:</p>

<pre><code>    $html.="&lt;form&gt;
    &lt;select name='type' id='type' autocomplete='off'&gt;
    &lt;option value=''&gt;--Select Type--&lt;/option&gt;
    ";
</code></pre>

<p>Getting the data from teh database
        if( $_GET['type'] )
                $selected_type = $wpdb->escape($_GET['type']);</p>

<pre><code>    foreach($type as $typ)
    {
            if($typ['type']==$selected_type)
                    $selected = ' selected ';
            else
                    $selected = ' ';

            $typ['type'] = trim( $typ['type'] );

            if( !$typ['type'] )
                    continue;
</code></pre>

<p>Show the selected dropdown menu row:</p>

<pre><code>            $html.="&lt;option $selected value='{$typ['type']}'&gt;{$typ['type']}     &lt;/option&gt;\r\n";
    }

$html.="
    &lt;/select&gt;
    &lt;br/&gt;
            &lt;input type='submit' value='Go'&gt;
    &lt;/form&gt;";


    $html.= '&lt;script type="text/javascript"&gt;
$(function () {
    $("#product").ufd({log:true});
    $("a.deeplink").cluetip();

});
&lt;/script&gt;
';
</code></pre>

<p>When a row is chosen and the form is submitted then add second dropdown menu:</p>

<pre><code>if($selected_type)
    {
    $html.="
    &lt;/select&gt;
    &lt;br/&gt;
    &lt;select name='product' id='product' autocomplete='off'&gt;
    &lt;option value=''&gt;--Select Product--&lt;/option&gt;
    ";
</code></pre>

<p>Getting data from database for second dropdown. The $products variable selects another function that will query for product title and cat. And the type selected in first dropdown. </p>

<pre><code>    if( $_GET['product'] )
            $selected_product = $wpdb-&gt;escape($_GET['product']);

    foreach($products as $prod)
    {
            if($prod['ID']==$selected_product)
                    $selected = ' selected ';
            else
                    $selected = ' ';

            $prod['Title'] = trim( $prod['Title'] );
            $prod['Cat'] = trim( $prod['Cat'] );

            if( !$prod['Title'] || !$prod['Cat'] )
                    continue;

            $html.="&lt;option $selected value='{$prod['ID']}'&gt;{$prod['Title']} - ({$prod['Cat']})&lt;/option&gt;\r\n";
    }
            $html.="
    &lt;/select&gt;
    &lt;br/&gt;&lt;input type='submit' value='Go'&gt;
    &lt;/form&gt;";


    $html.= '&lt;script type="text/javascript"&gt;
$(function () {
    $("#product").ufd({log:true});
    $("a.deeplink").cluetip();

});
&lt;/script&gt;
';

//  return $html;
</code></pre>

<p>When the second form is submitted a function called get_latest_prices is called. This functions draws a table with data using the data from the selection from dropdown 2. </p>

<pre><code>    if($selected_product)
    {
            $html.=get_latest_prices($selected_product);
    }

    return $html;
}
return $html;   
}
</code></pre>

<p>When the go button is submitted from the second form nothing happens. No page load, no refresh, no error. Any ideas? Transforming to AJAX is an option, but requires a lot of rework in the entire script.</p>
