Have form grayed out until check box is checked?

New Here ,
May 13, 2021 May 13, 2021

Copy link to clipboard

Copied

Hello we use Coldfusion 10 and I'm having issues with a form and having it be grayed out until a check box is selected. Here's a small part of the field I'm trying to do. What an I missing?

 

<form action="TransactD.cfm" Target="body" method="post">
<input type="hidden" name="Receiveall" value="1">
<input type="submit" value="Receive all" disabled class="rabutton" onClick="this.form.submit();">&nbsp;<input type="checkbox" name="checkbox-0" class="rabutton">
</form>


<script id="jsbin-javascript">
$(".rabutton").on("change", function(e){
if($(".rabutton").attr("checked")){
$(".submit").button("enable");
} else {
$(".submit").button("disable");
}

});
</script>

 

Any help would be great thanks.

Views

207

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
May 13, 2021 May 13, 2021

Copy link to clipboard

Copied

I would refer to the objects by an ID rather than CLASS so you can target specific objects and when you are reading and setting properties of objects use the JQuery .prop() function.

 

I assume you are loading the JQuery library in your page also.

 

There are probably many ways to do this but here is my version of the revised code.

<body>
<form action="TransactD.cfm" Target="body" method="post">
<input type="hidden" name="Receiveall" value="1">
<input type="submit" value="Receive all" disabled id="rabutton" onClick="this.form.submit();">&nbsp;<input type="checkbox" name="checkbox-0" id="racb">
</form>
</body>
<script type="text/javascript">
$("#racb").on("change", function(e){
if($("#racb").prop("checked")){
$("#rabutton").prop('disabled', false);
} else {
$("#rabutton").prop('disabled', true);
}
});
</script>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

The Javascript is a bit confusing. That is because the submit button and the checkbox both belong to the same class, rabutton.

 

Suggestion for a solution: identify the submit button using the selector "input:submit", then simplify. My test code is as follows

 

 

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<script id="jsbin-javascript">
$(document).ready(function() {
	$(".rabutton").change(function(){
		if(this.checked){
			$("input:submit").attr("disabled", false);
		} else {
			$("input:submit").attr("disabled", true);
		}
	});
});
</script>


<form action="TransactD.cfm" Target="body" method="post">
<input type="hidden" name="Receiveall" value="1">
<input type="submit" value="Receive all" disabled class="rabutton" onClick="this.form.submit();">&nbsp;<input type="checkbox" name="checkbox-0" class="rabutton">
</form>
<head>

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 19, 2021 May 19, 2021

Copy link to clipboard

Copied

Hi @taunnt ,

Is it working now?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 20, 2021 May 20, 2021

Copy link to clipboard

Copied

If you have multiple forms on the page, with multiple submit fields, then my solution might not work. A better solution would then be to uniquely identify the submit field concerned. For example, using id="submit_receive_all":

 

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<form action="TransactD.cfm" Target="body" method="post">
<input type="hidden" name="Receiveall" value="1">
<input type="submit" value="Receive All" disabled class="rabutton" onClick="this.form.submit();" id="submit_receive_all">&nbsp;<input type="checkbox" name="checkbox-0" class="rabutton">
</form>

<script id="jsbin-javascript">
$(document).ready(function() {
	$(".rabutton").change(function(){
		if(this.checked){
			$("#submit_receive_all").attr("disabled", false);
		} else {
			$("#submit_receive_all").attr("disabled", true);
		}
	});
});
</script>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 20, 2021 May 20, 2021

Copy link to clipboard

Copied

I copied everything over, Tried it again, and the form is still greyed out after box is check. Funny thing is I can get it to work fine with a button. Sense in Coldfusion it's useing a form I can't get it to work for some reason.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 20, 2021 May 20, 2021

Copy link to clipboard

Copied

This isn't a Coldfusion issue at all, because there's no Coldfusion involved.   This is all HTML with javascript/jQuery.

 

I tried BKBK's sample code and can confirm it worked for me.  I recommend that you enable the dev console on your browser and take a look to see if you're getting any  javascript errors while trying to view the test page.  In general I recommend having it open anytime you're trying to work on javascript code.    It could be that something about your configuration is causing a javascript error.  For example, the jQuery might be failing to download.   If you're using IE11 and have the website in compatibility mode that will also cause it to fail because IE11 will then display the test page in IE5 mode which jQuery doesn't support.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 22, 2021 May 22, 2021

Copy link to clipboard

Copied

LATEST
quote

I copied everything over, Tried it again, and the form is still greyed out after box is check. 

By @taunnt

 

You're talking about "the" form. But Suppose that the same form field is present in different code branches. Then you should change each one.

 

Take for example,

 

<cfif someCondition>
	<form action="TransactD.cfm" Target="body" method="post">
	<input type="submit" value="Receive All" disabled class="rabutton" onClick="this.form.submit();">&nbsp;<input type="checkbox" name="checkbox-0" class="rabutton">
	</form>
<cfelse>
	<form action="TransactD.cfm" Target="body" method="post">
	<input type="submit" value="Receive All" disabled class="rabutton" onClick="this.form.submit();">&nbsp;<input type="checkbox" name="checkbox-0" class="rabutton">
	</form>
</cfif>

 

Then you should make sure that BOTH submit buttons have an id:

 

 

<cfif someCondition>
	<form action="TransactD.cfm" Target="body" method="post">
	<input type="submit" value="Receive All" disabled class="rabutton" onClick="this.form.submit();" id="submit_receive_all">&nbsp;<input type="checkbox" name="checkbox-0" class="rabutton">
	</form>
<cfelse>
	<form action="TransactD.cfm" Target="body" method="post">
	<input type="submit" value="Receive All" disabled class="rabutton" onClick="this.form.submit();" id="submit_receive_all">&nbsp;<input type="checkbox" name="checkbox-0" class="rabutton">
	</form>
</cfif>

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
May 20, 2021 May 20, 2021

Copy link to clipboard

Copied

If you want to block a "form" (ie, more than just a single output or a button), I recommend using a jQuery plugin like BlockUI. http://malsup.com/jquery/block/  (Another alternative solution would be to "hide" the section.)

 

We've used this plugin to display-but-block access to sections of a page until conditions are met.  We've also used this plugin to prevent interaction while background actions are performed and/or the content is being refreshed.

(NOTE: Please be aware that blocking/disabling is usually purely cosmetic and can be bypassed by accessing the browser's console and adding inline overrides or disabling event handlers.)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines