Checkbox Status

DonP · Feb 16, 2003

First, I know virtually nothing about Javascript so hopefully someone will be kind enough to help as I'm sure this should be an easy task:

On a page which has several forms, there is a checkbox in one form and the checkbox is in fact the only element of the form that gets displayed - no buttons or anything else are used because it is only the checkbox that has any real function.

What I want to do is to detect whether the checkbox is checked or not and to create some kind of a variable that can be used in one of the other forms to be submitted with it. For example, if it's not checked, the other form will have a hidden tag with a default value as part of one of its value tags: value="value is FALSE" and when the checkbox is checked, it will say, value="value is TRUE" with the TRUE and FALSE being the variable based on the checkbox status (the actual text will be different, this is only an example).

Can anyone help? Thanks in advance. Don
don@pc-homepage.com

http://www.pc-homepage.com/

Experienced in HTML, Perl, VBScript, PWS, IIS and Apache. Run OS/2 Warp 4, BeOS v5 and Windows NT/2000 (only when I have to!)

gph1 · Feb 16, 2003

<input type="checkbox" onclick="if(this.checked){something = true}else{something = false}">

then in the other form script

if (something) {
// do whatever
}

I don't know what you mean by "hidden tag"

DonP · Feb 16, 2003

To be clearer, "hidden form tag" is what I should have said - which of course is an input tag that has its "type" as hidden.

[tt]<input type="hidden" name="something" value="value is TRUE">[/tt]

What I need to do is to get a text value from the checkbox state that can be plugged into the rest of the text in the "value" parameter of such a form field in place of where I've used TRUE in the above example. It won't show on the screen but what gets submitted with the form will have part of its value based on the checkbox state. I don't want to use "true" or "false" specifically, that was simply an example. In reality, if the box is checked, the value will be "borderless" and if it is not checked, it will have "with border" (or something like that).

Maybe your suggestion will do it so in the morning, I'll give it a try. Thanks. Don
don@pc-homepage.com

http://www.pc-homepage.com/

Experienced in HTML, Perl, VBScript, PWS, IIS and Apache. Run OS/2 Warp 4, BeOS v5 and Windows NT/2000 (only when I have to!)

gph1 · Feb 17, 2003

FYI you can put the values in the function but you can also put them in open script, including VBScript. The 2 languages communicate well. As stated previously on this forum, load the JS first so it has access to "this'.

<html>
<head>
<title></title>
<script>

UnCheck_State = 'with border'
Check_State = 'borderless'

function Name(state) {
a = document.getElementById('something')
if (state) {
a.value = Check_State
} else {
a.value = UnCheck_State
}
}

</script>
</head>
<body>
<input type="text" name="something" value="with border">
<input type="checkbox" name="check" onclick="Name(this.checked)">
</body>
</html>

DonP · Feb 17, 2003

Thanks, I'm using PHP, however, this appears to be just what I need. In case it makes a difference, there is no text input as your example shows, only the checkbox and that's it. The place where I need to use the value is on another form on the same page but this looks like it should do the trick. Don
don@pc-homepage.com

http://www.pc-homepage.com/

Experienced in HTML, Perl, VBScript, PWS, IIS and Apache. Run OS/2 Warp 4, BeOS v5 and Windows NT/2000 (only when I have to!)

johndoeherty · Feb 17, 2003

gph1 had the solution...

<input type="checkbox" onclick="if(this.checked){do_something(true)}else{do_something(false)}">

function do_something(val) {
if(val == 'true')
the_other_form.value = 'the checkbox was checked'
else
the_other_form.value = 'the checkbox was NOT checked'
}

hope it works!

M°<=

gph1 · Feb 17, 2003

No it doesn’t matter, I left it as text so you could see it. If you need to support lesser browsers as opposed to forward compatibility change this:

document.getElementById('something')

to this

document.formname.something

Incase your wondering, this is false

