By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,008 Members | 2,962 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,008 IT Pros & Developers. It's quick & easy.

*Please Help*

P: n/a
Hi there!
Newbie here... :-)
I'm trying to validate a form but can't seem to get it to work... Here's a
copy of the code:
The user has to select a color for every select box. How is this done???
Many thanks
Ann
Ottawa Canada
****************
<HTML>
<HEAD>
<Title>My color test</Title>
<script>

function displayColors(form)
{
var colorArray = new Array(3);
var box1Index, box2Index, box3Index;
var myString='';

box1Index=document.form1.color1.selectedIndex;
box2Index=document.form1.color2.selectedIndex;
box3Index=document.form1.color3.selectedIndex;

colorArray[0]=document.form1.color1[box1Index].value;
colorArray[1]=document.form1.color2[box2Index].value;
colorArray[2]=document.form1.color3[box3Index].value
for (i=0; i<3; i++)
{
switch(i)
{
case 0:
myString="first";
break;

case 1:
myString="second";
break;

case 2:
myString="third";
break;

default:
myString=""
}
switch (colorArray[i])
{
case "1":
document.write('<FONT COLOR="blue">');
document.write("you selected blue as your " + myString +" color<br>")
document.write('</FONT>')
break;

case "2":
document.write('<FONT COLOR="red">');
document.write("you selected red as your " + myString +" color<br>")
document.write('</FONT>')
break;

case "3":
document.write('<FONT COLOR="black">');
document.write("you selected black as your " + myString +" first
color<br>")
document.write('</FONT>')
break;

default:
document.write("no color<BR>");
}//end switch
}//end for
}//end function

function validateOnSubmit(form)
{
/*??????*/
}

</script>
</HEAD>
<BODY>
<form name=form1 onsubmit="validateOnSubmit(this.form)">
Pick color 1:
<SELECT id=color1 name=color1 style="WIDTH: 180px">
<OPTION value = "0">Select a color
<OPTION value = "1" name="blue">Blue
<option value = "2" name="red">Red
<option value = "3" name="black">Black
</OPTION></SELECT>
<br><br>
Pick color 2:
<SELECT id=color2 style="WIDTH: 180px" name=color2>
<OPTION value = "0"> Select a color
<OPTION value = "1" name="blue">Blue
<option value = "2" name="red">Red
<option value = "3" name="black">Black
</OPTION></SELECT>
<br><br>
Pick color 3:
<SELECT id=color3 style="width: 180px" name=color3>
<OPTION value = "0"> Select a color
<OPTION value = "1" name="blue">Blue
<option value = "2" name="red">Red
<option value = "3" name="black">Black
</OPTION></SELECT>
<br>
<input TYPE=BUTTON NAME="cmdCalc" VALUE="GO"
onClick=displayColors(this.form)>
</BODY>
</HTML>

Jul 23 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
"Ann Duguay" <an*************@yahoo.ca> wrote in message news:<Zy**************@news04.bloor.is.net.cable.r ogers.com>...
Hi there!
Newbie here... :-)
I'm trying to validate a form but can't seem to get it to work... Here's a
copy of the code:
The user has to select a color for every select box. How is this done???
Many thanks
Ann
Ottawa Canada
****************


Is this your first attempt to learn programming? Is this a student
project?

I ask this because most progammers would just let the data in the DOM
and because selecting a color per select box seems contrived.

Document.write can only be used to insert html into the file when the
document is loading. In your case the file has been loaded, you need
to try somehting like innerHTML. To keep it simple, you may just want
to put up an alert box.

Robert
Jul 23 '05 #2

P: n/a
Hi Robert!
Nope.. not a school project :-) I'm getting a little too old for school.
I'm trying to help out a friend that's doing something in HTML but doesn't
have any javascript knowledge. After looking at some code, I thought it
would be easy but I'm having a difficult time.

Her project is a little more complex as it has 55 questions with select
boxes for each and every questions needs to be answered. Upon completion, a
score is calculated based on the answers the user gives and a color report
is printed to the screen (color also is score dependent).

Hence, my small piece of code. I figured I'd start small but I'm stuck with
the validation. All I want to do is to alert the user when the user hasn't
selected anything (or the value is 0).

