Solved

Validate a checkbox and corresponding text box.

Posted on 2007-11-28
13
1,509 Views
Last Modified: 2012-06-22
I have a form with multiple checkboxes. the last checkbox has a corresponding textbox for a write in value.
I would like to make sure that the textbox can only be filled in if the corresponding checkbox is checked and if that same checkbox is then unchecked then the textbox is cleared out.

<form name="userlist" method="post"> 
<input name="user1" type="checkbox">User1
<input name="user2" type="checkbox">User2
<input name="1writein" type="checkbox">><input type="text" name="1wi" value="">
<input type="submit" name="submit">
</form>

Open in new window

0
Comment
Question by:tomfulton
  • 4
  • 4
  • 3
  • +1
13 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 20369410
Like this?
<html>
<head>
<title> Associated field </title>
<script language='JavaScript' type='text/javascript'>
  function checkIt( obj, id ) {
    var field   = document.getElementById( id );
    var checked = obj.checked;
    if ( field ) {
      if ( checked ) {
        if ( field.value != '' ) {
          alert( 'specified value: "' + field.value + '"' );
        }
      } else {
        field.value = '';
      }
    } else {
      alert( 'Specified field not found.  id="' + id + '"' );
    }
  }
</script>
</head>
 
<body>
<form name="userlist" method="post" action=''> 
  <input name="user1" type="checkbox">User1
  <input name="user2" type="checkbox">User2
  <input name="1writein" type="checkbox" onclick='checkIt(this,"1wi");'><input type="text" name="1wi" id="1wi" value="">
  <input type="submit" name="submit">
</form>
 
</body>
</html>

Open in new window

0
 
LVL 25

Accepted Solution

by:
kevp75 earned 75 total points
ID: 20371301
you can do it client side, but what happens when us paranoid browsers decide to turn off javascript?

I would suggest you do this server-side.  


<%
dim frmField : frmField = request.querystring("1writein")
dim frmField2 : frmField2 = request.querystring("1wi")
if not isnull(frmField) or not isempty(frmField) or not(frmField = "") then
     if not isnull(frmField) or not isempty(frmField) or not(frmField = "") then
          'process the form here
     else
          'don't process it, throw a message at the user if you need to, etc
     end if
end if
%>

Open in new window

0
 
LVL 28

Assisted Solution

by:sybe
sybe earned 75 total points
ID: 20373958
Hmm, interestingly enough I don't think that it is valid HTML to start the name of a form field with a numberic character. At least the code below does only work when the textfield does not start with a numeric character.

Secondly, on the server you should process the text field only when the checkbox is checked.

<%
If Request.Form("").Count
<form name="userlist" method="post">
<input name="user1" type="checkbox">User1
<input name="user2" type="checkbox">User2
<input name="1writein" type="checkbox" onclick="this.form.wi1.value=this.checked?this.form.wi1.value:'';this.form.wi1.disabled = !this.checked;"><input type="text" name="wi1" value="" disabled>
<input type="submit" name="submit">
</form>
 
===============
 
<%
If Request.Form("1writein").Count > 0 Then
    ' process textfield
End If
%>

Open in new window

0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 25

Expert Comment

by:kevp75
ID: 20374035
yeah, that's what I was attempting, but I have a typo
<%
dim frmField : frmField = request.querystring("1writein")
dim frmField2 : frmField2 = request.querystring("1wi")
if not isnull(frmField) or not isempty(frmField) or not(frmField = "") then
     if not isnull(frmField2) or not isempty(frmField2) or not(frmField2 = "") then
          'process the form here
     else
          'don't process it, throw a message at the user if you need to, etc
     end if
end if
%>

Open in new window

0
 

Author Comment

by:tomfulton
ID: 20374757
Is this code from the last submission:
<%
dim frmField : frmField = request.querystring("1writein")
dim frmField2 : frmField2 = request.querystring("1wi")
if not isnull(frmField) or not isempty(frmField) or not(frmField = "") then
     if not isnull(frmField2) or not isempty(frmField2) or not(frmField2 = "") then
          'process the form here
     else
          'don't process it, throw a message at the user if you need to, etc
     end if
end if
%>

something I will put on the same page as the code for the form?  I wanted to do it on the client side if I could so I could catch the blank textbox and checked checkbox  before it is submitted.


Thank you
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 20374788
The first comment does exactly that.  It is on the client side, and demonstrates how to check not only the value of the radiobutton, but also clear the text field should the last radtiobutton be unchecked.

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_22989078.html#20369410
0
 
LVL 28

Expert Comment

by:sybe
ID: 20374831
You probably want to do it both on client and on server side. Client side only works if people have javascript turned on, and no greasemonkey script running to overrule your script.

And yes, the first comment posted does the client side thing. Although it's a bit bit longer then what I suggested.
0
 
LVL 25

Expert Comment

by:kevp75
ID: 20374936
sybe's correct (as previously stated...)

You would put that code on whatever page that is processing the form.  If your <form action is another page, it would go on that....unless you are doing a post-back in which case you would put it on the page the form is on...
0
 

Author Comment

by:tomfulton
ID: 20374979
HonorGod:
I put that code in an asp page by itself and my javascript is on but no alert came up and the textbox does not clear if the corresponding checkbox is unchecked.

so I looked into the server side possibility and

sybe:
Do I put your code in the same page as my form itself?
0
 

Author Comment

by:tomfulton
ID: 20375044
I don't know if I worded the problem different than what I need but in a set of checkboxes a user can select more than one choice but if the user wants the write-in then I want to verify that Both the write-in textbox and its corresponding checkbox is checked.

Thank you for looking at this
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 20375491
Strange.  I'm not familiar enough with asp so as to be able to understand why this would be the case.  If you add an alert to the function to prove that it is getting called, do you see it's output?

For example:


  function checkIt( obj, id ) {
    alert( 'checkIt()' );
    var field   = document.getElementById( id );
...

Open in new window

0
 
LVL 25

Expert Comment

by:kevp75
ID: 20375603
what I posted for you will do the server side you need
0
 

Author Closing Comment

by:tomfulton
ID: 31411542
Since the client side didn't work at first, I went with the server side solutions.
Thanks for the assistance.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

821 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