Reset form on Modal

Wappler General How To
#1

I have a repeat of machinery items with each one having an enquiry button. The button opens a modal which has a form within it to collect the details of the person enquiring about the machine.
The form is a Server Connect Form and the action uses Setup Mailer, Send Mail and a DB insert. All works as expected.

I have the Send Request button on the Modal with a Dynamic Event>Click>form.submit and the Form has a Dynamic Event>Success>modal.hide and form.reset

My issues is, if the web visitor requests a second machine from the list of machines the email and data received is the same as the first machine chosen, even though the modal is clear and reset. Its as though the server action needs resetting too.

I have tried the Clear Data checkbox on the form action form.reset but it makes no difference and I’m wondering if I maybe have the reset in the wrong place.

Any suggestion or help would be appreciated

CK

#2

Is the data the same in the modal inputs when it opens, or how do you send these?

#3

I show the Ref No., Make and Model in the Modal body above the request form and it matches which ever machine the client requests, it just when the form sends the data received is always that of the first machine requested.

Should I try doing a reset of the Server Connect for the page?

#4

Not sure what you mean? Not clear to me what data do you send, how do you get it and what exactly is happening on that page and in the server action.

Some screenshots will help probably.

#5

If I understand correctly… most of the time i get lost in translation…

But once you submit your form n the modal… you want to reset the data … so when you select a new item in you list… it must bring up that items detail in the modal…

Cant always explain well… but here is a screen shot and code… maybe this will help you…

mmmmm
mmmmm1462×588 50.6 KB

and the code

<!-- Server Connect Files -->

<dmx-serverconnect id="itemslist" url="dmxConnect/api/items.php"></dmx-serverconnect>

<dmx-data-view id="itemsdataview" dmx-bind:data="itemslist.data.repeatitems" pageSize="100"></dmx-data-view>

<dmx-data-detail id="data_detail" dmx-bind:data="itemsdataview.data" key="id"></dmx-data-detail>

<!-- Trigger Modal -->

<a data-toggle="modal" data-target="#modalITEM" dmx-on:click="data_detail.select(id)"> Open Model </a>

<!-- Modal -->

<div class="modal fade" id="modalITEM" is="dmx-bs4-modal" role="dialog" tabindex="-1">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h3 class="modal-title">ITEM {{data_detail.data.id}}</h3>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span></button>

            </div>

            <div class="modal-body">          

            <!-- FORM WILL BE HERE -->

            <form action="dmxConnect/api/insertdate.php" method="post" name="formsubmit" id="formsubmit" is="dmx-serverconnect-form" dmx-on:success="modalITEM.hide();formsubmit.reset();itemslist.load({});notifies1.success('Done');">

            <!-- On success event you can reload the data on the page - so that when you select an item again the data detail is reloaded -- itemslist.load({}) -->

            <input type="text" name="item" id="item" value="{{data_detail.data.item}}">

            </form>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>

            </div>

        </div>

    </div>

</div>
#6

Thank @Mozzi for your reply.

No, when the modal loads it’s showing the correcting information at the top relevant to the machine picked;

1
1719×781 54.9 KB
2
2719×781 50.8 KB

If I complete the form on first machine picked and ‘Send Request’ everything works as expected (email sent and an entry place into the db).

If I then select a second machine without refreshing the page the modal shows the correct machine details but the email and db entry still show the details for the first machine.

#7

Where does this data come from, that is what i am trying to understand … what and how are you sending to the email and insert steps?

#8

I worked it out @Teodor with your asking me “Where does this data come from”.

The information for the top of the Modal comes from a Data View but I had mistakenly pulled the data from some hidden text inputs which were getting the data from my serverconnect.
Once I changed them to get their data from the Data View everything worked as wanted.

Once again, thank you for your help.

Wappler is a great product, keep up the good work

CK

2 Likes