Hello
I'm having a bit of a problem with some code I am writing. The purpose of it is:
1. allow a use to add as many input/ combo boxes as needed
2. have one of the boxes be dependant on a select box menu for its content (ie if spice is selected from the main menu the the secondary menu will show a list of spices)
3. Have the dependant box's values be derived from a database
The problem I have encountered is that once the user adds the input boxes, the script I have to change the values of the dependant text box gets confused and can't identify the text box to change... even though I have a function which gives each cloned box a unique identifier.
Below is my code with a few comments
<html>
<head>
<?php
simple code which pushes the results from a database into a Javascript array... No need to show this as I know it works.
?>
<script language="javascript">
var counter = 0;
function moreFields()
/*This is the function which allows the user to add as many fields as they want. It clones a div named readroot*/
{
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++)
{
/*This is where I have setup the function to give each input within the cloned DIV a unique name by adding the counter onto the end of the exhisting name. By using a GET method I have been able to confirm that the input names are working as planned*/
var theName = newField.name
if (theName)
newField.name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
function foodGroup(current)
/*Here is where the Javascript array from my php code populates a select menu based on the option selected. Eg. If spice is selected from the food group menu then all the input from the spice table will be shown in the food option list. */
{
var path = eval("document.myform.food"+counter);
/*When a new field is cloned in the above function it adds a counter number to the end. I tried to do the same here using the eval function*/
season = current.options[current.selectedIndex].value
if (season == "1")
{
season_number = parseInt(season)
path.options.length = 0
for (mp = 0; mp<spice.length; mp ++)
{
path.options[mp] = new Option(spice[mp])
}
path.disabled = false
}
else if (season == "2")
{
season_number = parseInt(season)
path.options.length = 0
for (mp = 0; mp<dairy.length; mp ++)
{
path.options[mp] = new Option(dairy[mp]);
}
path.disabled = false
}
else
{
path.disabled = true
}
}
</script>
</head>
<body>
<--! This is the DIV which is cloned by the MoreFields function. -->
<div id="readroot" style="display: none">
<select name=foodgroup onChange="foodGroup(this)">
<--! What is chosen in this list will change the food list -->
<option value="">------</option>
<option value=1>Spice</option>
<option value=2>Dairy</option>
<option value=3>Meat</option>
<option value=0>Fruit</option>
</select>
<select name=food disabled=true size=10>
<--! I think I need to do something with this name. If I was to add a 1 on the end of food it would work for the first time but none others. -->
<option>which</option>
</select>
<input type="hidden" name="breakfast" value ="breakfast">
<input type="button" value="Remove Food" onclick="this.parentNode.parentNode.removeChild(this.parentNode);"><br><br>
</div>
<form name="myform" method="get" action=" >
Breakfast
<span id="writeroot"></span>
<input type="button" value="Add Breakfast" onClick="moreFields()">
<center><input type="submit" value ="submit" name="submit"></center>
</form>
</BODY>
</HTML>
So there you have it.. it is a bit rough as I have done so much editing to this to get the thing to work... If anyone has any idea on what I could do to make it work 100% I would be very grateful.
Thankyou
I'm having a bit of a problem with some code I am writing. The purpose of it is:
1. allow a use to add as many input/ combo boxes as needed
2. have one of the boxes be dependant on a select box menu for its content (ie if spice is selected from the main menu the the secondary menu will show a list of spices)
3. Have the dependant box's values be derived from a database
The problem I have encountered is that once the user adds the input boxes, the script I have to change the values of the dependant text box gets confused and can't identify the text box to change... even though I have a function which gives each cloned box a unique identifier.
Below is my code with a few comments
<html>
<head>
<?php
simple code which pushes the results from a database into a Javascript array... No need to show this as I know it works.
?>
<script language="javascript">
var counter = 0;
function moreFields()
/*This is the function which allows the user to add as many fields as they want. It clones a div named readroot*/
{
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++)
{
/*This is where I have setup the function to give each input within the cloned DIV a unique name by adding the counter onto the end of the exhisting name. By using a GET method I have been able to confirm that the input names are working as planned*/
var theName = newField.name
if (theName)
newField.name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
function foodGroup(current)
/*Here is where the Javascript array from my php code populates a select menu based on the option selected. Eg. If spice is selected from the food group menu then all the input from the spice table will be shown in the food option list. */
{
var path = eval("document.myform.food"+counter);
/*When a new field is cloned in the above function it adds a counter number to the end. I tried to do the same here using the eval function*/
season = current.options[current.selectedIndex].value
if (season == "1")
{
season_number = parseInt(season)
path.options.length = 0
for (mp = 0; mp<spice.length; mp ++)
{
path.options[mp] = new Option(spice[mp])
}
path.disabled = false
}
else if (season == "2")
{
season_number = parseInt(season)
path.options.length = 0
for (mp = 0; mp<dairy.length; mp ++)
{
path.options[mp] = new Option(dairy[mp]);
}
path.disabled = false
}
else
{
path.disabled = true
}
}
</script>
</head>
<body>
<--! This is the DIV which is cloned by the MoreFields function. -->
<div id="readroot" style="display: none">
<select name=foodgroup onChange="foodGroup(this)">
<--! What is chosen in this list will change the food list -->
<option value="">------</option>
<option value=1>Spice</option>
<option value=2>Dairy</option>
<option value=3>Meat</option>
<option value=0>Fruit</option>
</select>
<select name=food disabled=true size=10>
<--! I think I need to do something with this name. If I was to add a 1 on the end of food it would work for the first time but none others. -->
<option>which</option>
</select>
<input type="hidden" name="breakfast" value ="breakfast">
<input type="button" value="Remove Food" onclick="this.parentNode.parentNode.removeChild(this.parentNode);"><br><br>
</div>
<form name="myform" method="get" action=" >
Breakfast
<span id="writeroot"></span>
<input type="button" value="Add Breakfast" onClick="moreFields()">
<center><input type="submit" value ="submit" name="submit"></center>
</form>
</BODY>
</HTML>
So there you have it.. it is a bit rough as I have done so much editing to this to get the thing to work... If anyone has any idea on what I could do to make it work 100% I would be very grateful.
Thankyou