• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 388
  • Last Modified:

Checkbox with mandatory textbox?

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
4ad
Asked:
4ad
  • 5
  • 3
1 Solution
 
davlun20080Commented:
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
 
axis_imgCommented:
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
 
4adAuthor Commented:
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
axis_imgCommented:
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
 
axis_imgCommented:
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
 
4adAuthor Commented:
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
 
axis_imgCommented:
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
 
axis_imgCommented:
"I didn't not think it was necessary..."

What excellent grammar I have today... geez.
0
 
4adAuthor Commented:
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now