Thx for taking the time to look at my code.
Ann
"Robert" <rc*******@my-deja.com> wrote in message
news:c6**************************@posting.google.c om...
"Ann Duguay" <an*************@yahoo.ca> wrote in message

news:<Zy**************@news04.bloor.is.net.cable.r ogers.com>...
Hi there!
Newbie here... :-)
I'm trying to validate a form but can't seem to get it to work... Here's a copy of the code:
The user has to select a color for every select box. How is this done??? Many thanks
Ann
Ottawa Canada
****************


Is this your first attempt to learn programming? Is this a student
project?

I ask this because most progammers would just let the data in the DOM
and because selecting a color per select box seems contrived.

Document.write can only be used to insert html into the file when the
document is loading. In your case the file has been loaded, you need
to try somehting like innerHTML. To keep it simple, you may just want
to put up an alert box.

Robert

Jul 23 '05 #3

P: n/a
In article <__**********************@news01.bloor.is.net.cabl e.rogers.com>,
an*************@yahoo.ca enlightened us with...
Hi Robert!
Nope.. not a school project :-) I'm getting a little too old for school.
I'm trying to help out a friend that's doing something in HTML but doesn't
have any javascript knowledge. After looking at some code, I thought it
would be easy but I'm having a difficult time.

Her project is a little more complex as it has 55 questions with select
boxes for each and every questions needs to be answered. Upon completion, a
score is calculated based on the answers the user gives and a color report
is printed to the screen (color also is score dependent).

Hence, my small piece of code. I figured I'd start small but I'm stuck with
the validation. All I want to do is to alert the user when the user hasn't
selected anything (or the value is 0).

I'll give you some hints.
box1Index=document.form1.color1.selectedIndex; That is not as cross-browser as
box1Index=document.forms["form1"].elements["color1"].selectedIndex;

Now, your function has the form passed in, so you can do
function displayColors(frm)
Note that I changed "form" to "frm" because I have this thing about having a
variable with the same name as an already defined object ("form" is already
an object in JS).

So, you passed in "frm", so
box1Index=frm.elements["color1"].selectedIndex;
....
colorArray[0]=frm.elements["color1"].options[box1Index].value;

.... document.write('<FONT COLOR="black">'); Don't do that.
document.write can cause odd problems with an already open document.
Instead, use a div and innerHTML or DOM methods createElement and
appendChild.

....
<form name=form1 onsubmit="validateOnSubmit(this.form)"> should be
<form name="form1" onsubmit="return validateOnSubmit(this.form)">
The function validateOnSubmit should return true to submit and false to
cancel.

Your object attributes should all be quoted. You have invalid HTML that IE
will accept, but other browsers will puke on. Options must have end tags.
<option>something</option>
You have some that do and some that don't.
Go validate your page with the W3C. This looks like something made in
Frontpage. IOW, invalid HTML. ;)

.... onClick=displayColors(this.form)

should be
onClick="displayColors(this.form)"

As to the validation you asked about, all your selects have an option as the
first one (selectedIndex=0) that basically tells the user to select a color.
Just have your validator check that for each select the selectedIndex is not
0.

<SELECT id="color2" style="WIDTH: 180px" name="color2">
<OPTION value = "0"> Select a color </option>

the function has something like

function validateOnSubmit(frm)
{
if (frm.elements["color2"].selectedIndex == 0)
{
alert("You must select an option for color2.");
return false;
}
// put more checks here

// get here, all passed
return true;
}
HTH
--
--
~kaeli~
Well, aren't we just a flipping ray of sunshine?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #4

P: n/a
Thanks Kaeli! Your input was very helpful :) The only thing that I'm
not clear on is:

....
document.write('<FONT COLOR="black">'); Don't do that.
document.write can cause odd problems with an already open document.
Instead, use a div and innerHTML or DOM methods createElement and
appendChild.

