Question

hide submission button if yes

Forms How To Ideas

Updated September 14, 2020

asked on September 9, 2020

Hello all,

I have created a form in which i have a yes or no question for. When the answer is Yes i want the submission button to be hidden. I only want the user to be able to submit the form if the answer to the question is No.

The current Javascript i have is the following.

$(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 mustBeYes radio buttons to have a value of No,
//Hide the submit button if any of them have a value of Yes
//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();
}
}

});

2 0

Answer

SELECTED ANSWER

replied on September 14, 2020

Thanks Stephen,

This did the trick for the answer of Yes. When i select Yes the submit button is hidden but when i click on No the submit button is still hidden. Is there a way to make is so that when the answer is yes the button is hidden and when the answer is No the button then appears?

Screen Shot 2020-09-14 at 9.49.24 AM.png (161.56 KB)

| Download

1 0

Replies

replied on September 11, 2020 • Show version history

Use the following JavaScript:

$( document ).ready(function() {
  
  // Run visibility checker on page load
  toggleVisibility();
  
  // Runs when the radio button is changed
  $( ".mustBeNo" ).change(function() {
    toggleVisibility();
  });
  
  // Makes button visible if No
  function toggleVisibility(){   
    if ($('input[name="Field33"]:checked').val() == "No"){
      $('.Submit').show();
    }else{
      $('.Submit').hide();
    }
  }
});

Please note: Change Field33 in the toggleVisibility function to the appropriate field name of your form.

You can get the field name by checking the id of the element and changing "q" to "Field". As you can see in my screenshot, my radio button field has the id of "q33".

1 0

SELECTED ANSWER

replied on September 14, 2020

Thanks Stephen,

Screen Shot 2020-09-14 at 9.49.24 AM.png (161.56 KB)

| Download

1 0

replied on September 14, 2020 • Show version history

From your screenshot, it looks like you haven't added a mustBeNo CSS class to the radio button field. This must be added to trigger the toggleVisibility function.

(I used mustBeNo because your original code implied you used this CSS class name.)

1 0

replied on September 14, 2020

Awesome thanks Stephen that did the trick!

1 0

You are not allowed to follow up in this post.

Question

Question

hide submission button if yes

Answer

Replies

Sign in to reply to this post.