Solved

autochecking checkbox based on form field being filled in

Posted on 2004-10-20
12
273 Views
Last Modified: 2010-08-05
hi all,
I have a page that contains a quantity field as well as an 'add' checkbox field that users use to add the item to their shopping cart. I want to get rid of this checkbox requirement by having it autocheck when a value is entered in to the quantity field. What would be the correct syntax to do this?

Here's a code snippet that's currently on the page:

<input type="text" name="Qty" size="4" maxlength="4" value="">
 
<input type="checkbox" name="AddBook" value="#ISBN#"> I need this form element to both autocheck when a form quantity field is entered in. I also need this checkbox to be hidden as well.

Thanks!
0
Comment
Question by:bluskyGuy
[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
  • 4
  • 4
  • 2
  • +2
12 Comments
 
LVL 15

Expert Comment

by:justinbillig
ID: 12362920
<input type="text" name="Qty" size="4" maxlength="4" value="" onchange="if(this.value != ''){ formname.AddBook.checked=true;}else{formname.AddBook.checked=false;}">
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 12362929
<div style="visibility: hidden"><input type="text" name="Qty" size="4" maxlength="4" value=""></div>
0
 
LVL 8

Accepted Solution

by:
RozanaZ earned 500 total points
ID: 12362985
Checkboxes are visible:

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
      function test(obj, checkId)
      {
            if (obj.value != "")
            {
                  document.getElementById(checkId).checked = true;
            }
            else
            {
                  document.getElementById(checkId).checked = false;
            }
      }      
</script>
</HEAD>
<BODY>
<form>
      <input type="checkbox" name="AddBook" id="book1" value="#ISBN#">
      <input type="text" name="Qty" size="4" maxlength="4" value="" onChange="test(this, 'book1')">
      <br>
      <input type="checkbox" name="AddBook" id="book2" value="#ISBN#" > 
      <input type="text" name="Qty" size="4" maxlength="4" value="" onChange="test(this, 'book2')">
      <br>
      <input type="checkbox" name="AddBook" id="book3" value="#ISBN#" > 
      <input type="text" name="Qty" size="4" maxlength="4" value="" onChange="test(this, 'book3')">
</form>
</BODY>
</HTML>

-------------------

Checkboxes invisible:


<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
      function test(obj, checkId)
      {
            if (obj.value != "")
            {
                  document.getElementById(checkId).checked = true;
            }
            else
            {
                  document.getElementById(checkId).checked = false;
            }
      }      
</script>
</HEAD>
<BODY>
<form>
      <input type="checkbox" name="AddBook" id="book1" value="#ISBN#" style="display:none">
      <input type="text" name="Qty" size="4" maxlength="4" value="" onChange="test(this, 'book1')">
      <br>
      <input type="checkbox" name="AddBook" id="book2" value="#ISBN#" style="display:none">
      <input type="text" name="Qty" size="4" maxlength="4" value="" onChange="test(this, 'book2')">
      <br>
      <input type="checkbox" name="AddBook" id="book3" value="#ISBN#" style="display:none">
      <input type="text" name="Qty" size="4" maxlength="4" value="" onChange="test(this, 'book3')">
</form>
</BODY>
</HTML>
0
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!

 
LVL 36

Expert Comment

by:Zyloch
ID: 12363018
Hi bluskyGuy,

Something like this?

I guess you would call this on onchange inside the textbox, like this: checkTxtField(this);

function checkTxtField(obj) {
   for (var i=0;i<obj.form.elements.length;i++) {
      if (obj.form.elements[i]==obj) {
         if (obj.value!="") {
            obj.form.elements[i+1].checked=true;
            obj.form.elements[i+1].style.visibility='hidden';
         } else {
            obj.form.elements[i+1].checked=false;
            obj.form.elements[i+1].style.visibility='visible';
         }
         break;
      }
   }
}

Regards,
Zyloch
0
 
LVL 32

Expert Comment

by:ldbkutty
ID: 12363073
without a trim you will get checked even if you enter a white space in the textbox. you will need both onkeyup as well as onchange event (to make sure the checkbox is checked even if copy, paste the values in the textbox).

<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function makeChecked() {
 var theForm = document.myform;
 if(trim(theForm.Qty.value) != "")
   theForm.AddBook.checked = true;
 else
   theForm.AddBook.checked = false;
}
function trim(str) {
  return str.replace(/^\s*|\s*$/g,"");
}
//-->
</script>
</head>
<body>
<form name="myform" method="post" action="" >
Quantity: <input type="text" name="Qty" size="4" maxlength="4" value="" onkeyup="makeChecked()" onchange="makeChecked()"/> <br>
Add: <input type="checkbox" name="AddBook" value="#ISBN#"/>
</form>
</body>
</html>
0
 
LVL 8

Expert Comment

by:RozanaZ
ID: 12363173
yes, I agree with ldbkutty
trim should be used

<HTML>
<HEAD>
<TITLE></TITLE>
<script>
     function test(obj, checkId)
     {
          if (obj.value.trim != "")
          {
               document.getElementById(checkId).checked = true;
          }
          else
          {
               document.getElementById(checkId).checked = false;
          }
     }    
</script>
</HEAD>
<BODY>
<form>
     <input type="checkbox" name="AddBook" id="book1" value="#ISBN#" style="display:none">
     <input type="text" name="Qty" size="4" maxlength="4" value="" onChange="test(this, 'book1')">
     <br>
     <input type="checkbox" name="AddBook" id="book2" value="#ISBN#" style="display:none">
     <input type="text" name="Qty" size="4" maxlength="4" value="" onChange="test(this, 'book2')">
     <br>
     <input type="checkbox" name="AddBook" id="book3" value="#ISBN#" style="display:none">
     <input type="text" name="Qty" size="4" maxlength="4" value="" onChange="test(this, 'book3')">
</form>
</BODY>
</HTML>
0
 
LVL 8

Expert Comment

by:RozanaZ
ID: 12363181
bluskyGuy ,
Do you want a number validation for quantity field?
0
 

Author Comment

by:bluskyGuy
ID: 12363223
Thanks all for the recommendations. I'm giving them a shot now.
If you could give me a number validation for the quantity field that would be great!
Thanks again!
0
 
LVL 8

Expert Comment

by:RozanaZ
ID: 12363385
<HTML>
<HEAD>
<TITLE></TITLE>
<script>
     function test(obj, checkId)
     {            
              if (isNaN((obj.value)))
              {
                  alert("Numbers only");
                  obj.focus();
                  return;
              }
              if (obj.value != "")
          {
            
               document.getElementById(checkId).checked = true;
          }
          else
          {
               document.getElementById(checkId).checked = false;
          }
     }  
</script>
</HEAD>
<BODY>
<form>
     <input type="checkbox" name="AddBook" id="book1" value="#ISBN#" style="display:none">
     <input type="text" name="Qty" size="4" maxlength="4" value="" onChange="test(this, 'book1')">
     <br>
     <input type="checkbox" name="AddBook" id="book2" value="#ISBN#" style="display:none">
     <input type="text" name="Qty" size="4" maxlength="4" value="" onChange="test(this, 'book2')">
     <br>
     <input type="checkbox" name="AddBook" id="book3" value="#ISBN#" style="display:none">
     <input type="text" name="Qty" size="4" maxlength="4" value="" onChange="test(this, 'book3')">
</form>
</BODY>
</HTML>
0
 

Author Comment

by:bluskyGuy
ID: 12363556
For some reason the checkboxes aren't autochecking themselves.
I'm using this for the qty field syntax:
 <input type="text" name="Qty" size="4" maxlength="4" value="" onchange="if(this.value != ''){ formname.AddBook.checked=true;}else{formname.AddBook.checked=false;}">

Any suggestions?
0
 

Author Comment

by:bluskyGuy
ID: 12363656
the autocheckbox is now working! The issue that I notice is that the user has to click out of the qty field box in order for the checkbox to be checked...do you know how to make it so that as soon as a number is entered in the checkbox is checked?
0
 

Author Comment

by:bluskyGuy
ID: 12363701
Nevermind, i solved the problem!
Thanks everyone for the help!
0

Featured Post

Independent Software Vendors: 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!

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

726 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