As mentioned, I'm new at this. If you can, I would love an example of
this.
Anyway, thanks again for your help. I'm learning lots.
Ann
Ottawa ON Canada
kaeli <ti******@NOSPAM.comcast.net> wrote in message news:<MP************************@nntp.lucent.com>. .. In article <__**********************@news01.bloor.is.net.cabl e.rogers.com>,
an*************@yahoo.ca enlightened us with...
Hi Robert!
Nope.. not a school project :-) I'm getting a little too old for school.
I'm trying to help out a friend that's doing something in HTML but doesn't
have any javascript knowledge. After looking at some code, I thought it
would be easy but I'm having a difficult time.

Her project is a little more complex as it has 55 questions with select
boxes for each and every questions needs to be answered. Upon completion, a
score is calculated based on the answers the user gives and a color report
is printed to the screen (color also is score dependent).

Hence, my small piece of code. I figured I'd start small but I'm stuck with
the validation. All I want to do is to alert the user when the user hasn't
selected anything (or the value is 0).


I'll give you some hints.
box1Index=document.form1.color1.selectedIndex;

That is not as cross-browser as
box1Index=document.forms["form1"].elements["color1"].selectedIndex;

Now, your function has the form passed in, so you can do
function displayColors(frm)
Note that I changed "form" to "frm" because I have this thing about having a
variable with the same name as an already defined object ("form" is already
an object in JS).

So, you passed in "frm", so
box1Index=frm.elements["color1"].selectedIndex;
...
colorArray[0]=frm.elements["color1"].options[box1Index].value;

...
document.write('<FONT COLOR="black">');

Don't do that.
document.write can cause odd problems with an already open document.
Instead, use a div and innerHTML or DOM methods createElement and
appendChild.

...
<form name=form1 onsubmit="validateOnSubmit(this.form)">

should be
<form name="form1" onsubmit="return validateOnSubmit(this.form)">
The function validateOnSubmit should return true to submit and false to
cancel.

Your object attributes should all be quoted. You have invalid HTML that IE
will accept, but other browsers will puke on. Options must have end tags.
<option>something</option>
You have some that do and some that don't.
Go validate your page with the W3C. This looks like something made in
Frontpage. IOW, invalid HTML. ;)

...
onClick=displayColors(this.form)

should be
onClick="displayColors(this.form)"

As to the validation you asked about, all your selects have an option as the
first one (selectedIndex=0) that basically tells the user to select a color.
Just have your validator check that for each select the selectedIndex is not
0.

<SELECT id="color2" style="WIDTH: 180px" name="color2">
<OPTION value = "0"> Select a color </option>

the function has something like

function validateOnSubmit(frm)
{
if (frm.elements["color2"].selectedIndex == 0)
{
alert("You must select an option for color2.");
return false;
}
// put more checks here

// get here, all passed
return true;
}
HTH
--

Jul 23 '05 #5

P: n/a
"Ann Duguay" <an*************@yahoo.ca> wrote in message news:<__**********************@news01.bloor.is.net .cable.rogers.com>...
Hi Robert!
Nope.. not a school project :-) I'm getting a little too old for school.
I'm trying to help out a friend that's doing something in HTML but doesn't
have any javascript knowledge. After looking at some code, I thought it
would be easy but I'm having a difficult time.
Programming with Javascript in a web browser requires learning a lot.
Just because Javascript doesn't have pointers doesn't make programming
easy.

I suggest programming in Netscape 7.1 or firefox. Once you have
things working test in IE. The best book on javascript is
"javascript: The definitive guide" by David Flanagan.

Once you get tired of the alert boxes, see my post:
http://groups.google.com/groups?hl=e....earthlink.net

It wrapped. See the second post on Re: Debug - Your own console.
Her project is a little more complex as it has 55 questions with select
boxes for each and every questions needs to be answered. Upon completion, a
score is calculated based on the answers the user gives and a color report
is printed to the screen (color also is score dependent).


This may get you started. I tested this in Netscape 7.1 and IE 5.2 on
MacOS 10.2.6. Be sure to have popup windows enabled!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<Title>My color test</Title>
<script type="text/javascript">

