JS: two sets of required fields in one form

[Oleg]

Hello there:

I've been trying to create two different sets of required fields in
one form and to use a

radiobutton as sort of a switcher between these sets.

In my HTML form there are two radiobuttons with values 'Via Email' and
'Printed Brochure'.

If a user checks 'Via Email' radiobutton, he/she has to fill out Email
and Name fields

only, if it's radiobutton 'Printed Brochure' is checked, a user has to
fill Email, Name

and ALSO Address field.

I use this script below, but it doesn't seem to work, and I can't get
it why....

I'd appreciate it if somebody would help me with this.

<script type="text/javascript">
function validate()
{
x=document.myFo rm
varCheckedButto n=x.receiveVia. value
varName=x.Name. value
varEmail=x.Emai l.value
varAddress=x.Ad dress.value
if (varCheckedButt on==byEmail)
{
if (varEmail==-1)
{
alert("Please fill in Email")
submitOK="False "
}
if (varName.length ==0)
{
alert("You must enter your Name")
submitOK="False "
}
if (submitOK=="Fal se")
{
return false
}
}
else
{
if (varCheckedButt on==printed)
{
if (varEmail==-1)
{
alert("Please fill in Email")
submitOK="False "
}
if (varName.length ==0)
{
alert("You must enter your Name")
submitOK="False "
}
if (varAddress.len gth==0)
{
alert("You must enter your Address")
submitOK="False "
}
}
}
}
</script>

<form name="myForm" action="" method="POST"
enctype="x-www-form-urlencoded">

<p><input type="radio" name="receiveVi a" value="printed" >&nbsp;Printe d
brochure</p>
<p><input type="radio" name="receiveVi a" value="byEmail" >&nbsp;Via
Email</p>

<p><input type="image" src="submit.gif " border="0" value="Submit"
width="75" height="17"

ALT="Submit button" onClick="valida te();"></p>

</form>

Thanks in advance.
Oleg

[Shawn Milo]

Re: JS: two sets of required fields in one form

ollykrem@yahoo. com (Oleg) wrote in message news:<b5d766cc. 0405050657.40eb ba2f@posting.go ogle.com>...[color=blue]
> Hello there:
>
> I've been trying to create two different sets of required fields in
> one form and to use a
>
> radiobutton as sort of a switcher between these sets.
>
> In my HTML form there are two radiobuttons with values 'Via Email' and
> 'Printed Brochure'.
>
> If a user checks 'Via Email' radiobutton, he/she has to fill out Email
> and Name fields
>
> only, if it's radiobutton 'Printed Brochure' is checked, a user has to
> fill Email, Name
>
> and ALSO Address field.
>
> I use this script below, but it doesn't seem to work, and I can't get
> it why....
>
> I'd appreciate it if somebody would help me with this.
>
> <script type="text/javascript">
> function validate()
> {
> x=document.myFo rm
> varCheckedButto n=x.receiveVia. value
> varName=x.Name. value
> varEmail=x.Emai l.value
> varAddress=x.Ad dress.value
> if (varCheckedButt on==byEmail)
> {
> if (varEmail==-1)
> {
> alert("Please fill in Email")
> submitOK="False "
> }
> if (varName.length ==0)
> {
> alert("You must enter your Name")
> submitOK="False "
> }
> if (submitOK=="Fal se")
> {
> return false
> }
> }
> else
> {
> if (varCheckedButt on==printed)
> {
> if (varEmail==-1)
> {
> alert("Please fill in Email")
> submitOK="False "
> }
> if (varName.length ==0)
> {
> alert("You must enter your Name")
> submitOK="False "
> }
> if (varAddress.len gth==0)
> {
> alert("You must enter your Address")
> submitOK="False "
> }
> }
> }
> }
> </script>
>
> <form name="myForm" action="" method="POST"
> enctype="x-www-form-urlencoded">
>
> <p><input type="radio" name="receiveVi a" value="printed" >&nbsp;Printe d
> brochure</p>
> <p><input type="radio" name="receiveVi a" value="byEmail" >&nbsp;Via
> Email</p>
>
> <p><input type="image" src="submit.gif " border="0" value="Submit"
> width="75" height="17"
>
> ALT="Submit button" onClick="valida te();"></p>
>
> </form>
>
> Thanks in advance.
> Oleg[/color]