if (!state) {

DonP · Feb 17, 2003

Thanks a lot! I see that the if (!state) { is similar to PHP. The only thing that isn't clear is what to put in my form tags on the other form as far as the variable name is concerned in order to make use of it. It will be a regular hidden form type value="the checkbox was checked" but since I know nothing about JavaScript, I have no idea what to do with the variable once it's been created by the checkbox and the code above. Don
don@pc-homepage.com

http://www.pc-homepage.com/

Experienced in HTML, Perl, VBScript, PWS, IIS and Apache. Run OS/2 Warp 4, BeOS v5 and Windows NT/2000 (only when I have to!)

gph1 · Feb 17, 2003

I know nothing of server side VBScript. I don't know what's required to send the variable. This puts the condition in onsubmit but it is already a global variable.

<script>

myvar = false

UnCheck_State = 'with border'
Check_State = 'borderless'

function Name(state) {
a = document.getElementById('something')
if (state) {
myvar = true
a.value = Check_State
} else {
myvar = false
a.value = UnCheck_State
}
}

</script>

then

<form onsubmit="if(myvar){dosomething()}else{doother()}">

DonP · Feb 17, 2003

In examing the code adove, it appears that it is expecting to be either on the same form as the checkbox or to be on another form that is being submitted. It is neither. There are no buttons or anything else on the form with the checkbox: only a checkbox, which is the only reason that the form exists.

What I need it to do is to place a value into another form (on the same page) when the box is checked (but remember, the form with the checkbox is not submitting anything itself) and this is what I cannot figure out how to do now. Whatever it is, I need to be able to append the checkbox state to existing text that is already in one of this other form's hidden fields. I've added the code to the page but I don't understand what to do with it now that it's there. Let me try to illustrate:

form one has a number of fields, this is similar to the one into which I want to append the value of the checkbox where the bold text is here:
<form action="script.php" method="post">
<input type="hidden" name="item_name" value="11522-01 Publicity Photo Set - JavaScript checkbox value"></form>

form two has checkbox only:
<form><input type="checkbox" name="PhotoBorder" value="1" ><form>

In other words, do I use echo or somesuch to print the value into the first form or what?

In between these two forms is yet another form, which is why I cannot include the checkbox directly in the first form. Don
don@pc-homepage.com

http://www.pc-homepage.com/

Experienced in HTML, Perl, VBScript, PWS, IIS and Apache. Run OS/2 Warp 4, BeOS v5 and Windows NT/2000 (only when I have to!)

gph1 · Feb 17, 2003

I think I understand what you mean

this adds a string to the end of an existing string

document.getElementById('something').value += new_string

this replaces an existing string with a new one

document.getElementById('something').value = new_string

let me know if I'm barking up the right tree

DonP · Feb 17, 2003

That's the idea except that the string is already there and is not coming from JavaScript so there is nothing in the same language to which to concatonate as your example is doing. Think of it in terms of my wanting to add the value onto an existing plain old text string.

For example, with John's sample:

[tt]<input type="checkbox" onclick="if(this.checked){do_something(true)}else{do_something(false)}">

function do_something(val) {
if(val == 'true')
the_other_form.value = 'borderless'
else
the_other_form.value = 'with border'
}[/tt]

I see that a variable is being created the_other_form.value that contains different text depending upon whether or not the box is checked. If I can simply append this to my existing text somehow, it would
do the trick, but how? It would have to be something like echo(the_other_form.value); inside the existing form tag but I know this syntax is wrong and there seems to be nothing to tell the page that it is javaScript. When I tried it and viewed the source code, I saw the code, not the resulting variable value. Don
don@pc-homepage.com

http://www.pc-homepage.com/

Experienced in HTML, Perl, VBScript, PWS, IIS and Apache. Run OS/2 Warp 4, BeOS v5 and Windows NT/2000 (only when I have to!)

gph1 · Feb 17, 2003

It doesn't matter how the existing string got there, it will add it to the existing value. Even if it's just regular text in a division or table it will do the same thing by replacing value with innerHTML.

<html>
<head>
<title></title>
<script>

UnCheck_State = 'with border'
Check_State = 'borderless'

function add() {
a = document.getElementById('something')
b = document.getElementById('other')
if (document.getElementById('check').checked) {
a.value += Check_State
b.innerHTML += Check_State
} else {
a.value += UnCheck_State
b.innerHTML += UnCheck_State
}
}

</script>
</head>
<body>
<input type="checkbox" name="check">
<input type="button" value="add" onclick="add()"><br>
<input type="text" name="something" value="existing value">
<div id="other">
existing innerHTML
</div>
</body>
</html>

Obviously that just keeps adding the value which isn't what you want. I think this is more in line with what your after.

<html>
<head>
<title></title>
<script>

UnCheck_State = 'with border'
Check_State = 'borderless'

function CheckBoxValue() {
a = document.getElementById('something')
if (document.getElementById('check').checked) {
a.value += Check_State
} else {
a.value += UnCheck_State
}
}

</script>
</head>
<body>
<form name="theform" onsubmit="CheckBoxValue()">
<input type="hidden" name="something" value="existing value">
</form>

<input type="checkbox" name="check">
</body>
</html>

DonP · Feb 17, 2003

All of this makes sense (believe it or not) but, unless onsubmit="CheckBoxValue()" can be placed in another form field tag, inside the tag's existing value quotes, I see nothing that appends the variable to your example's "existing value" which is where it has to go. It cannot be appended as a separate value in the form's submit tag as this appears to do, or do I still misunderstand? In order for the value to to be of use, it must be something like (using your own "existing value" example):

"existing value onsubmit="CheckBoxValue()"" which of course makes no sense because I have the syntax all wrong and because there are too many quotes. It can't be in the form's "form" tag.

Yes, your second example is more like what I need. Don
don@pc-homepage.com

http://www.pc-homepage.com/

Experienced in HTML, Perl, VBScript, PWS, IIS and Apache. Run OS/2 Warp 4, BeOS v5 and Windows NT/2000 (only when I have to!)

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Checkbox Status

DonP

IS-IT--Management

gph1

Technical User

DonP

IS-IT--Management

gph1

Technical User

DonP

IS-IT--Management

johndoeherty

Instructor

gph1

Technical User

DonP

IS-IT--Management

gph1

Technical User

DonP

IS-IT--Management

gph1

Technical User

DonP

IS-IT--Management

gph1

Technical User

DonP

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor