Using Checkbox

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Love_Daddy
Forum Commoner
Posts: 61
Joined: Wed Jul 10, 2002 6:55 am
Location: South Africa
Contact:

Using Checkbox

Post by Love_Daddy »

Hi All,

Can anyone show me how to write a simple script to do the ff:

Say you have 3 check boxes with options to choose and 1 text box
Everytime you click on a checkbox, it writes your option inside the textbox and even if you uncheck.

Thanks.
User avatar
Johnm
Forum Contributor
Posts: 344
Joined: Mon May 13, 2002 12:05 pm
Location: Michigan, USA
Contact:

Post by Johnm »

This does what you want it to but it will need some editing as it is a stand alone page as written.
Direwolf

Code: Select all

<html>
<body>
<form>
<input type="checkbox" name="box1" 
onClick="changeTextBox(this.form, 'newValue')"> Box 1

<input type="checkbox" name="box1" 
onClick="changeTextBox(this.form, 'newValue2')"> Box 2

<input type="checkbox" name="box1" 
onClick="changeTextBox(this.form, 'newValue3')"> Box 3

<input type="text" name="text_box" value="">
<script>

// Function to change text box
function changeTextBox(form, newValue)
&#123;
    form.text_box.value = newValue;
&#125;
</script>
</form>
</body>
User avatar
Love_Daddy
Forum Commoner
Posts: 61
Joined: Wed Jul 10, 2002 6:55 am
Location: South Africa
Contact:

Thanks

Post by Love_Daddy »

Thanks for your input. :lol:
User avatar
Takuma
Forum Regular
Posts: 931
Joined: Sun Aug 04, 2002 10:24 am
Location: UK
Contact:

Post by Takuma »

Code: Select all

<html> 
  <head>
    <script language="Javascript" type="text/javascript"> 
    <!--
      function changeTextBox(form, newValue) 
      &#123; 
        form.text_box.value = newValue; 
      &#125;
    //-->
    </script> 
  </head>
  <body> 
    <form> 
      <input type="checkbox" name="box1" 
onClick="changeTextBox(this.form, 'newValue')"> Box 1 

      <input type="checkbox" name="box1" 
onClick="changeTextBox(this.form, 'newValue2')"> Box 2 

      <input type="checkbox" name="box1" 
onClick="changeTextBox(this.form, 'newValue3')"> Box 3 

      <input type="text" name="text_box" value=""> 
</form> 
</body>
Should be like this... Best to put script tag in header and use comment so that browser which doesn't support Javascript deosn't show something like this:-

Code: Select all

function changeTextBox(form, newValue) 
      &#123; 
        form.text_box.value = newValue; 
      &#125;
     THE ACTUAL PAGE
User avatar
Love_Daddy
Forum Commoner
Posts: 61
Joined: Wed Jul 10, 2002 6:55 am
Location: South Africa
Contact:

Thanks

Post by Love_Daddy »

Takuma,

Thanks for your reply, though this script does not work, I'll try and change here and there and will
let you know as soon as it's working!

Thanks :lol:
User avatar
Johnm
Forum Contributor
Posts: 344
Joined: Mon May 13, 2002 12:05 pm
Location: Michigan, USA
Contact:

Post by Johnm »

Although Takuma's input refers mainly to personal preference and style both of these scripts (mine and his) work properly as I have tested them. The only thing I can see that needs to be changed is that each check box needs a different name. Right now all three are named "Box1". That won't keep the script from working though. Do you have JavaScript enabled on the browser you are testing this on?

Direwolf
User avatar
Love_Daddy
Forum Commoner
Posts: 61
Joined: Wed Jul 10, 2002 6:55 am
Location: South Africa
Contact:

Javascript Browser

Post by Love_Daddy »

Well, I'm using Konqueror since I'm on Mandrake Linux.
I'll try to run the script on Internet Explorer.
And will let you know. :idea:
User avatar
Love_Daddy
Forum Commoner
Posts: 61
Joined: Wed Jul 10, 2002 6:55 am
Location: South Africa
Contact:

Checked

Post by Love_Daddy »

:roll:
I ran the script on internet explorer and it works fine.
So I suppose on Konqueror, it doesn't work.

So what I need to do now is the following:
Everytime you choose an option, it must appear in the textbox and likewise
when you uncheck, it must disappear.
and if you choose all the options, they must all appear in the textbox.
The same, when you uncheck all, the textbox must be empty.

Thanksundefined
User avatar
Johnm
Forum Contributor
Posts: 344
Joined: Mon May 13, 2002 12:05 pm
Location: Michigan, USA
Contact:

Post by Johnm »

You should be able to figure out how to do that from what I posted. Writing it for you doesn't help you learn. I would be glad to help if you have problems though.

Direwolf
User avatar
Takuma
Forum Regular
Posts: 931
Joined: Sun Aug 04, 2002 10:24 am
Location: UK
Contact:

Post by Takuma »

That's what they all say...

And guess what it's TRUE!
Post Reply