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

Question

Question

How to hide the Submit button based on a text field in a collection

asked on May 17, 2021 Show version history

I am trying to hide the submit button if an employee does not have a valid hunting license.  When the employee's ID (.employeeID) is entered their name and valid hunter status is filled in from a database lookup.  If the database return for Valid Hunter (.hideSubmit) does not equal Yes, then I want the Submit button to hide.  I want to check this for each employee that is entered into the collection.  The JavaScript I am currently using is not working at all.  Can someone please help me with this JavaScript?

$(document).ready(function(){
  
  $('.employeeID input').change(function(){

    if($('.hideSubmit').val() !== "YES") {

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

    else{

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

0 0

Answer

SELECTED ANSWER
replied on May 17, 2021 Show version history

Instead of using JavaScript to hide/show the button, I always use the following approach:

1) Use CSS to hide the built-in Submit button

.Submit {
  display: none !important;
}

 

2) Add a custom HTML element with my own button

<button id="submitBtn" type="button">Submit</button>

(You can add CSS to style it however you choose)

#submitBtn {
  width: 100px;
  height: 30px;
  color: #000000;
  border-color: #404040;
  border-width: 1px;
  border-style: solid;
  background: #00ff00;
}

 

3) Add JavaScript to tie the custom button to the default one

$(document).ready(function(){
  $('#submitBtn').on('click', function(){
    $('.Submit').click();
  });
});

 

4) Use Field Rules to show/hide your custom button

 

However, since you're dealing with a collection, you'll want to flip the condition so it Hides the button when any fields are not equal to Yes (i.e., only show it when they're ALL Yes).

 

 

For the sake of being thorough, there's a few reasons why your current code wouldn't work:

  1. Custom event handlers are attached when the page loads, so any collection groups added after that won't have those handlers. To get around this, you need to use event delegation. 
  2. The $('.hideSubmit') selector has a couple of issues. First, it is selecting the parent container, not the input within the parent. Second, there's nothing in there to tell it which one to select since there could be many in the collection.
  3. Because your condition is only checking one value, if even one of your target fields has a Yes value, it would still show the button when the other values may not be valid

 

For the first two issues, you can check out the following post to see some examples of event delegation and how to reference the "sibling" fields in each collection group.

Table and Collection JavaScript Event Handlers - Laserfiche Answers

For the last item, you'd need to check every single "Valid Hunter" field each time to make sure they are all yes before deciding whether to hide or show (this is part of the reason using the custom html button and field rules is more manageable).

0 0
replied on December 22, 2021

Jason,

Is there a way to remove the white section (background) where the default submit/reject buttons would normally appear?  Since I hid them I would like to remove that section entirely.

 

Thanks

0 0

Replies

replied on May 17, 2021

Thank you Jason! This works great smiley

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

Sign in to reply to this post.