How to disable the particular Select dropdown option after DB insert

[miu]

Hello,

I am working with Select form element having multiple dropdown choices as shown in the below screenshot. My requirement is, when I select a particular dropdown option & Save its details, I do not want the option to be available for further selection or disabling the Save button if the same option is selected, whichever is easy & convenient.
The other remaining dropdown choices which are not yet saved should be available for selection.
I am using Server Connect to post the selected details in the DB using insert API.

<form id="frm_instAcadYear" is="dmx-serverconnect-form" method="post" action="/api/instProfile/acadYear/ins_acadYear" dmx-on:success="notifies1.success('Academic Year Selected');browser1.goto('/institute/institute-details',true,'Institute Details')"><select id="select_acadYear" class="form-select" name="acadYearID" required="" dmx-bind:options="sc_qry_masterAcadYear.data.query_masterAcadYear" optiontext="acadYearName" optionvalue="acadYearID">

                    <option value="">Select</option>

                </select>

                <input id="hid_instituteID" name="instituteID" type="text" class="form-control" placeholder="Institute ID" dmx-bind:value="sc_qry_userRole.data.query_userRoles.instituteID" readonly="true">

                <button id="btn_continue" class="btn btn-success mt-2" type="submit">Save</button>

            </form>

Many Thanks.

[famousmag]

Hey @miu,

Happy New Year!!

I see in your form’s success event you have a browser.goto… This obviously is an internal link.
So, in your success event, after that browser.goto step, set the save button disable to true
for example saveButton.disable(true)

[miu]

Hey @famousmag,

Happy New Year!!

I tried implementing the solution you suggested. However, it does not disable the Save button and I can still save the dropdown items multiple times after revisiting the page.
Is there something that I am missing?

<form id="frm_instAcadYear" is="dmx-serverconnect-form" method="post" action="/api/instProfile/acadYear/ins_acadYear" dmx-on:success="notifies1.success('Academic Year Selected');browser1.goto('/institute/institute-details',true,'Institute Details');btn_continue.disable(true)">

[famousmag]

It should…

Anyway, you can add a variable in your layout page ( eg. butDisabled=false)

Then add a disabled class in your saveButton with condition the butDisabled==true:
dmx-class:disabled="butDisabled.value==true"

Then on your form’s Success Event after the browser.goto(), set the value of the butDisabled variable to true.

I think this should work for sure.
Please try and tell me

[miu]

Hey @famousmag,

Thanks for the solution, it works. Howeever, it does not completely solve the issue i am trying to work.
The button is been diabled now, however, it remains disabled for the entire select element. I am not able to add another item from the dropdown which is not previously inserted/saved.
Is it possible to disable the button only for the already saved dropdown item & is enabled if I select another item from the dropdown which is not yet saved?
Alternatively, it is also fine if the already saved item can be removed from the dropdown list without having to disable the button.

[famousmag]

I don’t have the full concept and code of your project so I can;t really know what is going on…

Can you share a small video of the actual problem on your browser and it would be helpfull to have the related code.
except the form with just a select and a save button…what happens?
You can try a few workarounds but it depends which one will work according to your setup…
First of all we agreed that this is a nodejs project, right?
And the frm_instAcadYear form is in a content page?
Each form contains anly one select?
How many forms you have?
Give me something more to be sure what we’re dealing with…

All we are trying to do is to “inform” your page that a select is saved so the relevent save button turns to disabled…

[miu]

Hey @famousmag

Yes, it is a nodejs project.
The content page has only one form with a select element which inserts the details of the selected year & redirects to the internal page.

As it is not possible to make video, I will explain the project using screenshots:

This is the page that I am working. It has select element, Save button, & repeat table (Active Profiles) to list the saved years.

1. The select element has 2 options
   
2. In the first image Active Years table, you can see AY 2023-24 saved. Now when I again click the select element & choosing AY 2023-24 from dropdown should disable the Save button.
   
3. If I select AY 2022-23 then the Save button should be enabled.
   

Sharing the entire code for the content page:

<meta name="ac:route" content="/institute/acad-year">

<dmx-serverconnect id="sc_qry_masterAcadYear" url="/api/instProfile/acadYear/qry_masterAcadYear" dmx-param:acad_year_id="sc_qry_selectedAcadYear.data.query_selAcadYear[$index].acadYearID"></dmx-serverconnect>

