Part 2: Problems dynamically changing SELECT box

phpPete · Sep 5, 2002

OK...here's my latest incarnation of my script. Essentially this adds an
option to another select list after checking against a lookup array .

My problem now is that the script only works peoperly on the first select
list in the list. It "appears" to work with the others, however, it
actually contains the data from the first list.

The functions are called by the onchange handler for the associated
select list, like so:

HANDLER:

Code:

<select name=&quot;selIngredient[<?php echo $i ?>]&quot; onChange=&quot;JavaScript: 
addToSelect(<?php echo $arrName ?>, <?php echo $i  ?>);&quot; size=&quot;1&quot; id=&quot;<?
php echo $i ?>&quot;>

FUNCTION CODE

Code:

function addToSelect(arr, c)
{
    var oOption;
    var len = document.forms[1].elements[0].options.length;
    var target = parseInt(document.forms[1].elements[0].options[c].index);
    alert(target);
 
    for(var t = 0; t < len;  t++)
    {
       
        if(document.forms[1].elements[0].options[t].selected == 
true )        
        {            
            //alert('Option index is: ' + document.forms[1].elements
[0].options[t].index );
            var text = document.forms[1].elements[0].options[t].value;
            text = text.split(&quot;:&quot;);
            //alert(text[1]);
            
            //alert('Option value is ' + document.forms[1].elements
[0].options[t].value);
             for(var j = 0; j < arr.length; ++j)
                {
                    var lookFor = arr[j].split(&quot;:&quot;);
                    //alert('Looking for ' +  lookFor[0]);
                 if( text[1] == lookFor[0] )
                       {
                       alert(lookFor[0] + ':' + lookFor[1]);
                       alert('Found conversion  '  + lookFor[1] + '  for 
ingredient ' + lookFor[0]);
                          oOption = new Option(lookFor[1], lookFor[1]); 
                          //alert(oOption);               
                          document.forms[1].elements[(target+2)].add
(oOption);
                          alert(oOption.text + ' is the text\n' + 
oOption.value + ' is the value.');
                      }
                 }    
             } 
        } 
    }

RISTMO · Sep 5, 2002

Try adding quotes around the text you pass in:

<select name="selIngredient[<?php echo $i ?>]" onChange="JavaScript:
addToSelect('<?php echo $arrName ?>', <?php echo $i ?>);" size="1" id="<?
php echo $i ?>">

Rick

starway · Sep 6, 2002

Just a small point:
You don't have to add "javascript:" before function name in event handlers. You need this only for function calls from <a href="javascript:func1()"

One more:
You have to add quotes, as ristmo2001 said, for function arguments only if they are strings. If an argument is the number, you shouldn't do this - otherwise it will be treated as string.

I don't think these are the reasons for errors you get, but anyway a clarification that can be helpful in future.

phpPete · Sep 6, 2002

Thanks for your posts guys. i've made a test html page which shows what I'm getting. if you care to cut and paste you'll see.

I've narrowed my problem down to the innermost block of code in the function,> I'm having trouble synchronizing the calling function select box with it paired receiving box. at present all new Options are placed in the first portion size select list, when i need the calling select box to send to it's associated select box holding portions.

Here's the code, just cut and paste...

Thanks for any and all help,

Pete

Code:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>

<html>
<head>
<title>Page title</title>
<script type=&quot;text/javascript&quot;>
<!--
function addToSelect(form, arr, num)
  {
  
    for(var i = 0; i < frmTest.elements[num].length; i++)
        {
            if( document.frmTest.elements[0].options[i].selected == true )
                {
                    for(var j = 0; j < ing.length; j++)
                        {
                            var text = document.frmTest.elements[0].options[i].value.split(&quot;:&quot;);
                            var lookUp = ing[j].split(&quot;:&quot;);
                            if(text[0] == lookUp[0])
                                {
                                    var oOption = new Option(lookUp[1], lookUp[1]);                                    
                                   document.frmTest.elements[1].add(oOption);//<--- this line and the next
                                   //document.frmTest.elements[num,1].add(oOption);//   are the problem!!
                                }
                        }
                }
        }
  } 
ing = new Array();
ing[0] = 'butter:HAT';
ing[1] = 'Asiago:SHOE';
// -->
</script>
</head>
<body>

<form name=&quot;frmTest&quot; action=&quot;&quot;>
<select name=&quot;selIngredient[0]&quot; onChange=&quot;addToSelect(this, ing, 0);&quot;>

<option value=&quot;butter&quot;>butter</option>
<option value=&quot;Asiago&quot;>Asiago</option>
</select>

<select name=&quot;selPortionSize[0]&quot;>
<option value=&quot;ounce&quot;>ounce</option>
<option value=&quot;pound&quot;>pound</option>
</select>
<br>
<br>
<select name=&quot;selIngredient[1]&quot; onChange=&quot;addToSelect(this, ing, 1);&quot;>

<option value=&quot;butter&quot;>butter</option>
<option value=&quot;Asiago&quot;>Asiago</option>
</select>

<select name=&quot;selPortionSize[1]&quot;>
<option value=&quot;ounce&quot;>ounce</option>
<option value=&quot;pound&quot;>pound</option>
</select>
</form>

</body>
</html>

starway · Sep 6, 2002

There are several problems in your code.

First of all, there's no such a JS method "add":
document.frmTest.elements[1].add(oOption)

This is a way to add an option to <select> list:[tt]
var newOpt = new Option();
newOpt.value = "some value";
newOpt.text = "some name";
var n = document.formName.selectName.length;
document.formName.selectName.options[n] = newOpt;
[/tt]
Second, I don't recommend to name any form elements like "selIngredient[1]" or similar. You will just find additional problems and nothing more.
Give elements normal names and access them using these names or element's item number of the form array:[tt]
formname.elements[3]
formname.elements['elem_name']
[/tt]

phpPete · Sep 6, 2002

Thanks for your answers:
Point of clarification: Tek-tips faq 216-335 (6b on the FAQ for JS ) gives an example of what I'm trying to do, and the author uses an add() method to add the new Option, and in fact this does work in my code.

As to your second point, my thought in naming my select lists in the manner name[0], name[1], name[3] is that it creates an array an thus is easier to iterate over.

Correct me if I'm wrong there.

i will try out your suggested method of adding the option as I've used that technique in the past effectively.

I appreicate you answers and observatins,

Pete

starway · Sep 6, 2002

For additional clarification: add() works in IE only. Test it in any other browser and you'll see that it doesn't work. Unlike this, my suggestion is good for all browsers.

I think you should test your scripts in other browsers as well, and not rely on IE as it's full of non-standard extentions.

As for the second point: again, you'll get nothing but a headache. You can try if you want, but I'd go another (more simple) way.

phpPete · Sep 6, 2002

In this case I'm restricing the user to IE anyway, ( it's an intranet ).

The select lists are dynamically generated by PHP so the number on any given call to the page varies, and the form is defined like so:

<form name="frmTest">
<select name="frmTest[selIngredient[<?php echo $i ?>]]>
etc etc,
So in essence its structured like:
Array(

frmTest[0] =>Array(
selIngredient[0]=>
Array( option[0] =>xxx
option[1]=>yyy
option[2]zzz
)
)
)

Which makes it more compatible with PHPs' arrays

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Part 2: Problems dynamically changing SELECT box

phpPete

Programmer

RISTMO

Programmer

starway

Programmer

phpPete

Programmer

starway

Programmer

phpPete

Programmer

starway

Programmer

phpPete

Programmer

Similar threads

Part and Inventory Search

Sponsor