Solved

Checkbox with mandatory textbox?

Posted on 2002-07-05
9
369 Views
Last Modified: 2012-06-27
Please help me. I have a form that has a checkbox with an adjacent textbox. If a user checks the box, they must enter an email address in the textbox. (the form will not submit if the checkbox is checked and nothing is in the textbox, else the form submits as normal)

The form already has an onSubmit event that calls a basic existing validation script.

Here's the basics:

<form name="myForm" method="post" action="content_go.asp" onSubmit="return CheckForm();">
<table>
<tr>
      <td class="win10T">
        <input type="checkbox" name="chkAnon" value="Yes">
        &nbsp;If checked, provide eMail:&nbsp;
        <input type="text" name="txtAnonEmail" maxlength="50" size="20">
      </td>
</tr>
</table>
</form>

<script language="javascript">
<!--
     
     function CheckForm()
     {
    var myFormChk = window.document.myForm;

      // Check the fields

.......form check stuff......
         }
</script>

Thank you kindly.
0
Comment
Question by:4ad
  • 5
  • 3
9 Comments
 
LVL 3

Expert Comment

by:davlun20080
ID: 7133317
Since you already have form validation, not sure what you are looking for as your form validation should catch this error already.  However if you are trying to catch it earlier, or want to force the user to enter something before continuing the form, take a look at this:

<HTML>
<BODY>
<FORM name="myform" METHOD=POST ACTION="">
<INPUT TYPE="checkbox" NAME="chkAnon" value="Yes" onclick="if(this.checked){document.myform.txtAnonEmail.focus()}">
<INPUT TYPE="text" NAME="txtAnonEmail" maxlength="50" size="20" onblur="if((this.value == '')&& (document.myform.chkAnon.checked)){document.myform.txtAnonEmail.focus();alert('When checkbox is checked, you must enter a value here')}">

</FORM>
<p>This script is a hack, not really nice to your users since the only way for them to leave the box is to enter someting, then they can uncheck the checkbox if it was a mistake....</p>  <h1> is this the kind of action you want? if you want something different let me know.</h1>
</BODY>
</HTML>

davlun
0
 
LVL 7

Expert Comment

by:axis_img
ID: 7133321
Try this... The email validation is quite loose, but you shouldn't use javascript for the nitty-gritty validation anyway. Let me know if you have any problems with it...


<form name="myForm" method="post" action="content_go.asp" onSubmit="return CheckForm();">
<table>
  <tr>
    <td class="win10T">
      <input type="checkbox" name="chkAnon" value="Yes">
       &nbsp;If checked, provide eMail:&nbsp;
      <input type="text" name="txtAnonEmail" maxlength="50" size="20">
      <br><input type="submit" value="Submit">
    </td>
  </tr>
</table>
</form>

<script language="javascript">
<!--

function CheckForm() {
     var myFormChk = window.document.myForm;

     // Check the fields
     // Other validation goes here...

     // Email validation routine...
     if(myFormChk.chkAnon.checked) {

          // remove all whitespace characters
          var email_value     = myFormChk.txtAnonEmail.value.replace(/\s/g, "");
          myFormChk.txtAnonEmail.value = email_value;

          // If it is empty, return false automatically
          if(email_value.length == 0) {
               AlertEmailError("Please enter an email address.");
               return false;
          }

          // Break the email apart
          var email_pieces = email_value.split("@");
          if(email_pieces.length != 2) {
               AlertEmailError("This seems to be an invalid email address.");
               return false;
          }

          // Check each piece
          if(email_pieces[0].length < 1 || email_pieces[1].length < 5) {
               AlertEmailError("This seems to be an invalid email address.");
               return false;
          }

          // The hostname does not contain a ".", so it is invalid...
          if(email_pieces[1].indexOf(".") == -1) {
               AlertEmailError("This seems to be an invalid email address.");
               return false;
          }
     }

     // Made it this far, seems to be ok
     return true;
}

function AlertEmailError(message) {
     alert(message);
     document.myForm.txtAnonEmail.focus();
}
//-->
</script>

Regards,
Barry
0
 

Author Comment

by:4ad
ID: 7133374
axis_img has more of what I needed as far as making sure a textbox was filled if the checkbox was checked (or not)

I didn't need an email validation script as I already have one within the script, but thanks very much anyway!

What I DO need help with, and forgot to mention, is that along with the checkbox are two radio buttons above the checkbox that are sorta dependent on what the checkbox does as well. I don't know if this is even possible.

Let me please explain.

<tr>
    <td width="112" class="win10T" nowrap valign="bottom">Allow Contact?</td>
     <td class="win10T"><input class="inputbox" type="radio" name="rdAllowContact" value="1">Yes
