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

Question

Question

Javascript to show submit button without relying on clicks (example: a draft form

Forms
Updated October 26, 2022
asked on October 21, 2022

I'm trying to see if there is a way to hide the submit button by default, then if the value of the radio buttons = Yes, show the submit button.

There are 4 radio buttons this is dependent on, and the problem I'm facing is though the available javascript in previous answers posts works on a new form, if the form is a form that was saved as a draft the submit button does not populate because the submitter is not actively clicking the radio buttons. The only way to correct this is by having the submitter reselect one of the radio buttons in the draft.

Any advice would be appreciated. 

0 0

Replies

replied on October 21, 2022

Just a thought, quite often I create a Button using Custom HTML that when clicked will click the built in Submit button which I have hidden with css. This way I am able to use the built in field rules to hide the custom button which can be easier to manage than having to build those conditions in JS.

3 0
replied on October 21, 2022

Here's one way to do it.

Give all of your radio buttons the CSS Class of: preventSubmitIfNotYes

Then add this Javascript: 

$(document).ready(function() {
  
  //Run the CheckForAllYes function when the form is loaded.
  CheckForAllYes();
  
  //Run the CheckForAllYes function when any of the radio buttons is changed.
  $('.preventSubmitIfNotYes').change(CheckForAllYes);
  
  //Function to check all radio buttons with the preventSubmitIfNotYes class.
  //If all of them are set to Yes, then the submit button is shown, otherwise
  //it is hidden.
  function CheckForAllYes()
  {
    var allYesAreChecked = true;
    $('.preventSubmitIfNotYes input[value="Yes"]').each(function() {
      if(!$(this).is(':checked')) {
        allYesAreChecked = false;
      }
    });
    if(allYesAreChecked) {
      $('.Submit').show();
    }
    else {
      $('.Submit').hide();
    }
  }
  
});

 

When the form is loaded, and when any of the radio buttons is changed, it will check all of the radio buttons that have the preventSubmitIfNotYes class and a value of Yes.  If they are all checked, it will show the submit button, if any are not checked, it will hide the submit button.

1 0
View 1 previous reply
replied on October 25, 2022

Good morning, Matthew! 

This solution is almost perfect, however, I realized that there is a slight variable thrown into the mix for my form that I didn't account for when posting.

I have a two fields that show/hide based on a different radio button. If either of those two fields are no, based on which one is visible, as well as the other fields that will always be visible being no, the submit button should be hidden. Is there a way to accomplish that? 

0 0
replied on October 25, 2022

If you are hiding the fields using Field Rules, then the hidden fields are given a class of hidden automatically.

When we are counting how many of the fields are not marked as Yes, we can ensure we are only counting them if they do not have the hidden class, like this: 

!$(this).closest('.preventSubmitIfNotYes').hasClass('hidden')

 

By adding that to line 16 of the code, in addition to verifying that the field isn't checked, we can also check that it doesn't have the hidden class.  The modified version of the full code would be: 

$(document).ready(function() {
  
  //Run the CheckForAllYes function when the form is loaded.
  CheckForAllYes();
  
  //Run the CheckForAllYes function when any of the radio buttons is changed.
  $('.preventSubmitIfNotYes').change(CheckForAllYes);
  
  //Function to check all radio buttons with the preventSubmitIfNotYes class.
  //If all of them are set to Yes, then the submit button is shown, otherwise
  //it is hidden.
  function CheckForAllYes()
  {
    var allYesAreChecked = true;
    $('.preventSubmitIfNotYes input[value="Yes"]').each(function() {
      if(!$(this).is(':checked') && !$(this).closest('.preventSubmitIfNotYes').hasClass('hidden')) {
        allYesAreChecked = false;
      }
    });
    if(allYesAreChecked) {
      $('.Submit').show();
    }
    else {
      $('.Submit').hide();
    }
  }
  
});

 

1 0
replied on October 26, 2022

Howdy again, I appreciate your help so far. I put the suggested script in place and it looks like I'm still experiencing the same issue with the hidden fields. Regardless of if one of the two fields in question are hidden if they aren't both marked as yes the submit button remains hidden. 

0 0
replied on October 26, 2022

What version of Forms are you running? 

And are you hiding those fields via Field Rules or some other method (CSS or Javascript for example)?

Also, the code is set-up to run when the fields with the preventSubmitIfNotYes class are changed.  Is it possible that none of them have been changed after the time that some of them were hidden?

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

Sign in to reply to this post.

Details
Related Posts
Loading ...