Well, part of the problem is that you do not have all of the objects
in the HTML form that you do in the script. Here is what I have so
far. I reformatted a bit so that I could read it more easily.

Once you get this to the next step, post the function, and, if
you're still having any problems, I'll take another whack at it.
I'd do it now, but I can see that you're not finished writing it
yet, and I got past the first stumbling block I hit.

Your original: x=document.myFo rm
does not work. You'd have to use either:

x = eval(document.m yForm);

or

x = document.forms['myForm'];
//This one requires that the form
//have an id. The XHTML standard
//requires a <form> to have an 'id'
//attribute, and the 'name' attribute
//is disallowed.


There are some other style changes I'd make, like the
'if' structure, but I can worry about that once we have
functionality.

Shawwn


<script type="text/javascript">
function validate(){
var x = document.forms['myForm'];
varCheckedButto n = x.receiveVia.va lue;
varName = x.Name.value;
varEmail = x.Email.value;
varAddress = x.Address.value ;

if (varCheckedButt on==byEmail){
if (varEmail==-1){
alert("Please fill in Email");
submitOK="False ";
}

if (varName.length ==0){
alert("You must enter your Name")
submitOK="False "
}

if (submitOK=="Fal se"){
return false
}

}else{

if (varCheckedButt on==printed){

if (varEmail==-1){
alert("Please fill in Email")
submitOK="False "
}

if (varName.length ==0){
alert("You must enter your Name")
submitOK="False "
}

if (varAddress.len gth==0){
alert("You must enter your Address")
submitOK="False "
}
}
}
}
</script>

[Ron]

Re: JS: two sets of required fields in one form

Oleg wrote:
[color=blue]
>Hello there:
>
>I've been trying to create two different sets of required fields in
>one form and to use a
>
>radiobutton as sort of a switcher between these sets.
>
>In my HTML form there are two radiobuttons with values 'Via Email' and
>'Printed Brochure'.
>
>If a user checks 'Via Email' radiobutton, he/she has to fill out Email
>and Name fields
>
>only, if it's radiobutton 'Printed Brochure' is checked, a user has to
>fill Email, Name
>
>and ALSO Address field.
>
>I use this script below, but it doesn't seem to work, and I can't get
>it why....
>
>I'd appreciate it if somebody would help me with this.
>
>
>[/color]
Heya Oleg,
Direct strings must be quoted. An unquoted "string" like you had before
is a variable. Likewise, you have not declared a variable called
"submitOK" and it is not a predefined variable. If you meant to declare
it within the conditionals, note that the scope of the "submitOK"
variable is confined to within the conditional block and undefined
elsewhere. You have to declare the variable in the largest block over
which you want it to have scope. Assuming you meant to use it as a way
for the form to stop being submitted, I've fixed the rest of the code.
Note that there's no reason to check whether "byEmail" has been
selected, so I removed the check:

<script type="text/javascript">
function validate() {
var x=document.myFo rm;
var vCheckedButton= x.receiveVia.va lue;
var vName=x.Name.va lue;
var vEmail=x.Email. value;
var vAddress=x.Addr ess.value;

if (vEmail.length= =0) {
alert("Please fill in Email");
}
else if (vName.length== 0) {
alert("You must enter your Name");
}
else if ((vCheckedButto n=="printed") && (vAddress.lengt h==0)) {
alert("You must enter your Address");
}
else {
x.submit();
}
}
</script>

<form name="myForm" action="" method="post"
enctype="x-www-form-urlencoded">
<input type="radio" name="receiveVi a" value="printed" id="printed" />
<label for="printed">& nbsp;Printed brochure</label>
<br />
<input type="radio" name="receiveVi a" value="byEmail" id="byEmail" />
<label for="byEmail">& nbsp;Via Email</label>
<br />
<button type="button" value="Submit" onclick="valida te()">
<img src="submit.gif " width="75" height="17" alt="Submit button" />
</button>
<br />
</form>
<noscript>Thi s form cannot be submitted without javascript
support</noscript>

