Solved

checkbox to edit box using javascript

Posted on 1997-10-17
7
861 Views
Last Modified: 2008-03-10
Is it possible to have a list of checkboxes that have value's and when a user clicks one of the check boxes, I want the value of it to be displayed in a textbox.  But I want the to be able to put multiple value's in.  e.g. if i had three check boxes with values 1, 2 and 3.  If I checked boxes 1 and 3 then in the text box i would like to 12.  ok i hope you understand.  Is it possible and if so where might I find some example code.

Thanks

Marvin...
0
Comment
Question by:checkin
  • 4
  • 3
7 Comments
 
LVL 6

Accepted Solution

by:
Holger101497 earned 100 total points
ID: 1271485
Hi checkin! (Marvin)
What you want is not actually so hard... you just add an onclick-eventhandler to your checkboxes that sets the value in the textbox... as soon as the user clicks one of the checkboxes, your textbox will be updated. I'll still post a little sample code in a few minutes, I'd just like to have the question locked first, because yesterday somebody answered a question while I was writing a longer explanation... I assume you meant to say 13 instead of 12?

BRB... ;-))
0
 
LVL 6

Expert Comment

by:Holger101497
ID: 1271486
So, here we go... this is the code you need to make it work. I set it up as a very general procedure that can even be used for several forms or checkbox-groups on the same page, because it takes the checkboxes and the textbox as parameters. There's also a little "trick" - use the same name for all the checkboxes, so they are one array and can be easily passed and evaluated in a loop.

<HTML><HEAD><TITLE>Chk2Txt</TITLE>

<script>
function chk2txt(chk,txt) {
  txt.value='';
  for (var i=0;i<chk.length;i++) if (chk[i].checked) txt.value+=chk[i].value;
}

</script></HEAD>

<BODY>
  <FORM>
    <INPUT TYPE=checkbox name=fchk value="1" onclick="chk2txt(form.fchk, form.ftxt)">1<BR>
    <INPUT TYPE=checkbox name=fchk value="2" onclick="chk2txt(form.fchk, form.ftxt)">2<BR>
    <INPUT TYPE=checkbox name=fchk value="3" onclick="chk2txt(form.fchk, form.ftxt)">3<BR>
    <INPUT TYPE=text name=ftxt>
</FORM>
</BODY>
</HTML>

I hope that's all you were looking for; if not, just ask.

Good luck, Holger :-)
0
 

Author Comment

by:checkin
ID: 1271487
Hi !
Thats exactly what I was looking for but in addition to that is it possible, if somebody unclicks the checkbox to re-update the edit box ? So you would take a value out of the edit box.

Marvin
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:checkin
ID: 1271488
Hi !
Thats exactly what I was looking for but in addition to that is it possible, if somebody unclicks the checkbox to re-update the edit box ? So you would take a value out of the edit box.

Marvin
0
 
LVL 6

Expert Comment

by:Holger101497
ID: 1271489
It is very possible!! As a matter of fact, it already does!! Just try the code. It is an onCLICK-handler, no an onCHECK.
That means that the little procedure is called whenever somebody CLICKS the checkbox, regardless of whether he checks or unchecks it.
chk2txt() first clears the textbox and then adds the values for the checked boxes, so that only the values for the checked boxes appear.

Just cut&copy the code, try it and ask if you still have any questions :-)

Have fun!
0
 

Author Comment

by:checkin
ID: 1271490
There is just one well two mor things,  the first one is that this only works in Netscape and not in MSIE.  If it is possible to get it to work in MSIE that would be great!  The other thing is, is it possible to keep the order of the numbers put in the box.  So if I clicked 2, 1 then 3,  displayed in the box would be 213.  And if I then clciked 1 again in the box would be 23.

Is it possible !

Thanks
Marvin...
0
 

Author Comment

by:checkin
ID: 1271491
Hello Holger are you there !
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now