473,434 Members | 1,834 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,434 software developers and data experts.

*Please Help*

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
6 1369
"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
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
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
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
"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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Kurt Watson | last post by:
I’m having a different kind of problem with Hotmail when I sign in it says, "Web Browser Software Limitations Your Current Software Will Limit Your Ability to Use Hotmail You are using a web...
7
by: x muzuo | last post by:
Hi guys, I have got a prob of javascript form validation which just doesnt work with my ASP code. Can any one help me out please. Here is the code: {////<<head> <title>IIBO Submit Page</title>...
7
by: tyler_durden | last post by:
thanks a lot for all your help..I'm really appreciated... with all the help I've been getting in forums I've been able to continue my program and it's almost done, but I'm having a big problem that...
23
by: Jason | last post by:
Hi, I was wondering if any could point me to an example or give me ideas on how to dynamically create a form based on a database table? So, I would have a table designed to tell my application...
13
by: Joner | last post by:
Hello, I'm having trouble with a little programme of mine where I connect to an access database. It seems to connect fine, and disconnect fine, but then after it won't reconnect, I get the error...
1
by: David Van D | last post by:
Hi there, A few weeks until I begin my journey towards a degree in Computer Science at Canterbury University in New Zealand, Anyway the course tutors are going to be teaching us JAVA wth bluej...
1
PEB
by: PEB | last post by:
POSTING GUIDELINES Please follow these guidelines when posting questions Post your question in a relevant forum Do NOT PM questions to individual experts - This is not fair on them and...
0
by: 2Barter.net | last post by:
newsmail@reuters.uk.ed10.net Fwd: Money for New Orleans, AL & GA Inbox Reply Reply to all Forward Print Add 2Barter.net to Contacts list Delete this message Report phishing Show original
6
by: jenipriya | last post by:
Hi all... its very urgent.. please........i m a beginner in oracle.... Anyone please help me wit dese codes i hv tried... and correct the errors... The table structures i hav Employee (EmpID,...
5
by: tabani | last post by:
I wrote the program and its not giving me correct answer can any one help me with that please and specify my mistake please it will be highly appreciable... The error arrives from option 'a' it asks...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
1
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.