And back I come with new needs. Alright, using HTML and JavaScript, I’m trying to figure out the following:
[ul]
[li]How to allow users to input data and submit it, but only if everything is filled out
[/li][li]Allow users to create an addiotional input form/variable (say they start with only 4 boxes but need 5 or 6)
[/li][li]Do operations and random number generation using the given information
[/li][li]Be able to refer to values and look them up (i.e. they select items A and B in two drop-down menus, A has a value of 3 and B a value of 4, add them together in the results page)
[/li][li]Make a results page in a pre-defined format
[/li][/ul]
I tried looking on-line, but I don’t really get the stuff they show me. I work best when others help me with it, so sorry if I’m a nuisance.
EDIT: Using my previous page, I’m assuming I can just edit the info there and names and values and such in the first part, but do I need to do the if (myString == X) document.form1.etc… if they’re being selected from a drop-down menu, or is it possible to just do document.form1.etc… and have it just refer to the item listed?
Oof… that’s some major stuff there. I can’t help you with a quick fix on this. You’re really going to have to take out a book on JavaScript and start from scratch so you really understand well what you’re doing. -_- I will give an overview of what you’ll need to do:
Number 1 is contingent on number 5. Basically, instead of a submit button, use a regular button with “onClick=‘checkSubmit(this.form)’”. The checkSubmit(aForm) function would then check that each fields is filled in (tedious), and if so, call aForm.submit().
Number 2 will require DOM, an “add-on” to JavaScript that allows you to add HTML and form elements. It’s quite annoying to work with, though.
3 will require the parseInt() method, which turns a string into an integer. All form elements’ values are treated as strings by default. Once you have the integers it’s a breeze to work with them.
4 will require the Math.random() method.
5 is pretty easy once you know how to refer to fields’ values. E.g. a text box’s value will be document.(form name).(text box name).value. Combo fields are
document.(form name).(combo name).options[document.(form name).(combo name).selectedIndex].value
If you want to stay using JavaScript, number 6 will require using HTTP GET. Basically, you’ll want to do this after submittal:
And in “result.html” you will have to parse the URL and extract the names and values of your variables. It’s not a trivial problem, unfortunately.
I know most of that didn’t make sense, but like I said, you’re really going to have to know what you’re doing to do all this… it’s fairly powerful for JavaScript and it’s not simple.
The “3xAGI” part would reference a value given by the user and multiply the two together for the result, but I’m worried more about the first page right now…
How do I refer to an user given number in a form box? So if I named the input box “die1” or somesuch, I can get the number they input there for reference and use in math.
Alright, time to do a lot of copying and pasting. I’ll post the finished page with the input stuff sometime soon…
A question, though: Do I need to change “function changeStuff()” for every drop-down menu I use?
EDIT: Also, is it possible to change what other drop-down menus say based on a previous choice? Say if they choose “Expert” from one drop-down menu, the next would list several options, but if they chose “Warrior” it would show different options. And it would also affect some math operations too.
You can use changeStuff() to deal with every combo box if you like, but it’d make more sense to make a separate function for each combo box.
And yes, it’s possible to do those other things. You’d have to do something like this:
if (myString == “Expert”)
{document.form1.box2.options[0].value = “NewValue1”;
document.form1.box2.options[1].value = “NewValue2”;
etc…
}
Guh… I honestly don’t mind helping you, but I’m a bit busy and this is gonna take some time. ^^; And if you really want to do all the stuff you mentioned up top, you’re going to need a better grasp of HTML forms and JavaScript. I really recommend you just take a For Dummies™ book out of the library and read through it… you’ll find it’s easier to do what you want yourself rather than keeping asking me about it.
I don’t mind waiting to get help. I’ve tried the books, though; horrible experience for me. I learn best when I get help from others. I’m also getting help from a JS teacher and a kid pretty fluent with it, so between the three of you, it’s shaping up pretty fast, although you’re helping me fastest.
OK, then… let’s see. I think you’re confused about functions. A function is essentially an order to give. So if I put <SELECT onChange=“changeStuff()”> in my HTML page, that means "find the function “changeStuff()” and execute it, whenever this combo box is changed.
Now, you can’t have more than one function with the same name, because then the system won’t know which one you mean. So you’ll have to give them different names.
Also, function declarations (i.e. “function changeStuff()”) can’t be inside another function. That also doesn’t make much sense.
One last thing: Variables declared inside a function can’t be used in another function. So if you make “myString” in your first function, you can’t use it again in the next one, unless you pass it as an argument (which we’re not doing, nor do we really need to right now).
Here’s the code which does what I think you’re trying to do:
<html><head><title>Character Generator v1.0</title>
<script LANGUAGE="JavaScript">
function changeStuff()
{ var myClass = document.form1.comboClass.options[document.form1.comboClass.selectedIndex].value;
if (myClass == "Warrior")
{ document.form1.comboJob.options[0] = new Option("Archer", "Archer");
document.form1.comboJob.options[1] = new Option("Dragoon", "Dragoon");
}
else if (myClass == "Mage")
{
document.form1.comboJob.options[0] = new Option("White Mage", "White Mage");
document.form1.comboJob.options[1] = new Option("Black Mage", "Black Mage");
}
else if (myClass == "Expert")
{ document.form1.comboJob.options[0] = new Option("Dancer", "Dancer");
document.form1.comboJob.options[1] = new Option("Mime", "Mime");
}
else if (myClass == "Adept")
{ document.form1.comboJob.options[0] = new Option("White Caller", "White Caller");
document.form1.comboJob.options[1] = new Option("Black Caller", "Black Caller");
}
}
</script>
</head>
<body>
<input type="text" name="charaname">
<form name="form1">
<select name="comboClass" onChange="changeStuff()">
<option value="Warrior">Warrior</option>
<option value="Mage">Mage</option>
<option value="Expert">Expert</option>
<option value="Adept">Adept</option>
</select>
<P><SELECT NAME="comboJob">
</SELECT>
</form>
</body>
</html>
I get this error whenever I choose ANY drop-down menu right now.
Error: document.formweap5 has no properties
Source File: file://///XAV-student-9/006080$/My%20Documents/generator.html
Line: 342
I’ll upload the file I’m using in a few hours, as I don’t have access to it right now. Also, the Class affecting Job drop-down menu has stopped working, and it gives me no errors.
Unfortunately, no and no. I did have ICQ before it started slowing down my computer, and I’m not usually interested in random people chatting with me; I check my e-mail very often and that’s the best way to get ahold of me.
Anyhoo… don’t forget that you’re dealing with document.(form name).(field name).value. The form name has to actually exist, i.e. the field must be inside a <FORM NAME=“formName”> tag. I’d tell you to just have a single form name, which should make things easier. And the field name, such as <INPUT type=“text” name=“fieldName”> also has to exist inside that form.
Also, don’t forget to close your quotations for tag attributes. And don’t forget to have a closing </SELECT> after your last OPTION.
