Disabled Select Input With Preset Value Doesn't Pass the Value Through POST to Server Action

Wappler General How To
#1

Wappler 3.0.0 b1

Steps to re-create - example is below
1 Create a form with a select input, data source and associate it with a POST type server action which writes the value to a database field.
2. Set up an initial value through the Value attribute.
3. Create a condition for the Disabled attribute whereby when the form is viewed, the input is disabled.
4. View the page and submit the form.
5. The preset value isn’t passed through to the form.
6. Remove the Disabled attribute.
7. The preset value IS passed through to the form.

My real world example is below. This is part of a universal payment data entry form. Sometimes the form has to be pre-populated with the currency and this input disabled so the user cannot change it. Other times, the same form needs to allow the user to select the currency.

<select id="i_payment_currency" 
   dmx-bind:options="currencies.data.currencies" 
   optiontext="symbol" optionvalue="id" 
   name="currency" class="input_currency"
   dmx-bind:disabled="(this_payment_currency.value > 0) || (payment_editable.value == 0)"       
   dmx-bind:value="this_payment_currency.value">
#2

Hi Antony,

Why are you disabling it? Wouldn’t you just use ‘Readonly’ in this case?

1 Like
#3

It is conditionally disabled:

#4

But why not make it read only instead of disabled so that the value gets passed. Disabled fields won’t get passed. You should be able to make it read only using the exact same expression you used to disable it.

1 Like
#5

So what is the difference between read only and disabled?

#6

Only difference is the disabled one will be skipped when submitted.

#7

@Antony
I’d suggest you to check some resource like:
https://www.w3schools.com/tags/att_input_disabled.asp

https://www.w3schools.com/tags/att_input_readonly.asp

in order to learn how different HTML attributes work, before posting everything as a bug report :slight_smile:

1 Like
#8

Fair enough.

I can’t see a Wappler attribute for conditionally making something read-only on a select item though… I can only see a box to turn read-only on and off.

So how will I make the input conditionally read-only to achieve my design objective?

Can I use this?

dmx-bind:readonly="(this_payment_currency.value > 0) || (payment_editable.value == 0)"
#9

You can make any HTML attribute dynamic by adding dmx-bind: in front of it.

dmx-bind:disabled
dmx-bind:readonly
dmx-bind:id
etc.

1 Like
#10

Teodor, thank you for this suggestion.

The wonderful things about Wappler is that it allows new designers like me to come into app development, and we just cannot be expected to know of every possible thing to look up.

Your patience with people of my experience, who are a big market for the Wappler product, would be much appreciated! :slight_smile:

1 Like
#11

@brad, @teodor, thank you for your rapid response! :slight_smile:

1 Like
#12

No problem, man! Good luck! :beers:

1 Like
#13

And btw the Readonly attribute is available in the Dynamic Attributes list, where all the dynamic attributes are.

2 Likes
#14

Are you sure of that?

readonly

#15

Ah sorry, didn’t notice we are talking about a select menu, I was referring to a text input.
The readonly attribute is not available for selects in HTML5.

#16

Oh… :frowning:

How can I achieve what I want with a select input then…?

#17

It’s a bit tricky with selects. My suggestion is to use the disabled attribute for the select but also add a hidden input with the same name and value.

When your select is enabled, then disable the hidden input :slight_smile:

#18

Thanks Teodor, I’ll give it a go! :slight_smile:

1 Like
#19

Couldn’t agree more!

1 Like
#20

That was pretty funny (and true) Teo! Haha. I needed that laugh this morning!