Hide Submit Button Unless all Radio Options are "Yes"

Hey Tada community! Since submit button display rules do not currently have the functionality to hide the submit button, I recently created a workaround to conditionally hide the submit button from view on the page that I thought I’d share with the community here!

Before getting started, it is important to note that, if you wish to fully prevent users from submitting a form under certain cases, validation rules should be used. While hiding the submit button will prevent many users from submitting a form, if a user knows how to, they can still change the page HTML to access the button. You can certainly combine this solution with validation rules to fully ensure that a form cannot be submitted in your case.

Proceeding with the method… This example works for radio fields and checks that all are marked as “Yes”. Furthermore, the example works on any number of radio fields included in the form. It’s a pretty specific use case, however, the Javascript can certainly be modified to check other values on the radio fields.

To check out a short demo along with a description of how to set this up, please see this video.

Here’s the JavaScript that also goes along with this method.

var check = function(vals, numVals){
var x, status = 0;
for(x of vals){
	    if(x.value == "Yes"){
	        status ++;
	    }
	}
	if(status != numVals){
    $(".radio-hide").hide();
	}
	else{
	    $(".radio-hide").show();
	}
};

TB.render('component_4', function(data) {
	var options = $(".radio .tb-radio"), numOptions = $(".radio").length;
	check($(".radio .selected input"), numOptions);
	options.click(function(){
	    if($("input", this)[0].value=="Yes"){
	        $(this).addClass("selected");
	    }
	    else{
	        $(this.previousElementSibling).removeClass("selected");
	    }
	    check($(".radio .selected input"), numOptions);
	});
});

I hope this method can be found useful! :slightly_smiling_face:

3 Likes