?
Solved

Clicking Checkbox, enables/disables Textbox + does calculation

Posted on 2003-03-26
9
Medium Priority
?
187 Views
Last Modified: 2008-03-10
I have seen some similar scripts about enabling/disabling based upon checkbox click.  Beginning scripter here...

If the checkbox is checked (then the textbox would be disabled, and the value in it would equal hiddenbox1*.03)  otherwise, the user can overwrite value in the textbox.


<input type="checkbox" name = "override_adm"  onclick="toggleEnabled('admin');" onfocus="this.blur();"  > <input name="admin"><br>
<input type="checkbox" name = "override_ffs"  onclick="toggleEnabled('feeforserv');" onfocus="this.blur();"  > <input name="feeforservice"><br>
<input type="hidden" name = "hidden_adm" value="1200.00">
<input type='hidden' name = "hidden_ffs" value="1100.00">

.....

So, if the checkbox is disabled, then the fee is the set fee (hidden value*.03)
and if it is enabled, it allows the user to enter a custom fee.

here is a script I pulled from here... let me know if it is overkill.

   <!--//
                  var oDoc=document, bNS4=oDoc.layers;
                     
                  var oDisabled=new Object();
                  var Enable=null;
                  function Disable(){this.blur();return false}
                  function disableFormElm(sName) {
                       oDisabled[sName]=true;
                       var oElm=oDoc.forms[0].elements[sName];
                       if (typeof(oElm.length)!='number'||oElm.type=='select-one') {
                            if (!bNS4) oElm.disabled=true;
                            else oElm.onclick=oElm.onfocus=Disable;
                       } else {
                            for (var i=0; i<oElm.length; i++) {
                                 if (!bNS4) oElm[i].disabled=true;
                                 else oElm[i].onclick=Disable;
                            }
                       }
                  }
                  function enableFormElm(sName) {
                       if (oDisabled[sName]) delete oDisabled[sName];
                       var oElm=oDoc.forms[0].elements[sName];
                       if (typeof(oElm.length)!='number'||oElm.type=='select-one') {
                            if (!bNS4) oElm.disabled=false;
                            else oElm.onclick=oElm.onfocus=Enable;
                       } else {
                            for (var i=0; i<oElm.length; i++) {
                                 if (!bNS4) oElm[i].disabled=false;
                                 else oElm[i].onclick=Enable;
                            }
                       }
                  }
                  function toggleEnabled(sName) {
                       if (oDisabled[sName]) enableFormElm(sName);
                       else disableFormElm(sName);
                  }
                  //-->

....
<input type="checkbox" name = "override_adm"  onclick="toggleEnabled('admin');" onfocus="this.blur();"  > <input name="admin"><br>
<input type="checkbox" name = "override_ffs"  onclick="toggleEnabled('feeforserv');" onfocus="this.blur();"  > <input name="feeforservice"><br>
<input type="hidden" name = "hidden_adm" value="1200.00">
<input type='hidden' name = "hidden_ffs" value="1100.00">


