I asked in the chat, and nobody knew, so I figured I’d ask here, see if anybody would.
In an HTML document, let’s say I have a drop-down menu and a set* amount of boxes. If I use the menu to select an item, is there a way to have all the boxes fill with pertinent information? I don’t know how I’d store the data, but I’d imagine there’s some way.
*: If this is possible, would it have to be a set amount of boxes?
Yes. You’d do something like this (replace [ with <):
[SCRIPT LANGUAGE=“JavaScript”]
function changeStuff() {
myString = document.form1.comboBox.options[document.form1.comboBox.selectedItem].value; //the currently selected value of the combo box
if (myString.equals(“option1”)) document.form1.box1.value = “someValue1”; //set the text box to some value
else document.form1.box1.value = “someValue2”; //set it to some other value
(etc…)
}
[/SCRIPT]
(in body of page)
[SELECT NAME=“comboBox” onChange=“changeStuff()”]
You can also look at something called DOM (Domain Object Manager). It’s a powerful add-on to JavaScript that lets you add actual text to a page, rather than just set the value of text boxes. It’s a bit tricky to use, though. DOM will also let you add new form elements rather than just changing existing ones.
Drop boxes are supported in standard HTML; you don’t necessarily need to use Javascript. Just choose whichever way is easiest for you: HTML or Javascript.
http://www.w3schools.com/html/html_forms.asp
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select2
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select3
I know the menus are easy, but it’s the “filling the box” that’s harder.
Cid, you’ve confused me. I’m not quite sure where to put the options or the boxes to fill in, along with the info to put it in.
I mean, the whole JavaScript part confuses me. Where do I put in the form options? Do I still use the form tags?
Do you have an example of what you want to do, Cala?
Basically, it’d look like this:
(DROP DOWN MENU)
Sairan
GG Crono 4
etc.
(/END MENU)
HP: (BOX) / (BOX)
MP: (BOX) / (BOX)
STR: (BOX) / (BOX)
etc…
Those’re all numbers.
SKILLS
(BOX) (BOX) (BOX)
etc…
This goes TEXT NUMBER PERCENT (so like Hot 30 50%).
Have you ever used JavaScript before? ^^; I was under the impression you had… I’ll be a little more specific then.
Your HTML page will look something like this (as always, replace [] with <>)
[HEAD]
[SCRIPT LANGUAGE="JavaScript"]
function changeStuff() //note the name of this function; it's called whenever the combo box is changed.
{ myString = document.form1.comboBox.options[document.form1.comboBox.selectedItem].value;
// That line gets the value of the currently selected item in the combo box and stores it in myString.
// Note that "form1" is the NAME of the form inside the HTML page, and "comboBox" is the NAME of the combo box.
// Now we look at that value and change the boxes' values, like so:
if (myString == "GG Crono4") document.form1.hp1.value = "50"; //Crono's HP
else if (myString == "Cala") document.form1.hp1.value = "100"; //Cala's HP
else (.....)
//repeat for all other boxes
}
[/SCRIPT]
[/HEAD]
[BODY]
[FORM NAME="form1"]
[SELECT NAME="comboBox" onChange="changeStuff()"]
[OPTION]GG Crono4[/OPTION]
[OPTION]Cala[/OPTION]
(etc.... list all the rest of the options)
[/SELECT]
[INPUT NAME="hp1"] (this will be filled when the combo box is changed)
etc..... (the other boxes)
[/FORM]
[/BODY]
Does that help a little?
Just a quick question: How do I put text before the box?
And is it possible to put two boxes on the same line? Or would that need tabling?
You can treat the boxes like text or images. For example,
HP: [INPUT TYPE=“text” NAME=“hp1”] MP: [INPUT TYPE=“text” NAME=“mp1”]
But using tables would make it line up nicer, yes.
Now, do I need to mess with the myString = document line at all? I’m thinking all I need to change are the values that will be displayed and just copy, paste and rename the boxes.
Also, because there are multiple boxes, how would I set up so it’d fill more at once? I currently have this:
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function changeStuff() //note the name of this function; it's called whenever the combo box is changed.
{ myString = document.form1.comboBox.options<document.form1.comboBox.selectedItem>.value;
// That line gets the value of the currently selected item in the combo box and stores it in myString.
// Note that "form1" is the NAME of the form inside the HTML page, and "comboBox" is the NAME of the combo box.
// Now we look at that value and change the boxes' values, like so:
if (myString == "GG") document.form1.hp1.value = "50"; //Crono's HP
else if (myString == "AnTwan") document.form1.hp1.value = "100"; //Cala's HP
else if (myString == "Yoshi"") document.form1.hp1.value = "30"; //Yoshi's HP
else if (myString == "Serigo"") document.form1.hp1.value = "30"; //Serigo's HP
else if (myString == "Jono"") document.form1.hp1.value = "30"; //Jono's HP
else if (myString == "Katie"") document.form1.hp1.value = "30"; //Katie's HP
else if (myString == "Sairan"") document.form1.hp1.value = "30"; //Sairan's HP
//repeat for all other boxes
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<SELECT NAME="comboBox" onChange="changeStuff()">
<OPTION>GG</OPTION>
<OPTION>AnTwan</OPTION>
<OPTION>Yoshi</OPTION>
<OPTION>Serigo</OPTION>
<OPTION>Jono</OPTION>
<OPTION>Katie</OPTION>
<OPTION>Sairan</OPTION>
</SELECT>
<INPUT NAME="hp1">
</FORM>
</BODY></HTML>
But it’s only doing this:
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function changeStuff() //note the name of this function; it's called whenever the combo box is changed.
{ myString = document.form1.comboBox.options<document.form1.comboBox.selectedItem>.value;
// That line gets the value of the currently selected item in the combo box and stores it in myString.
// Note that "form1" is the NAME of the form inside the HTML page, and "comboBox" is the NAME of the combo box.
// Now we look at that value and change the boxes' values, like so:
if (myString == "GG") document.form1.hp1.value = "50"; //Crono's HP
else if (myString == "AnTwan") document.form1.hp1.value = "100"; //Cala's HP
else if (myString == "Yoshi"") document.form1.hp1.value = "30"; //Yoshi's HP
else if (myString == "Serigo"") document.form1.hp1.value = "30"; //Serigo's HP
else if (myString == "Jono"") document.form1.hp1.value = "30"; //Jono's HP
else if (myString == "Katie"") document.form1.hp1.value = "30"; //Katie's HP
else if (myString == "Sairan"") document.form1.hp1.value = "30"; //Sairan's HP
//repeat for all other boxes
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<SELECT NAME="comboBox" onChange="changeStuff()">
<OPTION>GG</OPTION>
<OPTION>AnTwan</OPTION>
<OPTION>Yoshi</OPTION>
<OPTION>Serigo</OPTION>
<OPTION>Jono</OPTION>
<OPTION>Katie</OPTION>
<OPTION>Sairan</OPTION>
</SELECT>
<INPUT NAME="hp1">
</FORM>
</BODY></HTML>
OK… let’s say you want to add two more boxes, one for MP called “mp1” and one for something else called “someOtherBox”. Basically you’d change the JavaScript code thusly:
if (myString == “CC”)
{ document.form1.hp1.value = “50”;
document.form1.mp1.value = “100”;
document.form1.someOtherBox.value = “doofus”;
}
else if (myString == “Cat In The Hat”)
{ document.form1.hp1.value = “30”;
document.form1.mp1.value = “76”;
document.form1.someOtherBox.value = “foobar”;
}
else…
And in the body of the HTML page, you’d just stick in
[INPUT TYPE=“text” NAME=“mp1”]
[INPUT TYPE=“text” NAME=“someOtherBox”]
wherever you like.
I don’t know why, but it still won’t fill in the boxes… This is what I’ve got.
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function changeStuff() //note the name of this function; it's called whenever the combo box is changed.
{ myString = document.form1.comboBox.options<document.form1.comboBox.selectedItem>.value;
// That line gets the value of the currently selected item in the combo box and stores it in myString.
// Note that "form1" is the NAME of the form inside the HTML page, and "comboBox" is the NAME of the combo box.
// Now we look at that value and change the boxes' values, like so:
if (myString == "GG")
{ document.form1.hp1.value = "50"; //Crono's HP
document.form1.mp1.value = "30"; // Crono's MP
}
else if (myString == "AnTwan")
{ document.form1.hp1.value = "100"; //Cala's HP
document.form1.mp1.value = "30"; // Crono's MP
}
else if (myString == "Yoshi"")
{ document.form1.hp1.value = "30"; //Yoshi's HP
document.form1.mp1.value = "30"; // Crono's MP
}
else if (myString == "Serigo")
{ document.form1.hp1.value = "30"; //Serigo's HP
document.form1.mp1.value = "30"; // Crono's MP
}
else if (myString == "Jono")
{ document.form1.hp1.value = "30"; //Jono's HP
document.form1.mp1.value = "30"; // Crono's MP
}
else if (myString == "Katie")
{ document.form1.hp1.value = "30"; //Katie's HP
document.form1.mp1.value = "30"; // Crono's MP
}
else if (myString == "Sairan")
{ document.form1.hp1.value = "30"; //Sairan's HP
document.form1.mp1.value = "30"; // Crono's MP
}
//repeat for all other boxes
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<SELECT NAME="comboBox" onChange="changeStuff()">
<OPTION>GG</OPTION>
<OPTION>AnTwan</OPTION>
<OPTION>Yoshi</OPTION>
<OPTION>Serigo</OPTION>
<OPTION>Jono</OPTION>
<OPTION>Katie</OPTION>
<OPTION>Sairan</OPTION>
</SELECT>
<INPUT TYPE="text" NAME="hp1">
<INPUT TYPE="text" NAME="mp1">
</FORM>
</BODY></HTML>
I can select them from the menu, but there’s no filling in.
My bad… change the first line (that starts with myString = ) to the following (with square brackets instead of angle ones):
myString = document.form1.comboBox.options[document.form1.comboBox.selectedIndex].value;
Also, get rid of the second " after Yoshi. It should work after that.
Still not working. I fixed the “” in Yoshi, too.
I ran it through NetScape JavaScript Console, and it said the error was in the first line, because it said it was because the file was a .html, but I don’t think that’s right. 
Huh? O_o That doesn’t make any sense.
Can you paste the exact file you’re using as well as the exact error Netscape printed out?
Error: syntax error
Source File: javascript: http://cala.nulani.net/ffrpg/forms.html
Line: 1, Column: 39
Source Code:
http://cala.nulani.net/ffrpg/forms.html
The source can be viewed in the HTML file “forms.html.”
I’m really confused here. It’s working perfectly fine in Mozilla (which shares an engine with Netscape). Netscape seems to be treating the URL like a JavaScript command, i.e.
“javascript:http://cala.nulani.net/ffrpg/forms.html”
…whereas it should just be looking at it as a regular URL. I’m not sure what the problem is there, but it should be working fine if you just go to the page and try it out.
However, it’s not working in IE… but neither am I getting any errors in it! Can anybody else tell me what’s going on when they try it in their browsers?
I don’t get any error messages. It’ll run in AOL, but it’s a bit slow in IE. On the forms, I can just see the drop-down with the names, but changing them does nothing.