[Ron]

Correction: Re: JS: two sets of required fields in one form

As by Shawn's reply, you should also fix the form access with an id
attribute, and "var x = document.getEle mentById("myFor m")".

[Randy Webb]

Re: Correction: Re: JS: two sets of required fields in one form

Ron wrote:[color=blue]
> As by Shawn's reply, you should also fix the form access with an id
> attribute, and "var x = document.getEle mentById("myFor m")".[/color]

I disagree. Use a name attribute, use the forms collection:

document.forms['formName'].elements['elementName'].property is more
widely supported, backwards compatible.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javas cript FAQ - http://jibbering.com/faq/

[Ron]

Re: Correction: Re: JS: two sets of required fields in one form

Randy Webb wrote:
[color=blue]
> I disagree. Use a name attribute, use the forms collection:
>
> document.forms['formName'].elements['elementName'].property is more
> widely supported, backwards compatible.[/color]

Heya Randy,
That depends on whether the client needs compatibility back to NN4. :)
XHTML doesn't support forms with name attributes, but luckily will
ignore unknown attributes and their values.

[Robert]

Re: JS: two sets of required fields in one form

ollykrem@yahoo. com (Oleg) wrote in message news:<b5d766cc. 0405050657.40eb ba2f@posting.go ogle.com>...[color=blue]
> Hello there:
>
> I've been trying to create two different sets of required fields in
> one form and to use a
>
> radiobutton as sort of a switcher between these sets.
>[/color]

Here is another version of file.

The address field is only displayed when needed.


Robert

<html>
<head>
<title>Radio buttons</title>

<style type="text/css">
..PictureStyle {position:relat ive; visibility:hidd en;}
</style>

<script type="text/javascript">

function validate()
{
// You need a var before a variable to make it local to this
// function. Without the var keyward, the variable is global.
// It is a good practice to minimize global variables.

var x = document.forms["myForm"];

// I find starting the varible with var... is confusing, but
// I left them as is. It is easy to forget to declare them.

var varCheckedButto n;

// Figure out which radio button was pressed
if (x.receiveVia[0].checked == true)
{ varCheckedButto n = x.receiveVia[0].value;}
else if (x.receiveVia[1].checked == true)
{ varCheckedButto n = x.receiveVia[1].value;}
else
{ varCheckedButto n = '';}

var varName = x.theName.value ;
var varEmail = x.theEmail.valu e;
var varAddress = x.theAddress.va lue;

alert("varCheck edButton = " + varCheckedButto n +
" varName = " + varName +
" varEmail = " + varEmail +
" varAddress = " + varAddress);

// I changed submitOK to a boolean variable.
var submitOK = true;

// Validate email: name and email

if (varCheckedButt on == "byEmail")
{
alert("verifyin g email fields.");

if (varName == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress != '')
{
alert("Please erase the address field.");
submitOK = false;
}

return submitOK;

}

// Validate print: name, email, and address

else if (varCheckedButt on=="printed")
{
alert("Verifyin g printed fields");
// Error message should be in the order on the form
if (varName.length == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email")
submitOK = false;
}
if (varAddress == '')
{
alert("You must enter your Address");
submitOK = false;
}

return submitOK;
}
else
{
alert("You need to select either email or print.");
return false;
}

}

function showHidden(doWh at)
{
document.getEle mentById("field 3").style.visib ility = doWhat;
}
</script>



</head>

<body>

<p>Please try out our form.</p>

<form name="myForm"
action="http://www.wsc.ma.edu/webstudents/CommWebSite/randomimages_2. pl"
method="POST"
enctype="x-www-form-urlencoded">

<p><input type="radio" name="receiveVi a" value="printed"
onclick="showHi dden('visible') ;">&nbsp;Printe d
brochure</p>
<p><input type="radio" name="receiveVi a" value="byEmail"
onclick="showHi dden('hidden');
document.forms['myForm'].theAddress.val ue = '';">&nbsp;Via
Email</p>
<!-- I like to use component names to avoid conflicts with
reserved words. -->
<p>Name:<br>
<input type="text" name="theName" size="20"><br>< br>
Email:<br>
<input type="text" name="theEmail" size="20"><br>
<div id="field3"
class="PictureS tyle">
Postal address:<br>
<input type="text" name="theAddres s" size="40">
</div>
</p>

