Disable Form Field

Disable Form Field

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..

Tags (3)
5 REPLIES 5

Re: Disable Form Field

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.

Re: Disable Form Field

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.

Re: Disable Form Field

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)

Re: Disable Form Field

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

Re: Disable Form Field

  • 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!