Help with submission of form on checkbox or textbox value change

Wappler General
1

I have seen a few examples where persons use a dynamic event and on change update the form with a debounce set.

I am trying to utilize this within a content page with no luck. If I add a button to the form it works fine but the on change never triggers the submit. I’m trying to use the content page for this section to prevent reloading the entire page that the user would be viewing, this is a php based setup.

The code I’m trying is below:

<div class="form-check form-switch mb-0 d-flex align-items-center ">
<input class="form-check-input" type="checkbox" value="1" id="user_type_status" name="user_type_status" dmx-bind:checked="scPersonalChecklist.data.query.user_type_req == 0 || scUserDetail.data.query.user_type"  dmx-on:changed="updatechecklist.submit()">
</div>

<textarea id="user_type_note" class="form-control" name="user_type_note" dmx-bind:value="scPersonalChecklist.data.query.user_type_note" dmx-on:changed.debounce:500="updatechecklist.submit()"></textarea>

Any idea why this may not be working?

2

Hi,

Did not understand your setup to be honest.
Form submissions done using Wappler server connect form is always via ajax, so no page reload.

Content pages have no relation to form submission. They help in SPA setup where main page does not reload when navigating between content pages.

3

Understood, I have moved away from the content page.
How do I force a refresh of the form elements affected by an update without reloading the entire page?
And how do I submit the form each time a checkbox value is changed?

4

What is the data source of your form?

5

Its a mysql db I am updating through a serverconnect-form

6

No, if you want the form data to get updated, you would have existing binding on the form from a server connect or some other source. What is that binding?

7

All the bindings are in place and would be seen if I refresh the entire page. I have some check-boxes that are based on the value of other fields that aren’t being updated without the refresh. The db values update but I am looking for a way to update the specific section of the page with the form, only.

8

Can you please share screenshot/code of what the bindings are on the form?

If its SC, on sucess of form, you can just reload the SC.

9

fao-checklist-wappler01
fao-checklist-wappler013584×2032 644 KB

I have a number of forms on this page, they all work.
I have this checklist that I would like to update each time the user changes the state of a required or override checkbox, without needing to hit the submit button. The status checkbox is based on the value of the other 3 check-boxes but doesn’t update unless a refresh is done…

Requested binding on the form is below:

<form is="dmx-serverconnect-form" id="updatechecklist" method="post" action="dmxConnect/api/admin/users/edit_checklist.php" dmx-param:userid="query.userid" dmx-on:success="scPersonalChecklist.load({userid: query.userid},true)">
10

This still doesn’t answer what I am asking.
Please share code of checkboxes where the data binding is.
Code you have shared is of SC Form.

11

Sorry…

<tr>
    <td class="ps-1 text-xs w-30 align-middle ">
        <span class="text-dark d-block text-sm" wappler-command="addElementInside">
            User Type
        </span>
        <span class="text-xs font-weight-normal">
            Applicant, Co-Applicant, Guarantor
        </span>
    </td>
    <td class="ps-1 align-middle w-10">
        <div class="form-check form-switch mb-0 d-flex align-items-center">
            <input class="form-check-input" type="checkbox" value="1" id="user_type_req" name="user_type_req" dmx-bind:checked="scPersonalChecklist.data.query.user_type_req == 1">
        </div>
    </td>
    <td class="ps-1 align-middle w-10">
        <div class="form-check form-switch mb-0 d-flex align-items-center">
            <input class="form-check-input" type="checkbox" value="1" id="user_type" name="user_type" dmx-bind:checked="scUserDetail.data.query.user_type">
        </div>
    </td>
    <td class="ps-1 align-middle w-10">
        <div class="form-check form-switch mb-0 d-flex align-items-center ">
            <input class="form-check-input" type="checkbox" value="1" id="user_type_override" name="user_type_override" dmx-bind:checked="scPersonalChecklist.data.query.user_type_override" dmx-on:updated.debounce:400="scPersonalChecklist.load({userid: query.userid},true)">
        </div>
    </td>
    <td class="ps-1 align-middle w-10">
        <div class="form-check form-switch mb-0 d-flex align-items-center ">
            <input class="form-check-input" type="checkbox" value="1" id="user_type_status" name="user_type_status" dmx-bind:checked="((scPersonalChecklist.data.query.user_type_req != 1 || scUserDetail.data.query.lname) && scPersonalChecklist.data.query.user_type_override != 1)" >
        </div>
    </td>
    <td class="ps-1 w-30 align-middle">
        <div class="d-flex align-middle">
            <span>
                <textarea id="user_type_note" class="form-control" name="user_type_note" dmx-bind:value="scPersonalChecklist.data.query.user_type_note" dmx-on:changed.debounce:500="updatechecklist.submit()"></textarea>
            </span>
        </div>
    </td>
</tr>

Each row is like this.

12

Ok. This makes a bit more sense.
I see that your checkboxes have binding from different server connects (SC), but none of them submit any form on change.
There is no need to use forms from what I see. This is a setup that could work for you:

  1. Create a "Update SC" for each SC that you are using in binding checkboxes. Set it to no-load.
  2. On change of checkbox, call the respective "Update SC".
  3. On success dynamic event of the "Update SC", reload the binding SC.

Hope this makes sense.

13

Hello sid thanks for your help thus far, has been enlightening and really helps with the general approach I have been taking.

I still have the issue where the change of the checkbox never triggers an event, looking at the network via browser shows nothing loaded as well. I have tried both value changed and value updated.

<input class="form-check-input" type="checkbox" value="1" id="primary_applicant_req" name="primary_applicant_req" dmx-bind:checked="scApplicationChecklist.data.query.primary_applicant_req == 1" dmx-on:changed.debounce:300="scChecklistUpdateReq.load({appid: query.appid},true)" dmx-on:updated="scChecklistUpdateReq.load({appid: query.appid})">

Server connect:

<dmx-serverconnect id="scChecklistUpdateReq" url="dmxConnect/api/admin/applications/edit_checklist_req.php" noload dmx-param:appid="query.appid" dmx-on:success="scApplicationChecklist.load({appid: query.appid})"></dmx-serverconnect>
14

Found the issue its a js library called footable…it is preventing the events from triggering although some of the attributes seem to be working.
Didn’t think it was the issue since I’ve been able to use attributes and values are assigned without issue.