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.myForm
varCheckedButton=x.receiveVia.value
varName=x.Name.value
varEmail=x.Email.value
varAddress=x.Address.value
if (varCheckedButton==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=="False")
{
return false
}
}
else
{
if (varCheckedButton==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.length==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="receiveVia" value="printed">&nbsp;Printed
brochure</p>
<p><input type="radio" name="receiveVia" 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="validate();"></p>

</form>

Thanks in advance.
Oleg

 

[Shawn Milo]

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.myForm
varCheckedButton=x.receiveVia.value
varName=x.Name.value
varEmail=x.Email.value
varAddress=x.Address.value
if (varCheckedButton==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=="False")
{
return false
}
}
else
{
if (varCheckedButton==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.length==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="receiveVia" value="printed">&nbsp;Printed
brochure</p>
<p><input type="radio" name="receiveVia" 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="validate();"></p>

</form>

Thanks in advance.
Oleg

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.myForm
does not work. You'd have to use either:

x = eval(document.myForm);

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'];
varCheckedButton = x.receiveVia.value;
varName = x.Name.value;
varEmail = x.Email.value;
varAddress = x.Address.value;

if (varCheckedButton==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=="False"){
return false
}

}else{

if (varCheckedButton==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.length==0){
alert("You must enter your Address")
submitOK="False"
}
}
}
}
</script>

 

[Ron]

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.

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.myForm;
var vCheckedButton=x.receiveVia.value;
var vName=x.Name.value;
var vEmail=x.Email.value;
var vAddress=x.Address.value;

if (vEmail.length==0) {
alert("Please fill in Email");
}
else if (vName.length==0) {
alert("You must enter your Name");
}
else if ((vCheckedButton=="printed") && (vAddress.length==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="receiveVia" value="printed" id="printed" />
<label for="printed">&nbsp;Printed brochure</label>
<br />
<input type="radio" name="receiveVia" value="byEmail" id="byEmail" />
<label for="byEmail">&nbsp;Via Email</label>
<br />
<button type="button" value="Submit" onclick="validate()">
<img src="submit.gif" width="75" height="17" alt="Submit button" />
</button>
<br />
</form>
<noscript>This form cannot be submitted without javascript
support</noscript>

 

[Ron]

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

 

[Randy Webb]

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

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

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

 

[Ron]

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

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

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]

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.

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:relative; visibility:hidden;}
</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 varCheckedButton;

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

var varName = x.theName.value;
var varEmail = x.theEmail.value;
var varAddress = x.theAddress.value;

alert("varCheckedButton = " + varCheckedButton +
" varName = " + varName +
" varEmail = " + varEmail +
" varAddress = " + varAddress);

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

// Validate email: name and email

if (varCheckedButton == "byEmail")
{
alert("verifying 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 (varCheckedButton=="printed")
{
alert("Verifying 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(doWhat)
{
document.getElementById("field3").style.visibility = 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="receiveVia" value="printed"
onclick="showHidden('visible');">&nbsp;Printed
brochure</p>
<p><input type="radio" name="receiveVia" value="byEmail"
onclick="showHidden('hidden');
document.forms['myForm'].theAddress.value = '';">&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="PictureStyle">
Postal address:<br>
<input type="text" name="theAddress" 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('visible');}
else if (x.receiveVia[1].checked == true)
{ showHidden('hidden');}
else
{ alert("Something is amiss here.");}

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

 

[Michael Winter]

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

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

That depends on whether the client needs compatibility back to NN4.
XHTML doesn't support forms with name attributes,

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.

but luckily will ignore unknown attributes and their values.

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.

 

[Ron]

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.

Heya Michael,
Thanks. Good to know these details.

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.

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]

Michael Winter wrote:

[Using collections]

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.

Thanks. Good to know these details.

Don't forget that the potential for speed increase is conjecture and
depends on the implementation used.

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
.

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

 

[Oleg]

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

 

[Lasse Reichstein Nielsen]

The possibility remains that control access through the collections
will be faster than by a gEBI call.

The possibility also remains that it's not
So, I made a (quick) test:
<URL:http://www.infimum.dk/privat/formAccessTiming.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.

The content of the collections could be implemented so that it is
actually an array[1] containing only forms, and form controls,
respectively[2].

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.

If this is the case, it will be much quicker to
index it than to search the entire document tree for an id.

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?

XHTML will ignore unknown attributes?

Specifications ignore a lot

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.

Conformant implementations however ... Yep, you are right.

Am I missing something?

Only that browsers are very error tolerant.

/L

 

[Michael Winter]

The possibility also remains that it's not

That's why I chose words like "possibility", "could", and "if".

So, I made a (quick) test:
<URL:http://www.infimum.dk/privat/formAccessTiming.html>
The results were very browser dependent.

I did mention that, just not in that particular post.

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.

The content of the collections could be implemented so that it is
actually an array[1] containing only forms, and form controls,
respectively[2].

That is not efficient when you do a lookup by name.

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

[snip]

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?

Reduce memory usage?

Wouldn't a map be based on tree structure anyway?

Specifications ignore a lot


Conformant implementations however ... Yep, you are right.

Always nice to know.

Only that browsers are very error tolerant.

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

 

[Robert]

Here is another version of file.

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:relative; visibility:visible;}
</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 varCheckedButton;

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

var varName = x.theName.value;
var varEmail = x.theEmail.value;
var varAddress = x.theAddress.value;

alert("varCheckedButton = " + varCheckedButton +
" varName = " + varName +
" varEmail = " + varEmail +
" varAddress = " + varAddress);

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

// Validate email: name and email

if (varCheckedButton == "byEmail")
{
alert("verifying 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 (varCheckedButton=="printed")
{
alert("Verifying 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(doWhat)
{
// Check if the getElementById method is available
if (document.getElementById)
{
document.getElementById("field3").style.visibility = doWhat;
}
else if (document.all)
{
alert("Running an older version of IE.");
document.all.field3.style.visibility = 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.nonamedomain.com"
method="POST"
onsubmit="alert('submitting');return validate();">
<!-- semicolons ( are recommended in event handlers like onclick -->
<p><input type="radio" name="receiveVia" value="printed"
onclick="showHidden('visible');">&nbsp;Printed
brochure</p>
<p><input type="radio" name="receiveVia" value="byEmail"
onclick="showHidden('hidden');
document.forms['myForm'].theAddress.value = '';">&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.getElementById || document.all)
{ document.write("<div id='field3' class='formStyle'>");}
</script>
Postal address:<br>
<input type="text" name="theAddress" size="40">
<script type="text/javascript">
if (document.getElementById || 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('visible');}
else if (x.receiveVia[1].checked == true)
{ showHidden('hidden');}
else
{ ;}

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

 

[Mike Preston]

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.

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

mike