Hi all,
I'm having some trouble with some code that I wrote for a form in my application. I have something called an Option Set which is basically a container for Options. There can be 0 to many Options Sets and each set contains 1 to many Options. The javascript on this page allows the user to add new Option Sets and Options for those sets. So far the code works for adding new Option Sets but it breaks when it comes to adding Options to a set after the first set.
I've attached the HTML file to this message and I'll paste it below as well for convenience. Oh and my javascript is pretty weak so anyone knows of a better way to do what I'm doing I'd be glad to here from you. Any help would be much appreciated.
Shane
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
var numSets=1;
var maxOptions=20;
function AddOptionSet()
{ if (numSets < maxOptions)
{ div=document.getElementById("options");
button=document.getElementById("addSet");
numSets++;
newSet="<U>Option Set #" + numSets + ":</U><BR>";
newSet+="Set Name: <INPUT TYPE=\"text\" NAME=\"os" + numSets + "\" VALUE=\"\" SIZE=\"41\" CLASS=\"inputBox\"><BR>";
newSet+="Option #1: ";
newSet+="Name: <INPUT TYPE=\"text\" NAME=\"os" + numSets + "_opt1_name\" VALUE=\"\" SIZE=\"15\" CLASS=\"inputBox\"> ";
newSet+="Price: $<INPUT TYPE=\"text\" NAME=\"os" + numSets + "_opt1_price\" VALUE=\"0.00\" SIZE=\"6\" CLASS=\"inputBox\"><BR>";
newSet+="<INPUT TYPE=\"button\" NAME=\"os" + numSets + "_add\" VALUE=\"Add Option\" ID=\"os" + numSets + "_add\" CLASS=\"button\" onClick=\"AddOption(document.form1.os" + numSets + "setNum.value, document.form1.os" + numSets + "optNum.value); document.form1.os" + numSets + "optNum.value=document.form1.os" + numSets + "optNum.value+1;\"><BR><BR><BR>";
newSet+="<INPUT TYPE=\"hidden\" NAME=\"os" + numSets + "setNum\" VALUE=\"" + numSets + "\">";
newSet+="<INPUT TYPE=\"hidden\" NAME=\"os" + numSets + "optNum\" VALUE=\"1\">";
newnode=document.createElement("span1");
newnode.innerHTML=newSet;
div.insertBefore(newnode,button);
document.form1.numSets.value=numSets;
}
}
function AddOption(setNum, optNum)
{ div=document.getElementById("options");
button=document.getElementById("os" + setNum + "_add");
newOpt="Option #" + optNum + ": ";
newOpt+="Name: <INPUT TYPE=\"text\" NAME=\"os" + setNum + "_opt" + optNum + "_name\" VALUE=\"\" SIZE=\"15\" CLASS=\"inputBox\"> ";
newOpt+="Price: $<INPUT TYPE=\"text\" NAME=\"os" + setNum + "_opt" + optNum + "_price\" VALUE=\"0.00\" SIZE=\"6\" CLASS=\"inputBox\"><BR>";
newnode=document.createElement("span2");
newnode.innerHTML=newOpt;
div.insertBefore(newnode,button);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<DIV ID="options">
<U>Option Set #1:</U><BR>
Set Name: <INPUT TYPE="text" NAME="os1" VALUE="" SIZE="41" CLASS="inputBox"><BR>
Option #1: Name: <INPUT TYPE="text" NAME="os1_opt1_name" VALUE="" SIZE="15" CLASS="inputBox">
Price: $<INPUT TYPE="text" NAME="os1_opt1_price" VALUE="0.00" SIZE="6" CLASS="inputBox"><BR>
<INPUT TYPE="button" NAME="os1_add" VALUE="Add Option" ID="os1_add" CLASS="button" onClick="optNum=document.form1.os1optNum.value*1+1; AddOption(document.form1.os1setNum.value, optNum); document.form1.os1optNum.value=optNum;"><BR><BR><BR>
<INPUT TYPE="hidden" NAME="os1setNum" VALUE="1">
<INPUT TYPE="hidden" NAME="os1optNum" VALUE="1">
<INPUT TYPE="button" VALUE="Add another set" onClick="AddOptionSet();" ID="addSet" CLASS="button">
</DIV>
<INPUT TYPE="hidden" NAME="numSets" VALUE="1">
</FORM>
</BODY>
</HTML>
Willy Duitt
11-22-2004, 01:34 AM
You are not seeing the problem for what it is...
Forget about "Add Another Set"... your Add Option is not OOP and thus does not release its previous reference.... Think about what it is you are trying to pass... set, option.... or both....
shane956
11-22-2004, 02:55 AM
Thanks for the reply,
Like I said, my javascript is really weak. I'll have to go through some OO javascript tutorials before I can go about this.
hemebond
11-22-2004, 03:25 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>47806</title>
</head>
<body>
<form id="form" name="form1">
<input id="add_set_button" type="button" value="add option set" onclick="addSet()">
</form>
<script type="text/javascript">
var MAX_OPTIONS = 20;
var form = document.getElementById("form");
function addSet()
{
var sets = document.getElementsByName("set");
var fieldset = document.createElement("fieldset");
fieldset.setAttribute('id', sets.length);
fieldset.setAttribute('name', 'set');
fieldset.appendChild( createLegend('Option set ' + sets.length) );
fieldset.appendChild( createLabel('name', 'set_name[' + sets.length + ']') );
fieldset.appendChild( createInput('set_name[' + sets.length + ']', 'text', '', '41') );
fieldset.appendChild( createButton('add option', 'onclick', 'addOption(this.parentNode)') );
form.insertBefore(fieldset, document.getElementById("add_set_button"));
}
function addOption(set)
{
var options = set.getElementsByTagName("fieldset");
if(options.length >= MAX_OPTIONS)
{
return;
}
var fieldset = document.createElement("fieldset");
fieldset.appendChild( createLegend("Option " + options.length) );
fieldset.appendChild( createLabel('name', 'name[' + set.id + '][' + options.length + ']'));
fieldset.appendChild( createInput('name[' + set.id + '][' + options.length + ']', 'text', '', 15));
fieldset.appendChild( createLabel('price $', 'price[' + set.id + '][' + options.length + ']'));
fieldset.appendChild( createInput('price[' + set.id + '][' + options.length + ']', 'text', '0.00', 6));
set.insertBefore(fieldset, set.lastChild);
}
function createLegend(text)
{
var legend = document.createElement("legend");
text = document.createTextNode(text);
legend.appendChild(text);
return legend;
}
function createLabel(text,element)
{
var label = document.createElement("label");
label.appendChild(document.createTextNode(text));
label.setAttribute("for",element);
return label;
}
function createInput(id, type, value, size)
{
var input = document.createElement("input");
input.setAttribute("id",id);
input.setAttribute("name",id);
input.setAttribute("type",type);
input.setAttribute("value",value);
input.setAttribute("size",size);
return input;
}
function createButton(value, event, action)
{
var button = document.createElement("input");
button.setAttribute("type","button");
button.setAttribute("value",value);
button.setAttribute(event, action);
return button;
}
</script>
</body>
</html>Ideally this should be split into 2 different pages. Page 1 allows you to add a new set, and page 2 allows you to add options to this set.
Oh, and this doesn't work in Internet Explorer because IE does not support the getElementsByName method, contrary to their claims.
shane956
11-22-2004, 08:18 PM
Thank you very much for this. It's exactly what I was aiming for. The only thing is that the application is to be run under IE. Is there no way to have this work under IE? Cross-browser compatibility isn't an issue for me here since I only need to work under IE.
Shane
TOP