<p><input type="image" src="submit.gif " border="0" value="Submit"
width="75" height="17"

ALT="Submit button" onClick="return validate();"></p>

</form>

<script type="text/javascript">
// In the case of a reload, the radio button may already be clicked.
// This code needs to be after the form.
var x = document.forms["myForm"];
if (x.receiveVia[0].checked == true)
{ showHidden('vis ible');}
else if (x.receiveVia[1].checked == true)
{ showHidden('hid den');}
else
{ alert("Somethin g is amiss here.");}

</script>
</body>
</html>

[Michael Winter]

Re: Correction: Re: JS: two sets of required fields in one form

On Thu, 06 May 2004 03:07:23 GMT, Ron <webmaster@slid er142.com> wrote:
[color=blue]
> Randy Webb wrote:
>[color=green]
>> I disagree. Use a name attribute, use the forms collection:
>>
>> document.forms['formName'].elements['elementName'].property is more
>> widely supported, backwards compatible.[/color]
>
> That depends on whether the client needs compatibility back to NN4. :)
> XHTML doesn't support forms with name attributes,[/color]

The forms and elements collections can look up elements by ordinal, name,
and id. In fact, if the argument is a string, ids are checked before
names. Backward compatibility is irrelevant.

The possibility remains that control access through the collections will
be faster than by a gEBI call. The content of the collections could be
implemented so that it is actually an array[1] containing only forms, and
form controls, respectively[2]. If this is the case, it will be much
quicker to index it than to search the entire document tree for an id.
[color=blue]
> but luckily will ignore unknown attributes and their values.[/color]

XHTML will ignore unknown attributes? I thought that an unknown attribute
would cause the markup to be invalid (it is in HTML), which would cause a
conforming browser to immediately halt parsing the document.

Am I missing something?

Mike


[1] Not a true array. It would have to be dynamic.
[2] A slower implementation would check other elements, but only return an
element of the correct type.

--
Michael Winter
M.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

[Ron]

Re: Correction: Re: JS: two sets of required fields in one form

Michael Winter wrote:
[color=blue]
> The forms and elements collections can look up elements by ordinal,
> name, and id. In fact, if the argument is a string, ids are checked
> before names. Backward compatibility is irrelevant.
>
> The possibility remains that control access through the collections
> will be faster than by a gEBI call. The content of the collections
> could be implemented so that it is actually an array[1] containing
> only forms, and form controls, respectively[2]. If this is the case,
> it will be much quicker to index it than to search the entire document
> tree for an id.
>[/color]
Heya Michael,
Thanks. Good to know these details. :)
[color=blue]
> XHTML will ignore unknown attributes? I thought that an unknown
> attribute would cause the markup to be invalid (it is in HTML), which
> would cause a conforming browser to immediately halt parsing the
> document.[/color]

Unknown attributes and elements are free to be written into XHTML
documents for forward compatibility. See

http://www.w3.org/TR/2001/REC-xhtml-modularization-20010410/conformance.html#s_conform_user_agent

..

[Michael Winter]

Re: Correction: Re: JS: two sets of required fields in one form

On Thu, 06 May 2004 13:29:49 GMT, Ron <webmaster@slid er142.com> wrote:
[color=blue]
> Michael Winter wrote:[/color]

[Using collections]
[color=blue][color=green]
>> The possibility remains that control access through the collections
>> will be faster than by a gEBI call. The content of the collections
>> could be implemented so that it is actually an array[1] containing only
>> forms, and form controls, respectively[2]. If this is the case, it will
>> be much quicker to index it than to search the entire document tree for
>> an id.[/color]
>
> Thanks. Good to know these details. :)[/color]

