?
Solved

Checkbox with mandatory textbox?

Posted on 2002-07-05
9
Medium Priority
?
384 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
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 600 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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…
Suggested Courses

800 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