Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

If one form value is true, another is required... 3

Status
Not open for further replies.
castus

castus

Technical User
Joined
May 27, 2005
Messages
7
Location
GB


I have 3 text boxes - email, phone and mobile preferred method of response checkboxes. So if the user checks the box for wanting to be emailed back they must have entered an email address or if they wanting phoning they must have entered a phone number etc and they cannot submit the form until they have done so.

I don't really have a problem validating forms it's just how to compare the
boxes if the other is checked.


input name="email" type="text" class="form_blocks" id="email" size="25" max
length="30" />
input name="phone" type="text" class="form_blocks" id="phone" size="25" max
length="30" />
input name="mobile" type="text" class="form_blocks" id="mobile" size="25" ma
xlength="30" />

input name="preferred" type="checkbox" value="Phone" />
input name="preferred" type="checkbox" value="Mobile" />
input name="preferred" type="checkbox" value="Email" />

Any help on the above would really be appreciated.

 
Sort by date Sort by votes
Code: 
// Within the function that you use to validate the form test each checkbox like this.
 . . .
if ( document.forms[0].prefer_phone.checked &&
      document.forms[0].phone.value == "" ) {
   alert("Sorry!  The phone number must be provided if you wish to be contacted by telephone.");
   return false;
}
 . . .
// Give each checkbox a different name.
 
Upvote 0 Downvote
Brut force showing the idea behind is this. Add this block within the submit's validation routine.
[tt]
for (var i=0;i<document.formname.preferred.length;i++) {
switch (i) {
case 0:
if (document.formname.phone.value.length==0) {
alert("You have to fill in phone number.");
document.formname.phone.focus();
return false;
}
break;
case 1:
if (document.formname.mobile.value.length==0) {
alert("You have to fill in mobile number.");
document.formname.mobile.focus();
return false;
}
break;
case 2:
if (document.formname.email.value.length==0) {
alert("You have to fill in email address.");
document.formname.email.focus();
return false;
}
break;
}
}
[/tt]
Thing sure can be made more systematic and concise if you design name matching between checkboxes and the input text fields.

- tsuji
 
Upvote 0 Downvote
Correction:
I've missed out the checked conditional.
[tt]
for (var i=0;i<document.formname.preferred.length;i++) {
[red]if (document.formname.preferred.checked) {[/red]
switch (i) {
case 0:
if (document.formname.phone.value.length==0) {
alert("You have to fill in phone number.");
document.formname.phone.focus();
return false;
}
break;
case 1:
if (document.formname.mobile.value.length==0) {
alert("You have to fill in mobile number.");
document.formname.mobile.focus();
return false;
}
break;
case 2:
if (document.formname.email.value.length==0) {
alert("You have to fill in email address.");
document.formname.email.focus();
return false;
}
break;
}
[red]}[/red]
}
[/tt]
 
Upvote 0 Downvote
castus,

Be sure you take tsuji's advice regarding field names.

This is just a little different approach.

Code: 
<script>
var ckObj = new Object();  
function ck_Rads(obj, val){  
         if(!ckObj[val]) {
             ckObj[val] = true;
             return; }
         else {
               ckObj[val] = false;
               return; }
}

function ck_Texts(form){
         for(fields in ckObj){
             if(ckObj[fields]){
             if(form[fields].value == ''){
             alert("Please fill in the " +fields+ " field..");
             return false; }
             }
          }
          return true;
}         
</script>
</head>
<body>
<form onsubmit="return ck_Texts(this)">
<input name="email" type="text" class="form_blocks" id="email"  size="25" maxlength="30" />
<input name="phone" type="text" class="form_blocks" id="phone"  size="25" maxlength="30" />
<input name="mobile" type="text" class="form_blocks" id="mobile" size="25" maxlength="30" />

<input name="preferred" type="checkbox" value="phone" onclick="ck_Rads(this, this.value)" />
<input name="preferred" type="checkbox" value="mobile" onclick="ck_Rads(this, this.value)" />
<input name="preferred" type="checkbox" value="email" onclick="ck_Rads(this, this.value)" />
<input type="submit">
</form>


Hope it's helpful.

Good Place to "Learn More">>
 
Upvote 0 Downvote
Hi and thank you all.

I'm a little unsure what you mean regarding the field names. Do you mean I should rename the checkboxes to match the input text fields? Like rac2 says.
 
Upvote 0 Downvote
Not exactly.

In my post I stated it wrong.

What I'm suggesting is(if you use something like my example) that your values of your checkboxes match the text input names.
 
Upvote 0 Downvote
Oh I see. Yeah I had originally named them the same, like in your post. Except mine had caps on checkbox value and not on text input field.

But thanks for clearing that up!

:)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question Question
Buttons not aligned after another button is clicked
Replies
2
Views
682
gmmastros
gmmastros
198709km
  • Locked
  • Question Question
Grouping XML key value using XSLT
Replies
0
Views
949
198709km
198709km
berkshirea
  • Locked
  • Question Question
Radio Button Clicked, Another Radio Becomes Mandatory
Replies
2
Views
868
berkshirea
berkshirea
JScannell
  • Locked
  • Question Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
952
JScannell
JScannell
waubain
  • Locked
  • Question Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined
Replies
2
Views
729
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top