Form Updating Problems

I’m currently working on writing a computer configuration form, much like the one used by Puget Computer Systems. I have some errors that I have no clue how to deal with though.

When the updateForm() function is executed I get “confForm has no properties” on line 43. I believe this is because I’ve read the names of the select elements into an array and am trying to reference them from that. Apparently that doesn’t work.

I’m not sure how I would do it otherwise though.

Any help would be appriciated.

Form: [url]http://www.bradfel.net/comp/index.php[/url]
Javascript: [url]http://www.bradfel.net/comp/includes/scripts.js[/url]

Here’s the form (just the important parts)

[code]
<form action=”process.php” method=”post” name=”compConf”>
<table style=”border:0px;width:650px;”>

<!– Price –>
<tr><td style=”text-align:right;”>Configured Price:</td><td class=”options” style=”text-align:right;”><input type=”text” id=”price” readonly=”readonly” value=”$0.00″ /></td></tr>
<!– End Price –>

<!– Chassis –>
<tr>
<td colspan=”2″ style=”color:#FFF;text-align:center;font-weight:bold;background-color:#920000;”>Chassis</td>
</tr>

<tr>
<td><img src=”images/smile.png” style=”height:200px;width:200px;” id=”chassis_image” alt=”” /></td>
<td class=”options”>
<select name=”chassis” onchange=”updatePrice();updateParts(‘chassis’,’motherboard’);”>
<option selected=”selected”>Please Select a Chassis</option>
<option value=”CHAS0001|40.00″>Chassis 1 – $40.00</option>
<option value=”CHAS0002|50.00″>Chassis 2 – $50.00</option>
</select>
</td>
</tr>
<!– End Chassis –>

<!– Motherboard –>
<tr>
<td colspan=”2″ style=”color:#FFF;text-align:center;font-weight:bold;background-color:#920000;”>Motherboard</td>
</tr>

<tr>
<td><img src=”images/smile.png” style=”height:200px;width:200px;” id=”motherboard_image” alt=”” /></td>
<td class=”options”>
<select name=”motherboard” onchange=”updatePrice();updateParts(‘motherboard’,’cpu’,’memory’,’video’,’sound’,’harddisk1′,’harddisk2′,’harddisk3′,’harddisk4′,’diskdrive1′,’diskdrive2′);”>
<option selected=”selected”>Please Select a Chassis First</option>
</select>
</td>
</tr>
<!– End Motherboard –>

<!– CPU –>
<tr>
<td colspan=”2″ style=”color:#FFF;text-align:center;font-weight:bold;background-color:#920000;”>Processor</td>
</tr>

<tr>
<td><img src=”images/smile.png” style=”height:200px;width:200px;” id=”cpu_image” alt=”” /></td>
<td class=”options”>
<select name=”cpu” onchange=”updatePrice();”>
<option selected=”selected”>Please Select a Motherboard First</option>
</select>
</td>
</tr>
<!– End CPU –>
[/code]

And here is the script:

[code]
// array of parts
// eventually will be dynamicly generated by a php script
// array[arrayOfArrays][arrayOfParts][arrayOfPartsStuff][arrayOfComptabibleParts]
// ^ Only if arrayOfPartsStuff == 2
var partsList = new Array(
Array(
Array(“CHAS0001”, “Chassis 1”, Array(), “image.gif”, “40.00”),
Array(“CHAS0002”, “Chassis 2”, Array(), “image.gif”, “50.00”),
Array(“CHAS0003”, “Chassis 3”, Array(), “image.gif”, “70.00”),
Array(“CHAS0004”, “Chassis 4”, Array(), “image.gif”, “90.00”)
),
Array(
Array(“MOTH0001”, “Motherboard 1”, Array(“CHAS0001”, “CHAS0002”, “CHAS0003”), “image.gif”, “80.00”),
Array(“MOTH0002”, “Motherboard 2”, Array(“CHAS0003”, “CHAS0004”), “image.gif”, “90.00”),
Array(“MOTH0003”, “Motherboard 3”, Array(“CHAS0001”, “CHAS0002”, “CHAS0004”), “image.gif”, “125.00”)
),
Array(
Array(“PROC0001”, “CPU 1”, Array(“MOTH0001”, “MOTH0002”), “image.gif”, “150.00”),
Array(“PROC0002”, “CPU 2”, Array(“MOTH0003”), “image.gif”, “145.00”)
)
);
var defaults = new Array(“Please Select a Chassis”, “Please Select a Motherboard”, “Please Select a CPU”);

// updates the form with compatible parts
function updateParts()
{
var confForm = document.compForm;

// fetch function arguements
var updateArgs = updateParts.arguments;

// make sure there are at least two arguements
if(updateArgs.length < 2) { return; }

// get the calling part
var sourcePart = updateArgs[0]; // Problem here too?

// loop through arguments
for(i=1;i<updateArgs.length;i++)
{
var selectOptions = confForm.updateArgs[i].options; // HERE IS THE PROBLEM (most likely repeats itself below several times also)

var sourceOption = confForm.sourcePart.options[confForm.sourcePart.selectedIndex].value;
sourceOption = sourceOption.substring(0,sourceOption.indexOf(‘|’));

var prefix = updateArgs[i].substring(0,4);

// remove options
for(j=0;j<selectOptions.length;j++)
{
selectOptions.remove(0);
}

// find parts array
for(j=0;j<partsList.length;j++)
{
if(partsList[j][0].substring(0,4) == prefix)
{
var partsIndex = j;
break;
}
}

// loop for compatible parts, add to select box
for(j=0;j<partsList[partsIndex].length;j++)
{
for(x in partsList[partsIndex][2])
{
if(x == sourceOption)
{
var newOption = document.createElement(“option”);
newOption.text = partsList[partsIndex][1];
newOption.value = partsList[partsIndex][0] + “|” + partsList[partsIndex][4];
selectOptions.add(newOption);
break;
}
}
}
}
}

[/code]

Also in #JavaScript _↴