Hide Submit button on form based on field value for the logged in user

Help Center Get Answers
1

I’m building an employee reward store inside my app. The reward store portion of the application uses three main objects:

  • Employee (User object)
  • Reward (An object that contains details of the reward including cost, quantity, etc)
  • Purchase (A record created to track the order and update the inventory on the Reward object, and point value on the Employee object.

Everything seems to be working correctly, but I seem unable to limit a users ability to purchase an item when they do not have available “points”. (Please note that I am not using an e-comm component). I have been unable to find a way to limit the submit button based on the criteria of available “points” the user has.

Example: User has 5 reward points, and should be unable to “purchase” an item that requires 10 reward points.

Has anyone worked with something similar or have suggestions on how I could either eliminate the form option, or hide the submit or action button?

2

Hi,

I suggest hiding the entire form, rather than only the submit button. You can hide the entire form using Page Rules. You would create a rule that hides the form when the user doesn’t have enough points.

To hide only the Submit button based on a field value in the logged-in account, you’ll need to write custom JavaScript. The code would be similar to this (untested):

// Change "view_1" to the view you want to listen for
$(document).on('knack-view-render.view_1', function(event, view, data) {
  // Do something after the view renders
  const pointsNeeded = data.field_1
  const availablePoints = Knack.getUserAttributes().values.field_2 
  const $submitButton = $(`#${view.key} button[type="submit"]`)

  if (availablePoints < pointsNeeded) {
    $submitButton.hide()
  }

});