JS: two sets of required fields in one form

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

ollykrem (AT) yahoo (DOT) com (Oleg) wrote in message news:<b5d766cc.0405050657.40ebba2f (AT) posting (DOT) google.com>...

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>

Oleg wrote:

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>

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

Ron wrote:

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.

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

Randy Webb wrote:

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.

On Thu, 06 May 2004 03:07:23 GMT, Ron <webmaster (AT) slider142 (DOT) com> wrote:

Randy Webb wrote:

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.

--
Michael Winter
M.Winter (AT) blueyonder (DOT) co.invalid (replace ".invalid" with ".uk" to reply)

Michael Winter wrote:

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-...orm_user_agent
..

On Thu, 06 May 2004 13:29:49 GMT, Ron <webmaster (AT) slider142 (DOT) com> wrote:

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.

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-...orm_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

--
Michael Winter
M.Winter (AT) blueyonder (DOT) co.invalid (replace ".invalid" with ".uk" to reply)

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 (AT) yahoo (DOT) com (Oleg) wrote in message news:<b5d766cc.0405050657.40ebba2f (AT) posting (DOT) google.com>...

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