<dmx-serverconnect id="sc_qry_selectedAcadYear" url="/api/instProfile/acadYear/qry_selectedAcadYear" dmx-param:inst_id="sc_whoAmI.data.query_institute.instituteID"></dmx-serverconnect>

<div class="container mt-5">

    <div class="row">

        <div class="col">

            <h1>Year</h1>

        </div>

    </div>

</div>

<div class="container mt-4">

    <div class="row">

        <div class="col">

            <form id="frm_instAcadYear" is="dmx-serverconnect-form" method="post" action="/api/instProfile/acadYear/ins_acadYear" dmx-on:success="notifies1.success('Academic Year Selected');browser1.goto('/institute/institute-details',true,'Institute Details')"><select id="select_acadYear" class="form-select" name="acadYearID" required="" dmx-bind:options="sc_qry_masterAcadYear.data.query_masterAcadYear" optiontext="acadYearName" optionvalue="acadYearID">

                    <option value="">Select</option>

                </select>

                <input id="hid_instituteID" name="instituteID" type="text" class="form-control" placeholder="Institute ID" dmx-bind:value="sc_qry_userRole.data.query_userRoles.instituteID" readonly="true">

                <button id="btn_continue" class="btn btn-success mt-2" type="submit" dmx-bind:disabled="select_acadYear.value==1">Save</button>

            </form>

        </div>

    </div>

</div>

<div class="container mt-4">

    <div class="row">

        <div class="col">

            <h5>Active Profiles</h5>

        </div>

    </div>

    <div class="row">

        <div class="col">

            <div class="table-responsive">

                <table class="table">

                    <thead>

                        <tr>

                            <th scope="col">#</th>

                            <th scope="col">Year</th>

                            <th scope="col">ID</th>

                        </tr>

                    </thead>

                    <tbody is="dmx-repeat" id="repeat1" dmx-bind:repeat="sc_qry_selectedAcadYear.data.query_selAcadYear">

                        <tr>

                            <th scope="row">{{$index+1}}</th>

                            <td>{{acadYearName}}</td>

                            <td>{{acadYearID}}</td>

                        </tr>

                        <tr>

                        </tr>

                        <tr>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

[famousmag]

So, a fast answer is to check that on serverside…

When your select is updated, then check if the selected value exists and then disable the save button…(add a new serveraction that checks if the selected valuye of the select exists or no and fire it on your select change or updated event)

In a few words this is the workaround. If you need more help let me know

[famousmag]

Another (better workaround) is to update the options in your select by checking if each option is already added in your table (“saved”) and if yes don’t include it in your select options.
This way the select dropdown will always contain acceptable options only for the user to select
If you need help on this one tell me

[miu]

Hey @famousmag

It will be very kind of you, if you could help me to implement the second solution of updating the select dropdown options?

[famousmag]

OK.

Inside the serveraction that returns those options:

You have to filter your database query to include only values NOT IN these values:

A fast way is to create a query param type of array and every time you click the save , on success the option that was selected get added to that array.
Then inside your serveraction tht returns your table data (sc_qry_selectedAcadYear.data.query_selAcadYear) you add a GET parameter type of array (for example “usedVals”) and in your database query filter, you check that the values NOT IN the “usedVals”.

So every time the select is being loaded it will include only the options that has not been added to your table repeat

[famousmag]

here is a similar example of my serveraction query filter:

[miu]

@famousmag
Sorry to bother you again.

I tried working on the solution you proposed, however, i don’t quite get it and still stuck.

Can you please share more details on how exactly to create the array & filter the DB query to retunr NOT IN values from the repeat table?

[famousmag]

OK, but let me tell you something…

You already have on serverside the saved options, right?

sc_qry_selectedAcadYear.data.query_selAcadYear…

So, you don’t have to keep them in an array and send them over to serverside.

• first in your serveraction create that query to get the used academic years (like in sc_qry_selectedAcadYear.data.query_selAcadYear)
• after that, add a setValue (in order to pull the usedAcademicYears in an Array) like that:
  
  
  
  this returns the ids of the already used academic years in an Array
• then in your existing query that returns the select options
  sc_qry_masterAcadYear.data.query_masterAcadYear, you can filter it with the output of the previous step’s Array (usedAcadYearsID_Array):
  acadYearID NOT IN usedAcadYearsID_Array
  (I don’t know if I write your fields and names correct , please check it)

[miu]

Hey @famousmag ,

Finally, It worked!!

Thank you so much for your patient assistance and suggestions

[famousmag]

Glad you got it working my friend!

Cheers!