Solved

checkbox to edit box using javascript

Posted on 1997-10-17
7
872 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
ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

 

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

ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

772 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