Disable dynamic Select option based on condition

[famousmag]

Hey guys,

I would like some help in the following:

I have an order form and each product (line) have an optional variation-value list:
for example color(white/black), size(small/large) etc.
So, in a modal I define them and save them in a data store in order to be available when the form is submitted.
The variations and their values are 2 select come form a server connect
The problem is that the user cannot select more than 1 time each variation and I cannot find the right condition for disabling the options. The conditions I have tried give either all options are enabled or all disabled

Everything else works fine…
The problem is in the option’s repeat dmx-bind:disabled definition.

<select id="selectVars" class="form-select fw-bold" required="" dmx-bind:value="prod_vars.data[variationIndex.value.toNumber()-1].var_id">
       <option value="" dmx-repeat:repeatvars="srvc_getVar_OptionList.data.query" dmx-bind:value="var_id" dmx-text="var_Name" dmx-bind:disabled="prod_vars.data.where(`var_id`, var_id, 'inArray')">option</option>
</select>

Wappler 5.5.1 , php ,mysql

Please if anybody can point me the right way it will be much appreciated.

Thank in advance
Tasos

[ben]

This may be helpful:

Using App Connect Form Repeater with Update Record Forms

Intro Form repeater can be used in update record forms in order to easily update nested data to your database table. Similar to our Insert Data tutorial - we will show you how to update a user and its contacts - so make sure to check it first, before continuing here. The user will be stored in the main table, while its contacts will be stored in a sub table. Overview We created an update record page with a list of records an a form: [Screenshot_93] Our dynamic list gets its data from a …

[famousmag]

Thanks for your input @ben,

My problem is on the select’s option setup ( dmx-bind:disabled). What condition should I use in order to check if the selectedValue of my select is disabled if its value exists in the prod_vars data store…

<select id="selectVars" class="form-select fw-bold" required="" dmx-bind:value="prod_vars.data[variationIndex.value.toNumber()-1].var_id">
       <option value="" dmx-repeat:repeatvars="srvc_getVar_OptionList.data.query" dmx-bind:value="var_id" dmx-text="var_Name" dmx-bind:disabled="prod_vars.data.where(`var_id`, var_id, 'inArray')">option</option>
</select>

Which formatter should I use and how?
I have already tried ‘inArray’ , ‘contains’, ‘==’ but no luck… I don’t know if my syntax is wrong

I am talking about this solution that @mebeingken gave a few days ago on Paul’s question…

Disable an option in a form select when dynamic

Don’t add the dynamic options to the select element in the typical manner, instead add a single option element and add a repeat to the option. Then you can use dmx-bind:disabled. I did this with show/hide but should be the same for disabled.

How can I accomplish that in my case?

[famousmag]

All I need to do is to disable an option (options generated based on SC) inside my select if the option’s value already exists in my data store…

Anybody can give me an idea of the right way to do this?

[Teodor]

You can do something like:

 dmx-bind:disabled="prod_vars.data.values(`var_id`).contains(var_id)"

[famousmag]

Thanks brother!!

This is what was trying to archive and couldn’t find the right syntax of the formatter.

You gave me something that I will use a lot and I didn’t know how to…

Thanks again!

[sitestreet]

I am in need of a similar solution. I have a select input which is populated from the data. Some of the items need to be disabled so they can’t be selected (the list is in section so I have some section headings). How can I dynamically add disabled to the option if the option text matches a criteria?

[famousmag]

Hey Jon,

here is the select containing the option with the dmx-repeat attribute:

<select id="selectVars" class="form-select fw-bold" required="" dmx-bind:value="prod_vars.data[variationIndex.value.toNumber()-1].var_id">
    <option value="" dmx-repeat:repeatvars="srvc_getVar_OptionList.data.query" dmx-bind:value="var_id" dmx-text="var_Name" dmx-bind:disabled="prod_vars.data.values(`var_id`).contains(var_id)">option</option>
</select>

Here the option’s data (value:‘var_id’ & text:‘var_name’) come from a query srvc_getVar_OptionList.data.query and I check if the value ‘var_id’ of a datastore named prod_vars.data contains the query row’s value
(In my case the var_id it happens to have the same name in my query and in my datastore)

If you need help just “ring the bell”

[sitestreet]

@famousmag

dmx-bind:disabled="

Genius. Thanks @famousmag. I hadn’t thought of putting a repeat in the options. I was just using the data source in the select itself.

All working perfectly.