Disable an option if another option is empty

[Sim]

I am developing an add-on with two options in my option group. Both options are simple text entry boxes.

I am doing validation on both options when they are saved, but the first option must be set before the second option can be validated.

If no options are currently set and I enter data for both options at the same time and then save, the validation for the second option fails because there is no data available from the first option yet (or is there?).

I think from a UI perspective, the best way around this would be to have the second option disabled until the first option has been successfully set and validated (saved).

Only then would the second option become available to edit and validation would work fine because the first option is already set and available for use in the validation mechanism.

What's the best way to do disable an option until another option has been set?

I've looked through all of the core admin options, but the examples I find there seem to use a bit too much magic to understand without help.

 

[Chris D]

Set up the second option so it uses a named template. There's various examples of these throughout XenForo, they mostly follow a specific syntax, e.g. how they reference the option ID, the name of the input, etc. so make sure you take care to get that right.

But the basic idea (this doesn't follow the specific syntax I mentioned ) is something like this:

<xen:if is="{$optionValue1}">
    <input type="text" value="{$optionValue2}" name="option_2" />
</xen:if>

 

[Sim]

Thanks Chris - I was able to reproduce the default functionality by using a named template.

However, I wanted to disable rather than hide the field, and with a bit more digging into the source code, I discovered that while there is no "disable" option on a xen:textbox ... you can achieve the same thing with making it readonly and applying a "disabled" style to the field!

For future reference, here is what I'm now using as a named template for my second option and it seems to work fine (my first option isn't really called $xenOptions.optionValue1, names have been changed to protect the innocent):

<xen:controlunit label="{$preparedOption.title}" hint="{$preparedOption.hint}">
    <xen:explain>{xen:raw $preparedOption.explain}</xen:explain>
    <xen:html>
        <xen:textbox name="{$fieldPrefix}[{$preparedOption.option_id}]" value="{$preparedOption.option_value}" readonly="!{$xenOptions.optionValue1}" inputclass="{xen:if '!{$xenOptions.optionValue1}', 'disabled'}" />
      
        <input type="hidden" name="{$listedFieldName}" value="{$preparedOption.option_id}" />
        {xen:raw $editLink}
    </xen:html>
</xen:controlunit>

Thanks for pointing me in the right direction.