Expanding Form Trouble

aanthis · #1 09-14-2006, 06:01 PM

Can anyone help me? I know bits and pieces about js,dhtml, etc, and I am trying to do a page for work. My problem is that I would like to be able to press the Add More button and have the exact same form come up that was there. There are other complicated elements there and I can't seem to get the add more to work.....Any Suggestions?

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>QUOTE FORM</title>
<body>

<script type="text/javascript">
//<![CDATA[
// array of possible colors for annuals selection list
var colorLists = new Array(4)
colorLists["empty"] = ["Select a color"];
colorLists["alyssum"] = ["Easter Bonnet Deep Pink", "Easter Bonnet Deep Rose", "Easter Bonnet Lavender", "Easter Bonnet Violet", "Snow Crystals White"];
colorLists["begonia"] = ["Ambassador Pink", "Ambassador White", "Ambassador Rose", "Bella Vista Scarlanda", "****tail Pink,Gin", "****tail Red,Vodka", "****tail White,Whiskey", "Senator Deep Rose"];
colorLists["cabbage"] = ["Tokyo Pink", "Tokyo White", "Tokyo Red"];
colorLists["celosia"] = ["Jewel Box Mix", "Kimono Mix", "New Look"];
colorLists["coleus"] = ["Black Dragon", "Wizard Golden", "Wizard Pastel", "Wizard Pineapple", "Wizard Pink", "Wizard Rose", "Wizard Scarlet", "Wizard Sunset", "Wizard Velvet", "Wizard Mix"];
colorLists["dianthus"]= ["Parfait Raspberry", "Parfait Strawberry", "Telstar Coral", "Telstar Picotee", "Telstar Purple", "Telstar Purple Picotee", "Telstar Salmon", "Telstar Scarlet", "Telstar White"];
/* colorChange() is called from the onchange event of a select element.
* param selectObj - the select object which fired the on change event.
*/
function colorChange(selectObj) {
// get the index of the selected option
var idx = selectObj.selectedIndex;
// get the value of the selected option
var which = selectObj.options[idx].value;
// use the selected option value to retrieve the list of items from the coutnryLists array
cList = colorLists[which];
// get the color select element via its known id
var cSelect = document.getElementById("color");
// remove the current options from the color select
var len=cSelect.options.length;
while (cSelect.options.length > 0) {
cSelect.remove(0);
}
var newOption;
// create new options
for (var i=0; i<cList.length; i++) {
newOption = document.createElement("option");
newOption.value = cList[i]; // assumes option string and value are the same
newOption.text=cList[i];
// add the new option
try {
cSelect.add(newOption); // this will fail in DOM browsers but is needed for IE
}
catch (e) {
cSelect.appendChild(newOption);
}
}
}
//]]>
</script>
</head>
<body>

<noscript>
This page requires JavaScript be available and enabled to function properly</noscript>

<h1><i>ANNUALS</i></h1>
<form name="annuals">
<label for="annual">Select an Annual</label></b>
<select id="annual" onchange="colorChange(this);">
<option value="empty">Select a annual</option>
<option value="alyssum">Alyssum</option>
<option value="begonia">Begonia</option>
<option value="cabbage">Cabbage</option>
<option value="celosia">Celosia</option>
<option value="coleus">Coleus</option>
<option value="dianthus">Dianthus</option>

</select> <b>
<label for="color">      Select a Color</label></b>
<select id="color">
<option value="0">Select a color</option>
</select> <b>
<label for="color0">      Select a Size</label></b>
<select id="color0" name="Size">
<option value="0">18 Ct Flat</option>
<option>1 Gallon</option>
</select>  <b><label for="color0">   Quantity </label></b> <input type="text" name="T1" size="7">         

<script>
var addannualsNum = 0;
function addannuals(){
document.getElementById('addannualsDiv' + addannualsNum).innerHTML = '<input type=form name=annuals' + (addannualsNum + 1) + '><div id=annualsDiv' + (addannualsNum + 1) + '></div>';
addannualsNum = (addannualsNum +1);
}
</script>
<input type=button value"Add More Annuals" name="add more annuals" size="20" value="Add More Annuals"><div id="annualsDiv0"></div><a href=# onclick="addannuals()"></p>
</form>
<p align="center"> </p>
<p align="center"> </p>

</a>

</body>

</html>

Please HELP!

Arty Effem · #2 09-14-2006, 09:43 PM

Try some reasonably valid HTML. You have a button containing a syntax error, which in any case isn't actually coded to do anything:

Code:

 <input type=button value"Add More Annuals" name="add more annuals" size="20" value="Add More Annuals">

followed by a textless link that traverses a form boundary:

Code:

<a href=# onclick="addannuals()"></p>
 </form>
 <p align="center">&nbsp;</p>
 <p align="center">&nbsp;</p>
 
 </a>

when clicked, this link generates an error indicating that the call

Code:

document.getElementById('addannualsDiv'

is being passed a non-existent id.

[Sound of fingers being drummed on desk]

aanthis · #3 09-15-2006, 10:09 AM

Like I said before, this is beyond my realm of knowledge....So I don't understand what I'm doing......What I can't figure out is how to link the form to the add more button.......

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)