You are viewing limited content. For full access, please sign in.

Question

Question

Hide the submit button base on the answers to two radio buttons

asked on April 12

I am completely new to Laserfiche, JavaScript, and forms. I have a form with two questions on it that if the answer to either one of them is "yes", the form can't be submitted. Most of the form is hidden unless they answer "no", but forms is putting a submit button on the page. How can I hide the submit button unless they have answered "no" to both questions.

0 0

Replies

replied on April 12 Show version history

If you hide the built-in submit button with CSS

.Submit {
    display:none !important;
}

Then you can use a CustomHTML element to build your own Submit button

<button class="customBtn" type="Submit">Submit</button>

This custom button with the Submit type will still trigger all the form validation and everything, so you don't have to do much customization.

Next, you just use a Field Rule to show/hide your custom button based on the values of your radio inputs.

You'll probably need some CSS to style it exactly how you want (that's what the customBtn class is for), but no JavaScript required!

1 0
replied on April 13 Show version history

I do this via Javascript on a lot of my forms.

Here's some Javascript you can add that will work with any number of Radio Buttons (I tested using 3 of them).  Make sure your radio buttons are set to include values, and that your desired value is No.  Give all of your radio buttons the CSS Class of mustBeNo.  Then add the following Javascript.

When the form loads, and when any of the mustBeNo radio buttons is changed, it checks to make sure every one of the mustBeNo radio buttons has been marked as No.  If any of them are not No, it hides the Submit button.  If all of them are set to No, then it will show the Submit button.

$(document).ready(function () {
  
  //Run the showHideSubmit function when the form loads
  showHideSubmit();
  
  //Run the showHideSubmit function whenever a radio button changes
  $('.mustBeNo').change(function(){
    showHideSubmit();
  });
  
  //Check for all mustBeNo radio buttons to have a value of No,
  //Hide the submit button if any of them do not have a value of No
  //Show the submit button is they all have a value of no
  function showHideSubmit() { 
    var n = 0;
    $('.mustBeNo input[value=No]').each(function() { 
      if (!$(this).prop('checked')) { 
        n++;
      }
    });
    if (n == 0) { 
      $('.Submit').show();
    }
    else { 
      $('.Submit').hide();
    }
  }
  
});

 

1 0
replied on April 15

It worked perfectly. Thank you!

0 0
replied on April 15

@████████ - Please consider marking the response that you ended up using as the answer to your question.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.