Modal form reset on click

Wappler General Need Help
1

Hi
i have a model that is sort of an upsert modal, it has a form that can be an update or an insert, if it receives an id it does a lookup and populates the form in the modal, if there is no id the form is blank.

when i load the page, if i click the button to insert new i get a modal shown with empty form, all good.

if i load the page and click my edit button on one of the results in my query i get my modal opened and the form is populated, all good.

if, after click to edit and i close the modal window, i then click the NEW button the modal opens but is not cleared, yet, i have form reset on the new button click

dmx-on:click="modal1.show();modal1.SiteUpsert.reset()"

thats the code from the button to add a new entry,. which opens the modal, but the form is not reset.

not sure what i am doing wrong, its like its cached the edit response.

thanks

2

You could try resetting the form on success of the update Action?

3

Usually we handle this situation on modal hide:
Modal-> Dynamic Events -> Modal -> hide

image
image468×628 27.2 KB

Once you add it to your modal, then you can do all these "reset" actions:

image
image1232×780 44.6 KB

I suppose you use a DataDetail component to populate your form data?

4

When using the form reset in HTML, it resets the form values to their initial values, not to empty. These initial values are those specified in the HTML markup as the value attributes of the form elements when the page was loaded.

5

ok good to know, so is there an easy way to reset the form, when the page loads the model form has empty values, i click an edit, that edit function does not reload the page, it opens hte model and runs an server connect to populate the form, then when the form is submitted it hides the model, reloads my server connect to get the list on the page, the page is not reloaded, then click new button and the form is pre populated with the edit values, but, i have not reloaded hte page so the initial form values from the intiial page load wouild be blank

thanks

6

think i figured a way, on the new button i used the server connect reset that populates the form if it was an edit event on, so the new button now has a server reset and that seems to have cleared the forrm for new entries in the model window, is that a good way to do it?

 <button id="btn1" class="btn btn-primary btn-lg text-white" dmx-on:click="modal1.show();SC_SitesDropDown_sel.load({});modal1.BlockUpsert.reset();SC_Block_sel.reset()">
                                    <i class="fa-solid fa-plus"></i></button>
7

Hi James,

My approach is to use a data detail and its bindings to populate the values in a form for updating.

The steps include setting value for the data detail and then show the modal (via inline flows so that the steps run synchronously). The form fields have a binding to the data detail values, so the fields are populated if it is an existing record, otherwise, the field values remain empty.

Then on the success event of the form, I reset and clear the form data, set data detail value to null and hide the modal.

1 Like
8

Yes, you can reset the server action on form success submit.