Select dropdown puts NULL into a blank entry

Wappler General Need Help
1

Bootstrap 5 I’ve looked at all kinds of Bootstrap 5 tutorials & Docs –

Here’s the problem –

I have a Select Menu that gets its values for a small table
The dropdown holds the values which on a Select in the Dropdown assign that value to the input below.

However, I need for the 3rd choice to be a free-form – type any value you want into the input.

Since this is a dynamic form I created one more blank value record in my table that creates the dropdown values.

But when the 3rd option is chosen – the blank dropdown it inputs NULL as a value, referring to the database schema

I have tried all kinds of ways to simply make that blank (including putting in an “empty” Placeholder.

The NULL is a literal value that stays there as the user begins to type in this field. It is necessary at the moment to DELETE the NULL before entering a real value.

Any ideas?

Screenshot 2022-04-13 at 19.37.36
Screenshot 2022-04-13 at 19.37.361012×404 60.8 KB

Screenshot 2022-04-13 at 19.52.47
Screenshot 2022-04-13 at 19.52.471036×494 19.1 KB

Screenshot 2022-04-13 at 19.54.42
Screenshot 2022-04-13 at 19.54.421046×456 19.2 KB

2

Well your input shows null as that is your database value. You don’t need an empty/null database value for this. You can simply add an empty static option in your select <option value=""></option>

Example from this:

<select id="select1" class="form-control" dmx-bind:options="serverconnect1.data.query" optiontext="airport" optionvalue="id">
</select>

it turns into:

<select id="select1" class="form-control" dmx-bind:options="serverconnect1.data.query" optiontext="airport" optionvalue="id">
    <option value=""></option>
</select>

If you don’t want it to be displayed as an empty option, you can also add some text to it like: Enter a custom value...:

<select id="select1" class="form-control" dmx-bind:options="serverconnect1.data.query" optiontext="airport" optionvalue="id">
    <option value="">Enter a custom value ...</option>
</select>
3

@Teodor Thank you for that.
I tried this and other variations yesterday.
But, I had to simply convert the input to a simple text input.
As long as the Select Menu DMX component had a blank 3rd option record to pull from the Options table it would override these suggestions, as you showed, and still produce null as a literal value as i showed before.

If this was a php script I could do this – but the Wappler Javascript component to produce a Select Menu from dynamic values pushes that schema value from the data table blank record as null into the form input.

When I simply removed that blank table record of a 3rd option then the form input would not include the extra option value as you showed.

So now it works by removing the Select Menu component and just using a standard text input.