Don't forget that the potential for speed increase is conjecture and
depends on the implementation used.
[color=blue][color=green]
>> XHTML will ignore unknown attributes? I thought that an unknown
>> attribute would cause the markup to be invalid (it is in HTML), which
>> would cause a conforming browser to immediately halt parsing the
>> document.[/color]
>
> Unknown attributes and elements are free to be written into XHTML
> documents for forward compatibility. See
> http://www.w3.org/TR/2001/REC-xhtml-...orm_user_agent
> .[/color]

I assumed that the well-formed condition applied to the elements and
attributes used. As I said, unknown elements and attributes in HTML are
considered errors, so I assumed that would be true in XHTML, too. Thanks
for the correction.

Mike

--
Michael Winter
M.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

[Oleg]

Re: JS: two sets of required fields in one form

Hi there:

thanks to all who replied and took time to provide me with your
scripts. It is terrific help. I'm going to try all of it.


Thanks, people !

Oleg

ollykrem@yahoo. com (Oleg) wrote in message news:<b5d766cc. 0405050657.40eb ba2f@posting.go ogle.com>...[color=blue]
> Hello there:
>
> I've been trying to create two different sets of required fields in
> one form and to use a
>
> radiobutton as sort of a switcher between these sets.
>
> In my HTML form there are two radiobuttons with values 'Via Email' and
> 'Printed Brochure'.
>
> If a user checks 'Via Email' radiobutton, he/she has to fill out Email
> and Name fields
>
> only, if it's radiobutton 'Printed Brochure' is checked, a user has to
> fill Email, Name
>
> and ALSO Address field.
>
> I use this script below, but it doesn't seem to work, and I can't get
> it why....
>
> I'd appreciate it if somebody would help me with this.
>
> <script type="text/javascript">
> function validate()
> {
> x=document.myFo rm
> varCheckedButto n=x.receiveVia. value
> varName=x.Name. value
> varEmail=x.Emai l.value
> varAddress=x.Ad dress.value
> if (varCheckedButt on==byEmail)
> {
> if (varEmail==-1)
> {
> alert("Please fill in Email")
> submitOK="False "
> }
> if (varName.length ==0)
> {
> alert("You must enter your Name")
> submitOK="False "
> }
> if (submitOK=="Fal se")
> {
> return false
> }
> }
> else
> {
> if (varCheckedButt on==printed)
> {
> if (varEmail==-1)
> {
> alert("Please fill in Email")
> submitOK="False "
> }
> if (varName.length ==0)
> {
> alert("You must enter your Name")
> submitOK="False "
> }
> if (varAddress.len gth==0)
> {
> alert("You must enter your Address")
> submitOK="False "
> }
> }
> }
> }
> </script>
>
> <form name="myForm" action="" method="POST"
> enctype="x-www-form-urlencoded">
>
> <p><input type="radio" name="receiveVi a" value="printed" >&nbsp;Printe d
> brochure</p>
> <p><input type="radio" name="receiveVi a" value="byEmail" >&nbsp;Via
> Email</p>
>
> <p><input type="image" src="submit.gif " border="0" value="Submit"
> width="75" height="17"
>
> ALT="Submit button" onClick="valida te();"></p>
>
> </form>
>
> Thanks in advance.
> Oleg[/color]

[Lasse Reichstein Nielsen]

Re: Correction: Re: JS: two sets of required fields in one form

Michael Winter <M.Winter@bluey onder.co.invali d> writes:
[color=blue]
> The possibility remains that control access through the collections
> will be faster than by a gEBI call.[/color]

The possibility also remains that it's not :)
So, I made a (quick) test:
<URL:http://www.infimum.dk/privat/formAccessTimin g.html>
The results were very browser dependent.
In IE, forms was almost twice as fast as gEBI, but both were
like molasses compared to Moz FB and Opera. In Moz FB, gEBI was
actually fastest - forms took 1.5 times as long. In Opera, the
overall fastest of the three (more than 10x the speed of IE),
forms was fastest by a tiny bit.
[color=blue]
> The content of the collections could be implemented so that it is
> actually an array[1] containing only forms, and form controls,
> respectively[2].[/color]

