Disable Form Field | Community
Skip to main content
Benjamin_Ortiz1
Benjamin_Ortiz1
Level 4
February 21, 2019
Question

Disable Form Field

  • February 21, 2019
  • 2 replies
  • 4119 views

Hi - I am looking for direction on how I would go about disabling a form field based on another fields value. I do not want to hide the filed, just disable it..possibly gray it out. I assume I would need some JS..

2 replies

SanfordWhiteman
SanfordWhiteman
Level 10
February 21, 2019

Yes, listen for the input event (in this case you must use DOM events, there's no Forms 2.0 event for this). Can't show you more if you don't have the form built.

Benjamin_Ortiz1
Benjamin_Ortiz1Author
Level 4
February 22, 2019

Sanford - I appreciate your response. I have the form on a test page here: http://pages.wheelsup.com/MT-TEST.html

I am looking at the 'Membership Type' field. The logic I am trying to achieve is to disable the 'Wheels Up Business Membership' checkbox if 'Wheels Up Connect Membership', 'Wheels Up Core Membership' or a combo of both is selected. Essentially only allowing Business to be selected by itself.

SanfordWhiteman
SanfordWhiteman
Level 10
February 22, 2019

This isn't really interdependent fields, then.

It's interdependent checkboxes within the same checkbox group.

A specific implementation of this is easy, but abstracting the concept isn't. See the JS on

MktoForms2 :: Checkbox Mutex Subgroups (nation/49344)

Harish_Gupta6
Harish_Gupta6
Level 6
February 22, 2019

Hi Benjamin,

As suggested by Sanford, you need to put action on input event. Here is the sample script:

<script>

// <![CDATA[

MktoForms2.whenReady(function (form) {

var x = document.getElementById("MainField");

x.addEventListener("blur", myBlurFunction, true);

function myBlurFunction() {

var y = document.getElementById("DependentField");

var mainFieldValue = x.value;

if(mainFieldValue=="Test")

{

document.getElementById("DependentField").disabled = true;

}

} // ]]></script>

Thanks

Harish Gupta
SanfordWhiteman
SanfordWhiteman
Level 10
February 22, 2019
  • Use the input event, not blur.
  • Constrain the selector to the form element, not the document.
  • Select by name, not ID.
  • Consider the input types that consist of more than one element.
  • Don't disable elements without resetting them because it breaks HTML form semantics (a disabled element is not posted).
  • Use meaningful variable names!
Terms & ConditionsAccessibility statement

Loading footer...