Invisible Submit buttons

[Tony R]

I need to make a submit button turn invisible when a checkbox is not
clicked, and visible when it is clicked....I can't figure out a
cross-browser way of doing this.

Can anyone help?

 

[Evertjan.]

Tony R wrote on 18 nov 2005 in comp.lang.javascript:

I need to make a submit button turn invisible when a checkbox is not
clicked, and visible when it is clicked....I can't figure out a
cross-browser way of doing this.

obj.style.visibility='hidden'

 

[Tony]

I need to make a submit button turn invisible when a checkbox is not

obj.style.visibility='hidden'

alternately, obj.style.display = 'none'

visibility:hidden keeps the place on the page where the invisible item
should be - you just don't see the item. display:none eliminates the
space too.

Which to use depends on the specific display results desired.

 

[Tony R]

I'm sorry that this reply is extremely n00bish, because I really should
know this stuff, but I haven't done JScript in so long that I've
forgotten a lot of the basics....

How do I define obj as my submit box?

 

[RobG]

I'm sorry that this reply is extremely n00bish, because I really should
know this stuff, but I haven't done JScript in so long that I've
forgotten a lot of the basics....

How do I define obj as my submit box?

Rather than hiding/showing the submit button, you are better to
disable/enable it. You also need script to disable it in the first
place and also to make sure its state reflects that of the checkbox if
the form is reset. Below is a bit of play code to get you started.

Note that if you check the checkbox the button is enabled, if you
re-load the page most browsers will keep the checkbox checked but the
submit button is disabled. Similarly, resetting the form will make the
checkbox unchecked but not disable the button again (hiding/showing has
exactly the same issues).


<form action="">
<input type="checkbox" onclick="
this.form.theSubmit.disabled = !(this.checked);
">Check me to enable the submit button<br>
<input type="submit" name="theSubmit" disabled>
</form>


PS. Don't give the submit button a name or ID of 'submit'.

 

[Evertjan.]

RobG wrote on 19 nov 2005 in comp.lang.javascript:

<form action="">
<input type="checkbox" onclick="
this.form.theSubmit.disabled = !(this.checked);
">Check me to enable the submit button<br>
<input type="submit" name="theSubmit" disabled>
</form>

Try this, text input is allowed,
but submitting by pressing <return> is prevented,
till the box is checked:

=======================

<form action="" onsubmit='return false'>

<input type="checkbox"

onclick="
this.form.theSubmit.disabled = !this.checked;
this.form.onsubmit = 'return ' + this.checked;">

Check me to enable the submit button and &lt;return><br>

<input name='theText'><br>
<input type="submit" name="theSubmit"
value="do submit" disabled>

</form>

=======================

btw, this.checked is as good as (this.checked)

 

[Thomas 'PointedEars' Lahn]

Rather than hiding/showing the submit button, you are better to
disable/enable it. You also need script to disable it in the first
place

Yes, but you did not.

and also to make sure its state reflects that of the checkbox if
the form is reset. Below is a bit of play code to get you started.
[...]
<form action="">
<input type="checkbox" onclick="
this.form.theSubmit.disabled = !(this.checked);
">Check me to enable the submit button<br>

Parentheses are unnecessary and attribute values should not include
newline. If this was merely to prevent automatic line-break, use

<input type="checkbox"
onclick="this.form.theSubmit.disabled = !this.checked;"
id="cbSubmit"

<label for="cbSubmit"
Check me to enable the submit button</label><br>

<input type="submit" name="theSubmit" disabled>

Don't. The form will not be usable without client-side script support.

</form>


PS. Don't give the submit button a name or ID of 'submit'.

True.


PointedEars