Solved

Checkbox with mandatory textbox?

Posted on 2002-07-05
9
368 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

743 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

10 Experts available now in Live!

Get 1:1 Help Now