<input class="inputbox" type="radio" name="rdAllowContact" value="0" checked>No
     </td>
</tr>

If the user checks the aforementioned checkbox, they cannot ALSO select the "Yes" radio button, else the get an "alert" message.

Thanks again!

0
 
LVL 7

Expert Comment

by:axis_img
ID: 7133395
You can add that directly into the input tag... something like this:


<form name="myForm" method="post" action="content_go.asp" onSubmit="return CheckForm();">
<table>
  <tr>
    <td width="112" class="win10T" nowrap valign="bottom">Allow Contact?</td>
    <td class="win10T"><input class="inputbox" type="radio" name="rdAllowContact" value="1" onClick="if(this.form.chkAnon.checked) { alert('You cannot select this option while the Anonymous box is checked!'); this.form.rdAllowContact[1].checked = true; }">Yes
      <input class="inputbox" type="radio" name="rdAllowContact" value="0" checked>No
    </td>
  </tr>
  <tr>
    <td class="win10T">
      <input type="checkbox" name="chkAnon" value="Yes" onClick="if(this.checked) this.form.rdAllowContact[1].checked = true;">
       &nbsp;If checked, provide eMail:&nbsp;
      <input type="text" name="txtAnonEmail" maxlength="50" size="20">
      <br><input type="submit" value="Submit">
    </td>
  </tr>
</table>
</form>

Basically, I just changed the checkbox tag so that it automatically sets the NO radio button as selected when the checkbox gets checked. Also, when the user clicks on the YES button, it sees if the ANON checkbox is checked. If it is, it gives them an alert, and then resets it back to NO.

Let me know if this is what you needed.
Barry
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 7

Expert Comment

by:axis_img
ID: 7133397
Just to make the changes clear, they are in the following 2 lines:

<input class="inputbox" type="radio" name="rdAllowContact" value="1" onClick="if(this.form.chkAnon.checked) { alert('You cannot select this option while the Anonymous box is checked!'); this.form.rdAllowContact[1].checked = true; }">Yes

AND

<input type="checkbox" name="chkAnon" value="Yes" onClick="if(this.checked) this.form.rdAllowContact[1].checked = true;">
0
 

Author Comment

by:4ad
ID: 7133431
yes, it's what I was looking for. the reset is working properly, but the alert box isn't happening.  ??

Slight change in my code where I have the value set to "1" instead of "Yes".

<input type="checkbox" name="chkAnon" value="1" onClick="if(this.checked) this.form.rdAllowContact[1].checked = true;">

don't know if that makes a difference.
0
 
LVL 7

Accepted Solution

by:
axis_img earned 150 total points
ID: 7133468
Where did you want the alert to pop up? You are saying that the alert in the following line is not working?

<input class="inputbox" type="radio" name="rdAllowContact" value="1" onClick="if(this.form.chkAnon.checked) { alert('You cannot select this option while the Anonymous box is checked!'); this.form.rdAllowContact[1].checked = true; }">Yes


I only set it up to alert the user if they tried to set the radio button to YES while there was a check in the ANON box. I didn't not think it was necessary to alert the user if they place a check in the ANON box while the YES button is selected. I just automatically set it to NO for them. Did you want an alert there too?

eg: Is this what you wanted?

<form name="myForm" method="post" action="content_go.asp" onSubmit="return CheckForm();">
<table>
 <tr>
   <td width="112" class="win10T" nowrap valign="bottom">Allow Contact?</td>
   <td class="win10T"><input class="inputbox" type="radio" name="rdAllowContact" value="1" onClick="if(this.form.chkAnon.checked) { alert('You cannot select this option while the Anonymous box is checked!'); this.form.rdAllowContact[1].checked = true; }">Yes
     <input class="inputbox" type="radio" name="rdAllowContact" value="0" checked>No
   </td>
 </tr>
 <tr>
   <td class="win10T">
     <input type="checkbox" name="chkAnon" value="1" onClick="if(this.checked && this.form.rdAllowContact[0].checked) { alert('You cannot select the Anonymous option if you have the Allow Contact option set to YES!'); return false; }">
      &nbsp;If checked, provide eMail:&nbsp;
     <input type="text" name="txtAnonEmail" maxlength="50" size="20">
     <br><input type="submit" value="Submit">
   </td>
 </tr>
</table>
</form>


Let me know...
0
 
LVL 7

Expert Comment

by:axis_img
ID: 7133473
"I didn't not think it was necessary..."

What excellent grammar I have today... geez.
0
 

Author Comment

by:4ad
ID: 7133490
YES! Thanks VERY much!

don't worry about your grammer...It's 3am here and grammer isn't my biggest worry  :)  {sleep?, maybe}
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now