That is not efficient when you do a lookup by name. I would hope that
name lookup uses a hash map or somthing similar, however I would not
be surpriced if IE uses a linear lookup like it does for object
properties.
[color=blue]
> If this is the case, it will be much quicker to
> index it than to search the entire document tree for an id.[/color]

There is no reason for gEBI not to be backed by a hash map too.
It would indeed be inefficient to search the tree, so why do it? :)
[color=blue]
> XHTML will ignore unknown attributes?[/color]

Specifications ignore a lot :)
[color=blue]
> I thought that an unknown attribute would cause the markup to be
> invalid (it is in HTML), which would cause a conforming browser to
> immediately halt parsing the document.[/color]

Conformant implementations however ... :) Yep, you are right.
[color=blue]
> Am I missing something?[/color]

Only that browsers are very error tolerant.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Michael Winter]

Re: Correction: Re: JS: two sets of required fields in one form

On Thu, 06 May 2004 21:33:54 +0200, Lasse Reichstein Nielsen
<lrn@hotpop.com > wrote:
[color=blue]
> Michael Winter <M.Winter@bluey onder.co.invali d> writes:
>[color=green]
>> The possibility remains that control access through the collections
>> will be faster than by a gEBI call.[/color]
>
> The possibility also remains that it's not :)[/color]

That's why I chose words like "possibilit y", "could", and "if".
[color=blue]
> So, I made a (quick) test:
> <URL:http://www.infimum.dk/privat/formAccessTimin g.html>
> The results were very browser dependent.[/color]

I did mention that, just not in that particular post.
[color=blue]
> In IE, forms was almost twice as fast as gEBI, but both were
> like molasses compared to Moz FB and Opera. In Moz FB, gEBI was
> actually fastest - forms took 1.5 times as long. In Opera, the
> overall fastest of the three (more than 10x the speed of IE),
> forms was fastest by a tiny bit.
>[color=green]
>> The content of the collections could be implemented so that it is
>> actually an array[1] containing only forms, and form controls,
>> respectively[2].[/color]
>
> That is not efficient when you do a lookup by name.[/color]

Errm, yes. That would be much more sensible. :/

[snip]
[color=blue]
> There is no reason for gEBI not to be backed by a hash map too.
> It would indeed be inefficient to search the tree, so why do it? :)[/color]

Reduce memory usage? :)

Wouldn't a map be based on tree structure anyway?
[color=blue][color=green]
>> XHTML will ignore unknown attributes?[/color]
>
> Specifications ignore a lot :)
>[color=green]
>> I thought that an unknown attribute would cause the markup to be
>> invalid (it is in HTML), which would cause a conforming browser to
>> immediately halt parsing the document.[/color]
>
> Conformant implementations however ... :) Yep, you are right.[/color]

Always nice to know. :D
[color=blue][color=green]
>> Am I missing something?[/color]
>
> Only that browsers are very error tolerant.[/color]

I grudgingly admit that tolerance is necessary with HTML (there isn't much
choice anymore), but there's no reason not to strictly follow XHTML. Then
again, if IE just converts it to HTML, people developing with IE as their
test browser won't see anything wrong with malformed code. If that's the
case, I suppose Opera, Mozilla, and all the others wouldn't have any
option but to follow suit, or face the wrath of idiots screaming, "Why
won't my badly written code work on your browser?!"

Mike

--
Michael Winter
M.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

[Robert]

Re: JS: two sets of required fields in one form

>[color=blue]
> Here is another version of file.
>[/color]

I have made a few revisions to the file. I added support for older
versions of IE and I put the div tag in the document only when I am
able to modify the div. I changed to the submit onsubmit event
handler. I found netscape 4.x didn't like onclick. I changed the
action to a dummie site.


Robert

<html>
<head>
<title>Radio buttons</title>

<style type="text/css">
..formStyle {position:relat ive; visibility:visi ble;}
</style>

<script type="text/javascript">

