We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

# checkbox to edit box using javascript

on
Medium Priority
908 Views
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...
Comment
Watch Question

## View Solution Only

Commented:
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... ;-))

Not the solution you were looking for? Getting a personalized solution is easy.

Commented:
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.

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

<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 :-)

Commented:
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

Commented:
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

Commented:
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!

Commented:
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...

Commented:
Hello Holger are you there !
##### Thanks for using Experts Exchange.

• View three pieces of content (articles, solutions, posts, and videos)
• Ask the experts questions (counted toward content limit)
• Customize your dashboard and profile