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

Discussion

Discussion

Action buttons - show/hide javascript not working for all three

Forms
Updated September 1, 2022
posted on August 31, 2022

I have a radio button field ('.sectionheadDecision') with three choices - Approve, Reject, Terminate.

I am using javascript to control the display of the action buttons, but I can only get two out of three to display properly. In the script below, the Approve ('.Approve') button appears by default. The Reject button ('.Submit') appears when the Reject choice is selected, but when the Terminate ('.Reject') choice is selected the Approve button appears again.

$(document).ready(
function() {
{
$
$('.Approve').show();
$('.Reject').hide();
$('.Submit').hide();
}
});

$(document).ready(function() {
  $('.sectionheadDecision').click(function() {   
    if($('input[value="SectionHeadTerminate"]').is(':checked'))
      {
      $('.Approve').hide();
      $('.Reject').show();
      $('.Submit').hide();
      }
    else {
      $('.Approve').show();
      $('.Reject').hide();
      $('.Submit').hide();
    }
  });
});

$(document).ready(function() {
  $('.sectionheadDecision').click(function() {
    if($('input[value="SectionHeadReject"]').is(':checked'))
      {
      $('.Approve').hide();
      $('.Reject').hide();
      $('.Submit').show();
      }
    else {
      $('.Approve').show();
      $('.Reject').hide();
      $('.Submit').hide();
    }
  });
});

I've done this many times with two radio button choices, so I'm not sure what I'm missing when adding a third choice. Thank you.

0 0
replied on September 1, 2022

Another alternative I tend to prefer is to use Field Rules. Basically, I create my own buttons using Custom HTML and hide the default ones with CSS.

That way, I can tie my custom buttons to the defaults with JavaScript and all I need to do to show/hide them is set up Field Rules for the Custom HTML items.

0 0
replied on August 31, 2022

I think you need to put it all in one click or change event. This is what I did but I made use of a switch statement. I hope it helps. 

 

$(document).ready(function(){
  $('.Approve').show();
  $('.Reject').hide();
  $('.Submit').hide();
  
  $('.sectionheadDecision input').change(function () {
    $(".sectionheadDecision input:checked").each(function(){
      
      switch ($(this).val()) {
        case "SectionHeadTerminate":
          $('.Approve').hide();
          $('.Reject').show();
          $('.Submit').hide();
          break;
        case "SectionHeadReject":
          $('.Approve').hide();
          $('.Reject').hide();
          $('.Submit').show();
          break;
        default:
          $('.Approve').show();
          $('.Reject').hide();
          $('.Submit').hide();
      }

    }); /* END: for each sectionheadDecision*/
  });
  
});  //close document.ready

 

2 0
replied on September 1, 2022

Thank you most kindly, Genny, this is brilliant. I hadn't known of this technique but I can see it being helpful in the future.

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

Sign in to reply to this post.

Details
Related Posts
Loading ...