Bugs on class button disable

1 reply · opened Sep 17, 2021

AapradhanSep 17, 2021

I am tying Disable button for 5 seconds after once submit. when I add css to submit button its diable whole button not even able to submit once
class="button button-3d button-small button-rounded button-black"

here is jquery script I am using to disable buttion for 5 sec after submit

$(document).ready(function(){ 
	$('#update_btn').click(function() {      
		var update_btn = $(this);      
		update_btn.prop('disabled', true);     
		setTimeout(function() {         
		update_btn.prop('disabled', false);     
		},5000);   //simple jQuery enable after 5 seconds 
	}); 
}); 

this works able to submit form
input name="Submit" type="submit" value="Add" alt="Add" id="update_btn"
not able to submit form when i add css to button css can't even sbmit once
input name="Submit" type="submit" value="Add" alt="Add" id="update_btn" class="button button-3d button-small button-rounded button-black"

SSemicolon WebSTAFFSep 19, 2021

Hello,

Currently, the styling for Disabled Buttons is not included with Canvas. You can consider using the following CSS code:
[ch_pre type="css"].button-disabled {
opacity: 0.65;
pointer-events: none;
}[/ch_pre]

and then simply add the .button-disabled Class to the .button Element.

Then you can consider using the following JS Codes:
[ch_pre type="js"]$(document).ready(function(){
$('#update_btn').click(function() {
var update_btn = $(this);
update_btn.toggleClass('button-disabled', true);
setTimeout(function() {
update_btn.toggleClass('button-disabled', false);
},5000); //simple jQuery enable after 5 seconds
});
});[/ch_pre]

Additionally, we recommend using `` Tags for Submit Buttons. Example:
[ch_pre]Add[/ch_pre]

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard