i am making a page where when i select drop down 1, then drop down 2 populates automatically .. and when i select drop down 2, then the textarea 1gets populated ... the modiciation i need is that with text area 1, text area 2 also gets populated with different values.
my code :
<body>
<script language="JavaScript">
<!--
var num_of_cats = 4; // This is the number of categories, including the first, blank, category.
var open_in_newwindow=1; //Set 1 to open links in new window, 0 for no.
var option_array = new Array(num_of_cats);
option_array[0] = new Array("Select an Area"); // This is the first (blank) category. Don't mess with it.
option_array[1] = new Array("Select an Area",
"Shah Faisal",
"Malir",
"North Nazimabad",
"Gulshan e Iqbal");
option_array[2] = new Array("Select an Area",
"Lahore Area 1",
"Lahore Area 2");
option_array[3] = new Array("Select an Area",
"Peshawar Area 1",
"Peshawar Area 2");
var text_array = new Array(num_of_cats);
text_array[0] = new Array("Here's how you use this box: First, you select a category in the Category drop-down. Then, select a link from the Link drop-down. Then, read the description in this box, or click Go to go to the page. If you ever need to see this help again, just go back to the top option in the Category box."); // These are general instructions. Change them if you want, or keep them if you don't.
text_array[1] = new Array("Karachi Area Selected.", // Note that the first entry here is a general description of this category. After than, they're descriptions of each link. Make sure that you don't put the first link first; the general description must be first.
"Shah Faisal Is Selected.",
"Malir Is Selected.",
"north Nazimabad Is Selected.",
"Gulshan e Iqbal is selected.");
text_array[2] = new Array("Lahore is Selected",
"Lahore Area 1 Selected",
"Lahore Area 2 Selected.");
text_array[3] = new Array("Peshawar Selected.",
"Peshawar Area 1 Selected.",
"Peshawar Area 2 Selected.");
var url_array = new Array(num_of_cats);
url_array[0] = new Array("#"); // The first category. This should have no items other than "#".
url_array[1] = new Array("#", // The second category; the first "real" category. Note the initial #. That is the category which says "Please select a link." It doesn't need a URL. Start putting the other URL's in after that first line.
"http://javascriptkit.com/",
"http://www.news.com/",
"http://www.wired.com/");
url_array[2] = new Array("#",
"http://www.cnn.com/",
"http://abcnews.go.com/");
url_array[3] = new Array("#",
"http://www.google.com/",
"http://www.aj.com/");
function switch_select()
{
for (loop = window.document.form_1.select_2.options.length-1; loop > 0; loop--)
{
window.document.form_1.select_2.options[loop] = null;
}
for (loop = 0; loop < option_array[window.document.form_1.select_1.selectedIndex].length; loop++)
{
window.document.form_1.select_2.options[loop] = new Option(option_array[window.document.form_1.select_1.selectedIndex][loop]);
}
window.document.form_1.select_2.selectedIndex = 0;
}
function switch_text()
{
window.document.form_1.textarea_1.value = text_array[window.document.form_1.select_1.selectedIndex][window.document.form_1.select_2.selectedIndex];
}
function box()
{
if (window.document.form_1.select_2.selectedIndex == 0)
{
alert("Where do you think you're going?");
} else {
if (open_in_newwindow==1)
window.open(url_array[window.document.form_1.select_1.selectedIndex][window.document.form_1.select_2.selectedIndex],"_blank");
else
window.location=url_array[window.document.form_1.select_1.selectedIndex][window.document.form_1.select_2.selectedIndex]
}
}
function set_orig()
{
window.document.form_1.select_1.selectedIndex = 0;
window.document.form_1.select_2.selectedIndex = 0;
}
window.onload=set_orig
// -->
</script>
<form name="form_1" onSubmit="return false;">
<p> <br>
<!-- This should be the same as the general instructions in the above code. -->
<select name="select_1" onChange="switch_select(); switch_text();">
<option>Select A City</option>
<option>Karachi</option>
<option>Lahore</option>
<option>Peshawar</option>
</select>
<select name="select_2" onChange="switch_text();">
<option>You need to select a City</option>
<option> </option>
<option> </option>
</select>
</p>
<p>
<textarea wrap="virtual" name="textarea_1" rows=6 cols=40>First select a City then The Area.</textarea>
</p>
<p>
<input type="submit" onClick="box();" value="Go!">
</p>
</form>
</body>
the goal i want to achieve through my code is at the link below:
http://www.safeandhealthychicken.com/HTML/findkns.aspx
PLEASE HELP .. thanks in advance