Disable or Readonly with Select Dropdown

Wappler General How To
#1

I noticed that when I used disable or readonly on select dropdown input fields nothing really changes. You can still select another item in the select list.

My goal is to allow the user to view the readonly or disabled data in the form, and only to be allowed to update the field of my choice.

Anyone have any ideas of how to prevent users inputing data into disabled or readonly inputs?

What about something like this:

 $('#selectID').prop('disabled',false);

Thank you for your time and suggests.

Form with dropdown reference fields and conditional fields
#2

The select input does not support readonly.
You can however disable it using the disabled attribute. Note that the disabled inputs values are not being sent on form submit.

#3

When I used the disable, it did not pass the select value to the database during the update.

#4

Well yes, that is how disabled inputs work :slight_smile:
You should create a hidden input, having the same name and id as the disabled select and having the same value as the select. This way the hidden input value will be sent, when the select is disabled.

1 Like
#5

I’ll give it a try.

If it doesn’t suit the objective, I may just rebuild the update form to only include what needs to be updated and post the readonly items in a column above and outside the form.

Thanks Teodor!

#6

Teodor, would this apply to the checkbox groups too?

#7

No value of an input that has a disabled attribute will be sent on form submit:

1 Like
#8

So then I would have to create a hidden input with a dmx binding value for each checkbox in the group?

#9

This worked! Thank you for your help…

Screen Shot 2021-10-20 at 11.05.34 AM
Screen Shot 2021-10-20 at 11.05.34 AM1067×411 83.4 KB

#10

Actually, it should NOT have the same ID.
Only the same name.
Else the browser will throw a warning for duplicate elements.

#11

It works fine, after I disabled each one, I didn’t put the IDs back inside the inputs.

<label for="inp_school_year" class="pt-2">School type</label>
<div class="form-check pt-2">
<input class="form-check-input" type="checkbox" value="Boarding" id="school_type_1" name="school_type" dmx-bind:checked="(sc_data_detail_school.data.school_type == 'Boarding')" disabled="true">
<label class="form-check-label pr-5" for="school_type_1">Boarding</label>
<input class="form-check-input" type="checkbox" value="Day" id="school_type_2" name="school_type" dmx-bind:checked="(sc_data_detail_school.data.school_type == 'Day')" disabled="true">
<label class="form-check-label pr-5" for="school_type_2">Day</label>
<input class="form-check-input" type="checkbox" value="Night" id="school_type_3" name="school_type" dmx-bind:checked="(sc_data_detail_school.data.school_type == 'Night')" disabled="true">
<label class="form-check-label" for="school_type_3">Night</label>
</div>
</div>

<!-- hidden -->
<input type="hidden" name="school_type" dmx-bind:value="sc_data_detail_school.data.school_type">
<!-- hidden -->