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

Question

Question

change radio button to Yes when all fields full

asked on September 23, 2019

Could someone help me with JavaScript to cause a radio button to be checked to Yes when all the fields of one column in a collection field are filled?

I thought I could cause the action to happen with this "All Tasks Are Complete" radio button, but I'm having trouble with the JavaScript:

Thanks for your help!

0 0

Answer

SELECTED ANSWER
replied on September 27, 2019

The code should only hide the Submit button, which uses the Submit class.  Your "Finished My Part" button is the Approve button, which uses the Approve class.  If you wanted to hide it, you would use $('.Approve') in place on $('.Submit').

Looking at your screenshot, the "Final Action Taken" appears to be a multi-line field instead of a single line field.  Multi-line field uses textarea as opposed to input.  If so, try changing lines 7 and 27 of the script to use textarea instead of input.

1 0

Replies

replied on September 27, 2019 Show version history

@████████- Personally, I prefer functionality similar to what you said in your reply rather than your original question... 

I don't believe it's possible to show/hide the Submit button via Field Rules, but it is possible via Javascript:

$('.Submit').show();
$('.Submit').hide();

 

Sometimes I want something even better than showing or hiding the button.  I make the button appear disabled/enabled.  Here's a simple way to do it that I like to use:

//enable instead of show
$('.Submit').prop('disabled', false);
$('.Submit').css('opacity', '1'); 

//disable instead of hide
$('.Submit').prop('disabled', true);
$('.Submit').css('opacity', '.4');

 

Here's a working example.  I made a collection with CSS Class of testCollection, and it has a single line field with CSS Class of testField.  And here's the full Javascript:

$(document).ready(function () {
  
  //when form is loaded, count the number of blank values in the fields with testField class
  //if there are no blank values, enable and show the Submit button.
  //if any values are blank, disable and fade out the Submit button.
  var blankFieldCount = 0;
  $('.testField input').each(function() { 
    if ($(this).val() == '') { 
      blankFieldCount = blankFieldCount + 1;
    }
  });
  if (blankFieldCount == 0) { 
    $('.Submit').prop('disabled', false);
    $('.Submit').css('opacity', '1'); 
  }
  else { 
    $('.Submit').prop('disabled', true);
    $('.Submit').css('opacity', '.4');
  }
  
  //when changes are made to any field in the testCollection, count the number of blank 
  //values in the fields with testField class
  //if there are no blank values, enable and show the Submit button.
  //if any values are blank, disable and fade out the Submit button.
  $('.testCollection').change(function(){
	var blankFieldCount = 0;
    $('.testField input').each(function() { 
      if ($(this).val() == '') { 
        blankFieldCount = blankFieldCount + 1;
      }
    });
    if (blankFieldCount == 0) { 
      $('.Submit').prop('disabled', false);
      $('.Submit').css('opacity', '1'); 
    }
    else { 
      $('.Submit').prop('disabled', true);
      $('.Submit').css('opacity', '.4');
    }
  });
  
});

 

Submit button is disabled on incomplete form:

 

 

And the Submit button is enabled when form is complete:

 

1 0
replied on September 27, 2019

Matthew!  It worked, it worked, it worked!!!  So awesome!  Thanks so much!

1 0
replied on September 23, 2019 Show version history

Actually, while gone for lunch, I realized that there might be another option.  Can we have JavaScript that will make the submit button hidden until all of the Final Action Taken fields (one column in a collection table) are filled?

0 0
replied on September 27, 2019

Thank you so much, Matthew!  I like your solution!

  • I have copied your JS into my form (without changing a thing), and
  • put the testField in the Advanced Tab CSS for the targeted field and
  • put the testCollection in the Advanced Tab CSS for the main Collection, and
  • run a test. 

 

Result:  The Submit button is not hid.  Is there something I'm missing?  Something that I forgot to do/change?  

Note, I need the "Finished My Part" button to always be visible for each person to use to save their Final Action comments.  Also note, the number of final action comments needed will change for each form.  Might be 2, 3, 4, 5 or more on any form submission.

 

0 0
replied on September 27, 2019

You are very welcome. smiley

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

Sign in to reply to this post.