/    Sign up×
Community /Pin to ProfileBookmark

How can I make submit buttons inactive unless checkbox is checked?

I am working on a form to gather some information about the visitors. However, I do not want them to be able to send the form unless a certain checkbox is checked. I know it would be easy to conduct a form validation on the checkbox, but I would like to know if it is possible to make the two (I want to know wheter there is a difference between my own submit buttons or the default buttons) submit buttons look “faded” or at least not clickable until the checking is complete. I guess I need some ‘onclick’ or ‘onchange’ code to solve the problem, but do not know what that function should look like.

Hope you can help, here is the form code.

<form name=”form1″ method=”post” action=”someURL.asp”>
<p>
<input type=”checkbox” name=”check1″ value=”1″>
If checkbox is not checked the two submit buttons will not work. </p>

<p>
<Input type=”submit” name=”Submit” value=”Send”>
</p>
<p>
<input name=”send” type=”image” id=”send” src=”Images/send.gif” alt=”Send” border=”1″>
</p>
</form>

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@johneboyFeb 04.2005 — <i>
</i>&lt;script&gt;
function enableSend(){
if (document.getElementById("check1").checked == true){
document.getElementById("submit").disabled = false;
document.getElementById("send").src = "images/en_send.gif"; //enabled image
}else{
document.getElementById("submit").disabled = true;
document.getElementById("send").src = "images/dis_send.gif"; //disabled image
}
}
&lt;/script&gt;
&lt;form name="form1" method="post" action="someURL.asp"&gt;
&lt;p&gt;
&lt;input type="checkbox" name="check1" value="1" onclick=enableSend()&gt;
If checkbox is not checked the two submit buttons will not work. &lt;/p&gt;

&lt;p&gt;
&lt;Input type="submit" name="Submit" value="Send" disabled&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;input name="send" disabled type="image" id="send"

src="images/dis_send.gif" alt="Send" border="1"&gt;
&lt;/p&gt;
&lt;/form&gt;
Copy linkTweet thisAlerts:
@PelleauthorFeb 04.2005 — It works just the way I want it to...?
×

Success!

Help @Pelle spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...