Simple JS "How To" question

[elso]

Hello

I think this question should be a simple one. Here is the scenario:
I have 2 dropdown options list & one
text field.

#1: First dropdown is:

<select name="print" class="TextField">
                      <option value="Print First Image as Right Handed">Yes
                      <option value="Print First Image as Left Handed">No
                      <option value="Print as a Full Wrap">Full Wrap                    
                      </select>

#2: The text field:

<input name="pn" type="text" id="pn" value="441" size="5">

#3: Last option dropdown:

<select name="more" class="TextField">
                    <option>Yes</option>
                    <option selected>No</option>
                  </select>

What needs to happen is, when a user selects Yes or No from #1, #2 value needs to be "441". If the user selects "Full Wrap" from #1, then the text field "pn" in #2 would need to be "wrap".
Last thing that needs to happen, if the user selects "Full Wrap" from the option list in #1 and then selects "Yes" from the "more" list, I would need a basic "Alert" telling the user their choices are not a valid combination. In short, if "print" option = "Full Wrap" then the "more" value can only = No.

Thanks
Nelson

[ADAM Web Design]

First of all, if you have the #2 field as "text" vs. "hidden" the user can manipulate it. So if you want specific values for that field, make it a hidden field.

Now, as far as determining the "text" for #1 (you don't actually want the value since the value is the option value part), you'd write something like this:

So...you want to use the selectedText property. If it were me personally, I'd write it to a variable so I can follow along later.

Something like:

var selectedItem = document.(your form name).print.options.selectedIndex; // this returns the number (0, 1, 2) that corresponds with the item you've selected from the form box.
var selectedText = document.(your form name).print.options[selectedItem].selecctedText // This will read the text portion from the selected item, which is the part you want to compare.

From here, you'd just check to see if selectedText was equal to "Full Wrap". If it was, then your "pn" field would be "wrap". Otherwise, it'd be "441".

As far as the #3 scenario goes, you could do this a few ways:

1) When "Full Wrap" is selected, regenerate the list box so that only the "No" option is available in the first place (i.e. delete the "Yes" option) and vice versa.

2) When the form is processed on the server-side (assuming it is), have an if condition stating that "if the Full Wrap is selection, the More field value can only be no."

Personally, I'd find #2 easier and since some people have JS disabled for security reasons, you've got a workaround for them too.[/code]

[elso]

Thank you for your input. I realize the text field is to be hidden. I made it a text field just so I could watch what was going on until I stumbled on a "how to" I work a lot by "trial & error" I figuared out a combination that works in IE & FireFox. Of course I really have no idea if it is correct except that it seem to work:-)

<script language="JavaScript" type="text/JavaScript">
function setpn1()
{
if (document.form2.print.value=="Print First Image as Right Handed"||document.form2.print.value=="Print First Image as Left Handed") {
document.form2.pn1.value='441'
}
if (document.form2.print.value=="Print as a Full Wrap") {
document.form2.pn1.value='wrap'
}
if (document.form2.print.value=="Print as a Full Wrap"&&document.form2._browser_out.value=="mug-second.htm") {
alert ('You have selected a full wrap print, which prints your image all the way around the mug. Thus you can not add a second print side to your full wrap image!');
(document.form2._browser_out.value="mug-personal.htm");
}
if (document.form2.nowrap.value=="on"&&document.form2.print.value=="Print as a Full Wrap") {
alert ('You have selected one of our images to print.
Our images are not sized to fit full wrap printing.');
(document.form2.print.value="Print First Image as Right Handed");
(document.form2.pn1.value="441");
}
}
</script>

I actually put the JS in an external file to reduce the clutter on the page.
Here are the 3 fields with an extra one for future use in there also.

<select name="print" class="TextField" onChange="setpn1()">
<option value="Print First Image as Right Handed">Yes
<option value="Print First Image as Left Handed">No
<option value="Print as a Full Wrap">Full Wrap
</select>
<input name="pn1" type="hidden" id="pn1">
<input name="nowrap" type="hidden" id="nowrap" value="off">
<select name="_browser_out" class="TextField" id="_browser_out" onChange="setpn1()">
<option value="mug-second.htm">Yes
<option value="mug-personal.htm" selected>No
</select>

Is my syntax correct? It works, but that does not mean it's correct.

This is a small portion of a rather complex order form. I know some will have their JS turned off and i will be writing a <noscript> version as well. But the noscript version will need to be a bit wordy with instructions, and leave plenty of room for error, so I don't want the noscript version to be the default.

Thank you
Nelson

[ADAM Web Design]

"Correct" in the sense that you've described it is rather subjective.

My own personal preference and that of many others is to create variables for the various form elements and assign their values to them.

For example, document.form2 could be var theForm = document.form2.

Also, this is me being anal, but even though it takes up file size and a VERY slight (like 0.00000000001 seconds) hit in processing time, I prefer spaces between the words (e.g. condition1 || condition2).

Also, the first condition could be moved down below the second condition and could be the "else" condition (since the pn1 value is either going to be "wrap" or "441".

You may also want to look at putting your assigned values in " instead of ' just for ease of readability too. Both work, but the former is more consistent with the rest of your code.

[elso]

I have tried using the "else", but was never quit able to get the syntax right. So before I pulled the rest of hair out, I opted to go with the redundant "if"s. I am not quite sure about the use of the "var" yet either. I am not a good "text book" learner. I learn more from examples and other scripts downloaded. This is my very first script I put together from scratch rather then finding somthing close that i could follow and modify to suit my needs. Back in the olden days of DOS I got rather fluent working with "if/then/else" statements, so the concept of JS is not new, just the syntax. I have an interst in learning JS because I can relate, but scripting is not my line of business and it seems the older we get the less hours we have in a day to learn new stuff:-) I will take your recomendation about the spaces though... I too have a tendicy to be a bit anal.

Thank you very much for conversing with me.
Nelson