Disable/Gradeout Submit button on Portal

[Raji15]

Hi All,

I have a requirement, there is a field name Nominee type is checkbox. If the user checks the box a disclaimer should populate " You cannot submit" and the Submit button in the portal should be disable of Gradeout. If user unchecks, it should allow user to submit the form. Seeking help!

Thanks in advance.

[Sandeep Rajput · Accepted solution]

@Raji15 Message can be shown easily, however in order to disable the submit button, DOM manipulation via client script will be needed. Please check with your team if they are willing to go that route.

Here is an example of the same.

function onChange(control, oldValue, newValue, isLoading) {
  if (isLoading) return;

  // Show or hide disclaimer text
  if (newValue) {
    // Show disclaimer
    g_form.showFieldMsg('nominee_type', 'You cannot submit', 'error');

    // Disable submit button
    disableSubmitButton(true);
  } else {
    // Hide disclaimer
    g_form.hideFieldMsg('nominee_type', true);

    // Enable submit button
    disableSubmitButton(false);
  }
}

// Helper function to disable/enable Submit button in Service Portal
function disableSubmitButton(disable) {
  try {
    const interval = setInterval(function () {
      const btn = document.querySelector('button[type="submit"]');
      if (btn) {
        btn.disabled = disable;
        btn.style.opacity = disable ? '0.5' : '1';
        btn.style.pointerEvents = disable ? 'none' : 'auto';
        clearInterval(interval); // Stop once button is found and updated
      }
    }, 300);
  } catch (e) {
    console.error("Error disabling submit button:", e);
  }
}

[Raji15]

Hi Sandeep,

Thanks much for clarification, I will discuss with the team.

[Ankur Bawiskar]

@Raji15 

why to disable the OOTB portal button?

You can use onSubmit catalog client script and stop the form submission

Showing/hiding/disabling the submit button will require DOM/HTML manipulation which is not recommended practice

function onSubmit() {
    if (g_form.getValue('checkboxVariableName') == true) {
        alert('You cannot submit');
        return false;
    }
}

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Raji15]

Hi, 

Tried, not working I'm still able to submit it and the disclaimer doesn't show