function validate()
{
// You need a var before a variable to make it local to this
// function. Without the var keyward, the variable is global.
// It is a good practice to minimize global variables.

var x = document.forms["myForm"];

// I find starting the varible with var... is confusing, but
// I left them as is. It is easy to forget to declare them.

var varCheckedButto n;

// Figure out which radio button was pressed
if (x.receiveVia[0].checked == true)
{ varCheckedButto n = x.receiveVia[0].value;}
else if (x.receiveVia[1].checked == true)
{ varCheckedButto n = x.receiveVia[1].value;}
else
{ varCheckedButto n = '';}

var varName = x.theName.value ;
var varEmail = x.theEmail.valu e;
var varAddress = x.theAddress.va lue;

alert("varCheck edButton = " + varCheckedButto n +
" varName = " + varName +
" varEmail = " + varEmail +
" varAddress = " + varAddress);

// I changed submitOK to a boolean variable.
var submitOK = true;

// Validate email: name and email

if (varCheckedButt on == "byEmail")
{
alert("verifyin g email fields.");

if (varName == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress != '')
{
alert("Please erase the address field.");
submitOK = false;
}

return submitOK;

}

// Validate print: name, email, and address

else if (varCheckedButt on=="printed")
{
alert("Verifyin g printed fields");
// Error message should be in the order on the form
if (varName.length == '')
{
alert("Please fill in your Name");
submitOK = false;
}
if (varEmail == '')
{
alert("Please fill in Email");
submitOK = false;
}
if (varAddress == '')
{
alert("You must enter your Address");
submitOK = false;
}

return submitOK;
}
else
{
alert("You need to select either email or print.");
return false;
}

}

function showHidden(doWh at)
{
// Check if the getElementById method is available
if (document.getEl ementById)
{
document.getEle mentById("field 3").style.visib ility = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.fi eld3.style.visi bility = doWhat;
}
else
{ alert("Cannot change visibility of address field"); }
}
</script>

</head>

<body>

<p>Please try out our form.</p>

<form name="myForm"
action="http://www.nonamedomai n.com"
method="POST"
onsubmit="alert ('submitting'); return validate();">
<!-- semicolons (;) are recommended in event handlers like onclick -->
<p><input type="radio" name="receiveVi a" value="printed"
onclick="showHi dden('visible') ;">&nbsp;Printe d
brochure</p>
<p><input type="radio" name="receiveVi a" value="byEmail"
onclick="showHi dden('hidden');
document.forms['myForm'].theAddress.val ue = '';">&nbsp;Via
Email</p>
<!-- I like to use component names to avoid conflicts with
reserved words. -->
<p>Name:<br>
<input type="text" name="theName" size="20"><br>< br>
Email:<br>
<input type="text" name="theEmail" size="20"><br>
<script type="text/javascript">
// Only insert a div if we can change it
if (document.getEl ementById || document.all)
{ document.write( "<div id='field3' class='formStyl e'>");}
</script>
Postal address:<br>
<input type="text" name="theAddres s" size="40">
<script type="text/javascript">
if (document.getEl ementById || document.all)
{ document.write( "</div>");}
</script>
</p>
<!-- Netscape 4.x doesn't seem to support the onclick event
handler, so I moved the checking code to the form
onsubmit. Netscape doesn't support the alt tag. -->
<p><input type="image" src="submit.gif " border="0" value="Submit"
width="75" height="17"

ALT="Submit button"></p>

</form>

<script type="text/javascript">
// In the case of a reload, the radio button may already be clicked.
// This code needs to be after the form.
var x = document.forms["myForm"];
if (x.receiveVia[0].checked == true)
{ showHidden('vis ible');}
else if (x.receiveVia[1].checked == true)
{ showHidden('hid den');}
else
{ ;}

</script>
</body>
</html>

[Mike Preston]

Re: JS: two sets of required fields in one form

On 7 May 2004 20:26:31 -0700, rccharles@my-deja.com (Robert) wrote:
[color=blue][color=green]
>>
>> Here is another version of file.
>>[/color]
>
>I have made a few revisions to the file. I added support for older
>versions of IE and I put the div tag in the document only when I am
>able to modify the div. I changed to the submit onsubmit event
>handler. I found netscape 4.x didn't like onclick. I changed the
>action to a dummie site.[/color]

If the user puts in a single space the validation will succeed. That
probably isn't what you intended.

mike