function displayColors(form)
{
alert("in dislayColors. Display results in a popup window.");
var aDate = new Date();
var colorList = ["none","blue","red","black"];
var windowName = "myWindowColor";
newWindow = window.open("",windowName,
"scrollbars=yes,resizable=yes,width=700,height=500 ");

newWindow.document.writeln(
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">');
newWindow.document.writeln(
"<html>");
newWindow.document.writeln(
"<header><title>Window " + windowName + "</title></header>");
newWindow.document.writeln(
"<body><p>The information that follows was generated on "
+ aDate + "</p>");
for (var i=1; i<=3; i++)
{
var boxColor=form.elements["color" + i].value;

newWindow.document.writeln(
"<p><span style='color:" + colorList[boxColor] + "';>" +
"You picked color "+ colorList[boxColor] +
" for input number " + i + "." +
"</span></p>");
}

return true;
} //end function

function processColors(form)
{
alert("in processColors.");
// form contains a reference to the current form
var boxColor;

for (var i=1; i<=3; i++)
{
boxColor=form.elements["color" + i].value;
alert("boxColor = " + boxColor);
if (boxColor == 0 )
{
alert("You need to pick a color for " + i + ".");
return false;
}
}
displayColors(form);
return true;
} //end function

function validateOnSubmit(form)
{
alert("in validateOnSubmit.");
}

</script>
</HEAD>
<BODY>
<!-- I believe that you need to have a HTML submit button
for the form to be submitted and your onsubmit event
handler to get control. -->
<form name="form1"
onsubmit="validateOnSubmit(this.form)">
Pick color 1:
<SELECT name="color1" name=color1 style="WIDTH: 180px">
<OPTION value = "0">Select a color
<OPTION value = "1" name="blue">Blue
<option value = "2" name="red">Red
<option value = "3" name="black">Black
</OPTION></SELECT>
<br><br>
Pick color 2:
<!-- I avoid having duplicate id & name names.
There is a lot of confusion of when to use
id and name. I am confused too. name seems
to be the one used
for forms. id seems to be the newer one.
Don't know what happens when use both with the same
name. -->
<SELECT name="color2" style="WIDTH: 180px">
<OPTION value = "0"> Select a color
<OPTION value = "1" name="blue">Blue
<option value = "2" name="red">Red
<option value = "3" name="black">Black
</OPTION></SELECT>
<br><br>
Pick color 3:
<SELECT name="color3" style="width: 180px">
<OPTION value = "0"> Select a color
<OPTION value = "1" name="blue">Blue
<option value = "2" name="red" >Red
<option value = "3" name="black">Black
</OPTION></SELECT>
<br>
<input TYPE=BUTTON NAME="cmdCalc" VALUE="GO"
onClick="processColors(this.form)">

</BODY>
</HTML>
Robert
Jul 23 '05 #6

P: n/a
In article <ae**************************@posting.google.com >,
an*******@yahoo.ca enlightened us with...
Thanks Kaeli! Your input was very helpful :) The only thing that I'm
not clear on is:

...
document.write('<FONT COLOR="black">');

Don't do that.
document.write can cause odd problems with an already open document.
Instead, use a div and innerHTML or DOM methods createElement and
appendChild.

As mentioned, I'm new at this. If you can, I would love an example of
this.
Anyway, thanks again for your help. I'm learning lots.


Search the archives for people who did it and it caused their problem. *grin*

Long link:
http://groups.google.com/groups?hl=en&lr=&ie=UTF-8
&q=javascript+document.write+wiped+out&btnG=Sea rch

tiny:
http://tinyurl.com/6d3uk

'document.write' is a bad way to do pretty much anything. It can work in some
situations (writing dynamic content to brand new windows, such as popups, it
works just fine) and is the only way to get dynamic content in Netscape 4,
but since it's dicey and NN4 is old, it's pretty much outlived its
usefulness.
The thing is, you can often use it to write to a layer without killing
things, but a lot of times it ends up not doing what you wanted it to do.
It's kind of like "eval" - most of the time it's used, it causes more
problems than it solves.

If you are at all familiar with C, it's kind of like using a pointer (char *)
when a character array (char[50]) will do. Both can work, but one can really
get you into trouble if you don't use it right. *g*

HTH
--
--
~kaeli~
Once you've seen one shopping center, you've seen a mall.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.