bluskyGuy
asked on
autochecking checkbox based on form field being filled in
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!
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!
<input type="text" name="Qty" size="4" maxlength="4" value="" onchange="if(this.value != ''){ formname.AddBook.checked=t rue;}else{ formname.A ddBook.che cked=false ;}">
<div style="visibility: hidden"><input type="text" name="Qty" size="4" maxlength="4" value=""></div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.le ngth;i++) {
if (obj.form.elements[i]==obj ) {
if (obj.value!="") {
obj.form.elements[i+1].che cked=true;
obj.form.elements[i+1].sty le.visibil ity='hidde n';
} else {
obj.form.elements[i+1].che cked=false ;
obj.form.elements[i+1].sty le.visibil ity='visib le';
}
break;
}
}
}
Regards,
Zyloch
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.le
if (obj.form.elements[i]==obj
if (obj.value!="") {
obj.form.elements[i+1].che
obj.form.elements[i+1].sty
} else {
obj.form.elements[i+1].che
obj.form.elements[i+1].sty
}
break;
}
}
}
Regards,
Zyloch
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>
<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()"/>
Add: <input type="checkbox" name="AddBook" value="#ISBN#"/>
</form>
</body>
</html>
yes, I agree with ldbkutty
trim should be used
<HTML>
<HEAD>
<TITLE></TITLE>
<script>
function test(obj, checkId)
{
if (obj.value.trim != "")
{
document.getElementById(ch eckId).che cked = true;
}
else
{
document.getElementById(ch eckId).che cked = 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>
trim should be used
<HTML>
<HEAD>
<TITLE></TITLE>
<script>
function test(obj, checkId)
{
if (obj.value.trim != "")
{
document.getElementById(ch
}
else
{
document.getElementById(ch
}
}
</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>
bluskyGuy ,
Do you want a number validation for quantity field?
Do you want a number validation for quantity field?
ASKER
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!
If you could give me a number validation for the quantity field that would be great!
Thanks again!
<HTML>
<HEAD>
<TITLE></TITLE>
<script>
function test(obj, checkId)
{
if (isNaN((obj.value)))
{
alert("Numbers only");
obj.focus();
return;
}
if (obj.value != "")
{
document.getElementById(ch eckId).che cked = true;
}
else
{
document.getElementById(ch eckId).che cked = 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>
<HEAD>
<TITLE></TITLE>
<script>
function test(obj, checkId)
{
if (isNaN((obj.value)))
{
alert("Numbers only");
obj.focus();
return;
}
if (obj.value != "")
{
document.getElementById(ch
}
else
{
document.getElementById(ch
}
}
</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>
ASKER
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=t rue;}else{ formname.A ddBook.che cked=false ;}">
Any suggestions?
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=t
Any suggestions?
ASKER
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?
ASKER
Nevermind, i solved the problem!
Thanks everyone for the help!
Thanks everyone for the help!