help with php and ajax image

[geremyh]

I have a webpage using two drop down menus to select the inside color and the outside color of my product. link to site Click Here When the inside color is chosen the correct image is displayed but when I choose from the outside color drop down the other image disappears and the new selection is displayed. I need both of them to be displayed at the same time can someone help me change this contribution to suit my needs? I believe it is because the drop downs are all named the same. How can I change the php to use the proper names of the drop down menus?

This draws the drop down menus (html_output.php)and names them all 'zoek' right?

function tep_draw_pull_attribute_down_menu($name, $values, $default = '', $parameters = '', $required = false) {
    global $HTTP_GET_VARS, $HTTP_POST_VARS;

    $field = '<select name="' . tep_output_string($name) . '"';

    if (tep_not_null($parameters)) $field .= ' ' . $parameters;

    $field .= '>';

    if (empty($default) && ( (isset($HTTP_GET_VARS[$name]) && is_string($HTTP_GET_VARS[$name])) || (isset($HTTP_POST_VARS[$name]) && is_string($HTTP_POST_VARS[$name])) ) ) {
      if (isset($HTTP_GET_VARS[$name]) && is_string($HTTP_GET_VARS[$name])) {
        $default = stripslashes($HTTP_GET_VARS[$name]);
      } elseif (isset($HTTP_POST_VARS[$name]) && is_string($HTTP_POST_VARS[$name])) {
        $default = stripslashes($HTTP_POST_VARS[$name]);
      }
    }

    for ($i=0, $n=sizeof($values); $i<$n; $i++) {
      $field .= '<option value="' . tep_output_string($values[$i]['id']) . '"';
      if ($default == $values[$i]['id']) {
        $field .= ' SELECTED';
      }
      $field .= ' name="zoek">' . tep_output_string($values[$i]['text'], array('"' => '&quot;', '\'' => '&#039;', '<' => '&lt;', '>' => '&gt;')) . '</option>';

    }
    $field .= '</select>';

    if ($required == true) $field .= TEXT_FIELD_REQUIRED;

    return $field;

and this is what's used (ajaximage.php) to answer the request:

$id = $_GET['zoek'];
$options_query = tep_db_query("select pov.products_options_values_id, pov.products_options_values_thumbnail from " . TABLE_PRODUCTS_OPTIONS_VALUES . " pov where pov.products_options_values_id = '" .$id . "'");
$options = tep_db_fetch_array($options_query);

if($options['products_options_values_thumbnail'] != '' && OPTIONS_IMAGES_CLICK_ENLARGE == 'true')
{
echo "<a href='" . tep_href_link(FILENAME_OPTIONS_IMAGES_POPUP, "oID=" . $id) ."' target='blank'><img src=./images/options/".$options['products_options_values_thumbnail']." height=".OPTIONS_IMAGES_HEIGHT." width=".OPTIONS_IMAGES_WIDTH."></a>";
}
if($options['products_options_values_thumbnail'] == '' && OPTIONS_IMAGES_CLICK_ENLARGE == 'true')
{
echo TEXT_IMAGE_NOT_FOUND;
}
if($options['products_options_values_thumbnail'] != '' && OPTIONS_IMAGES_CLICK_ENLARGE == 'false')
{
echo "<img src=./images/options/".$options['products_options_values_thumbnail']." height=".OPTIONS_IMAGES_HEIGHT." width=".OPTIONS_IMAGES_WIDTH.">";

and this is the javascript that handles it all right?

<script language="javascript">

    function createRequestObject() {

       var req;

       if(window.XMLHttpRequest){
          req = new XMLHttpRequest();
       } else if(window.ActiveXObject) {
          req = new ActiveXObject("Microsoft.XMLHTTP");
       } else {
          req = NULL;
          alert('Probleem met het aanmaken van hetXMLHttpRequest object');
       }

       return req;

    }

    var http = createRequestObject();

    function sendRequestSearch(iets) {

       http.open('get', 'ajaximage.php?zoek='+iets);
       http.onreadystatechange = handleResponseSearch;
       http.send(null);

    }

    function handleResponseSearch() {

       if(http.readyState == 4 && http.status == 200){
          if(http.responseText) {
             document.getElementById("zoek_resultaten").innerHTML = http.responseText;
          } else {
             document.getElementById("zoek_resultaten").innerHTML = " &nbsp; ";
          }

       } else {
          document.getElementById("zoek_resultaten").innerHTML = " &nbsp; ";
       }

    }

</script>

I could really use some help here as I know just enough to say I don't know enough.

[diafol]

How old is this code - not yours I take it? I haven't seen $HTTP_GET_VARS for years. Try $_GET instead. You have an array of names = id[n] for your selects. You could be using any names for $name -

 tep_draw_pull_attribute_down_menu($name, $values, $default = '', $parameters = '', $required = false)

[geremyh]

I can't seem to find the right coding for it use the array as the names. How do i properly change these to use the right names given to each drop down instead of naming them all "zoek" I can't seem to get it right.

$field .= ' name="zoek">'

$id = $_GET['zoek'];

http.open('get', 'ajaximage.php?zoek='+iets);

[diafol]

WHy have you got names for your options, surely you should be using the name of the select itself.

This is tghe html you've created:

<select name="id[2]" onchange="sendRequestSearch(this.value);">
    <option value="4" name="zoek">default</option>
    <option value="5" name="zoek">Purple</option>
</select>

Which, to me, makes no sense. The object (this) is the <select> and the value will be the 'value' of the option selected. Nothing to do with zoek.

[geremyh]

That's what I'm trying to do, use the name of the select itself but my limited knowledge in this has me stumped on what to change and how. I assume it is poorly coded which makes it even harder for me to wrap my head around it. I see now that it is naming all the $values zoek, is that for some reason the only way this package functions?

[diafol]

Where did you get it? It's pretty awful.

[geremyh]

i got it here
Click Here

any help in achieving the desired result is appreciated

[diafol]

Here's soemthing I knocked up to build select dropdowns. It may help you, but it may not.

<?php
function createSelect($options,$selected=NULL,$equateKeyLabel=NULL)
{
    //Set yup intial vars
    $output = array();
    $op = (array) $options;
    $selV = ($selected) ? $selected : 0;

    if($equateKeyLabel) $op = array_combine($op, $op);

    foreach($op as $k=>$v)
    {
        $sel = ($selV === $k) ? ' selected' : ''; 
        $output[] = "<option value='{$k}'$sel>{$v}</option>";
    }
    return implode("\n", $output); 
}

$select1 = createSelect(array('Trousers','Skirts','Pants','Knickers','Vests'),false,true);
$select2 = createSelect(array('Trousers','Skirts','Pants','Knickers','Vests'),'Vests',true);
$select3 = createSelect(array(0=>'Trousers',1=>'Skirts',2=>'Pants',3=>'Knickers',4=>'Vests'),'Knickers',true);
$select4 = createSelect(array('trou'=>'Trousers','skir'=>'Skirts','pant'=>'Pants','knic'=>'Knickers','vest'=>'Vests'));
$select5 = createSelect(array('trou'=>'Trousers','skir'=>'Skirts','pant'=>'Pants','knic'=>'Knickers','vest'=>'Vests'),'pant');
?>


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>


<p>Number indexed array without selected value</p>
<select name="select1">
    <?php echo $select1;?>
</select>
<p>Number indexed array with selected value</p>
<select name="select2">
    <?php echo $select2;?>
</select>
<p>Explicitly indexed array with selected value</p>
<select name="select3">
    <?php echo $select3;?>
</select>
<p>Associated array (value=>label) without selected value</p>
<select name="select4">
    <?php echo $select4;?>
</select>
<p>Associated array (value=>label) with selected value</p>
<select name="select5">
    <?php echo $select5;?>
</select>

</body>
</html>

[diafol]

In addition, you can listen like this:

<script>
var elems = document.querySelectorAll("select");
for(var i=0;i<elems.length;i++){
    elems[i].addEventListener("change", shoutOut);
}

function shoutOut()
{
    var val = this.value;
    var selectName = this.name; 
    console.log(selectName + " gave '" + val + "' as its new value"); 
    //run ajax
}
</script>