0
Comment
Question by:astro26
[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
  • 4
9 Comments
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8212873
This is a simple version:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
function setValue(strCheckName,strTextName){
     var objFormField = document.forms[0]
     if(objFormField.elements[strCheckName].checked){
          objFormField.elements[strTextName].value=".03";
          objFormField.elements[strTextName].disabled=true;
     }else{
          objFormField.elements[strTextName].value="";
          objFormField.elements[strTextName].disabled=false;
     }

}
//-->
</SCRIPT>


</HEAD>
<BODY>
<FORM action="" method=POST id=form1 name=form1>
A<INPUT type="checkbox"  name=checkbox1 onClick = setValue(this.name,'text1')>
Other<INPUT type="text" id=text1 name=text1>
</FORM>

</BODY>
</HTML>


Fritz the Blank
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8212890
Sorry, I misread your question. Here is an update:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
function setValue(strCheckName,strTextName,strHiddenField){
     var objFormField = document.forms[0]
     if(objFormField.elements[strCheckName].checked){
          objFormField.elements[strTextName].value= objFormField.elements[strHiddenField].value * .03;
          objFormField.elements[strTextName].disabled=true;
     }else{
          objFormField.elements[strTextName].value="";
          objFormField.elements[strTextName].disabled=false;
     }

}
//-->
</SCRIPT>


</HEAD>
<BODY>
<FORM action="" method=POST id=form1 name=form1>
A<INPUT type="checkbox"  name=checkbox1 onClick = setValue(this.name,'text1','hidden_adm')>
Other<INPUT type="text" id=text1 name=text1>
<input type="hidden" name = "hidden_adm" value="1200.00">
<input type='hidden' name = "hidden_ffs" value="1100.00">


</FORM>

</BODY>
</HTML>


Fritz the Blank
0
 

Author Comment

by:astro26
ID: 8213071
Any ideas as to how I could format that automatic value returned when the checkbox is clicked with this function?  I use this function to format all of my other currency.

 <script language="JavaScript">
                function formatCurrency(mynum)
               {
                    num=mynum.value
                    num = num.toString().replace(/\$|\,/g,'');
                    if(isNaN(num))
                    num = "0";
                    sign = (num == (num = Math.abs(num)));
                    num = Math.floor(num*100+0.50000000001);
                    cents = num%100;
                    num = Math.floor(num/100).toString();
                    if(cents<10)
                    cents = "0" + cents;
                    for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
                    num = num.substring(0,num.length-(4*i+3))+','+
                    num.substring(num.length-(4*i+3));
                    num =(num + '.' + cents);
                    mynum.value=num;
               }
               <!--

let me know if you think I should add points/ post new question... I tried several times, but can't seem to get it.
                         
0
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!

 

Author Comment

by:astro26
ID: 8213092
Any ideas as to how I could format that automatic value returned when the checkbox is clicked with this function?  I use this function to format all of my other currency.

 <script language="JavaScript">
                function formatCurrency(mynum)
               {
                    num=mynum.value
                    num = num.toString().replace(/\$|\,/g,'');
                    if(isNaN(num))
                    num = "0";
                    sign = (num == (num = Math.abs(num)));
                    num = Math.floor(num*100+0.50000000001);
                    cents = num%100;
                    num = Math.floor(num/100).toString();
                    if(cents<10)
                    cents = "0" + cents;
                    for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
                    num = num.substring(0,num.length-(4*i+3))+','+
                    num.substring(num.length-(4*i+3));
                    num =(num + '.' + cents);
                    mynum.value=num;
               }
               <!--

let me know if you think I should add points/ post new question... I tried several times, but can't seem to get it.
                         
0
 

Author Comment

by:astro26
ID: 8213100
I got it to work, but used this code...
I used coldfusion to determine the hidden form field value already calculated...

I run onblur="formatCurrency(this);" on all my text fields
to put any numbers in currency format.  

Let me know if I did overkill by adding the blur to your code you gave me. thanks...



<!--
               function setValue(strCheckName,strTextName,strHiddenField){
                    var objFormField = document.forms[0]
                    if(objFormField.elements[strCheckName].checked){
                          objFormField.elements[strTextName].value= objFormField.elements[strHiddenField].value;
                          objFormField.elements[strTextName].blur(formatCurrency(objFormField.elements[strTextName]));
                          objFormField.elements[strTextName].disabled=true;
                    }else{
                          objFormField.elements[strTextName].value="";
                          objFormField.elements[strTextName].disabled=false;
                    }
               
               }
               //-->
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8213174
You should be able to do this:

objFormField.elements[strTextName].value= formatCurrency(
objFormField.elements[strHiddenField].value * .03);

Fritz the Blank
0
 
LVL 46

Accepted Solution

by:
fritz_the_blank earned 200 total points
ID: 8213189
Sorry that won't work. Here it is with your function included:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
function formatCurrency(mynum)
{
     num=mynum.value
     num = num.toString().replace(/\$|\,/g,'');
     if(isNaN(num))
     num = "0";
     sign = (num == (num = Math.abs(num)));
     num = Math.floor(num*100+0.50000000001);
     cents = num%100;
     num = Math.floor(num/100).toString();
     if(cents<10)
     cents = "0" + cents;
     for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
     num = num.substring(0,num.length-(4*i+3))+','+
     num.substring(num.length-(4*i+3));
     num =(num + '.' + cents);
     mynum.value=num;
}
       

function setValue(strCheckName,strTextName,strHiddenField){
    var objFormField = document.forms[0]
    if(objFormField.elements[strCheckName].checked){
         objFormField.elements[strTextName].value= objFormField.elements[strHiddenField].value * .03;
         formatCurrency(objFormField.elements[strTextName]);
         objFormField.elements[strTextName].disabled=true;
    }else{
         objFormField.elements[strTextName].value="";
         objFormField.elements[strTextName].disabled=false;
    }

}
//-->
</SCRIPT>


</HEAD>
<BODY>
<FORM action="" method=POST id=form1 name=form1>
A<INPUT type="checkbox"  name=checkbox1 onClick = setValue(this.name,'text1','hidden_adm')>
Other<INPUT type="text" id=text1 name=text1>
<input type="hidden" name = "hidden_adm" value="1200.00">
<input type='hidden' name = "hidden_ffs" value="1100.00">


</FORM>

</BODY>
</HTML>


Fritz the Blank
0
 

Author Comment

by:astro26
ID: 8213311
Thanks for the Quick response...

I have another question if you have time/think it is possible,
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20564224.html

I want the user to be able to tab through fields in my form, in the onFocus I want the currency number to be highlighted, so that if they make a change it overwrites the previous value, if they tab out, no change is made.  Is that possible?

100.00 initial

100.00 highlighted if the texbox has focus

7 was entered, it overwrites 100.00

7 is left when they tab out...

currently
100.00 initial
100.00 when has focus
7100.00 when they enter "7" (i guess cursor is infront of currency)
7100.00 when they tab out of field.

This is incorrect, it should be 7 not 7100.00
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8213342
Glad to have helped. If I have a few minutes, I'll take a gander at your other question.

Fritz the Blank
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!

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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

762 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