Udpdate dmx-repeat table record

[pedroponte]

Hi everyone,

I am strugling with the best way to update a record in a responsive dmx-repeat table.

I have put an update form outside the table.

The goal is to update a boolean in the db every time the checkbox is toggled.

How can I send the checkbox value to the form via dmx?

Sharing my code below.

Happy to explore better options to accomplish this.

TIA!

<form is="dmx-serverconnect-form" id="updateXYZ" method="post" action="/.../update">

<!-- Hidden inputs for dynamic values -->
<input id="UUID" type="hidden" name="uuid" dmx-bind:value="">
<input id="Paper" type="hidden" name="paper" dmx-bind:value="">
</form>

<tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="xxx.data.query" id="tableList">
<tr>
...
<td class="text-center">

<input type="checkbox" dmx-bind:id="'paper_' + $index" dmx-bind:checked="paper_invoice" 
dmx-on:click="updateXYZ.UUID.setValue(uuid);
updateXYZ.Paper.setValue(dmx('#paper_' + $index).checked);  
updateXYZ.submit()">
</td>
</tr>

pic for attention

[franse]

I think the best way is using the app connect component form repeat..

Then on the server side, the repeat should check the id of the item and update/insert that record

[Teodor]

You can simply wrap the checkbox inside the <td> in a form and submit it on checkbox change.

[pedroponte]

TY.

I have tried the form inside the td tag but it doesn’t seem to work that way with form id being dynamic

<td class="text-center">

<form is="dmx-serverconnect-form" id="update_{{$index}}" method="post" action="/.../update">

<input type="checkbox" dmx-bind:checked="paper" dmx-on:click="update_{{$index}}.submit()" name="paper">

<input type="hidden" name="uuid" dmx-bind:value="uuid">
</form>


</td>

TIA

[Teodor]

Leave the form id static, you don't need to have it dynamic.

<td class="text-center">
    <form is="dmx-serverconnect-form" id="form_update" method="post" action="/.../update">
        <input type="checkbox" dmx-bind:checked="paper" dmx-on:changed="form_update.submit()" name="paper">
        <input type="hidden" name="uuid" dmx-bind:value="uuid">
    </form>
</td>

[pedroponte]

@Teodor

form_update

Thank you Teodor. I had tried that also, but that will push the form repeatedly, resulting in an array being pushed in the uuid field.

A second issue is that the checkbox is not submitted this way. I think it is to do with the dmx bind, if I set it to value=”1” then it is submited

TY

[pedroponte]

update..

This code works partially by submitting once the uuid.

Can’t get the paper checkbox field to be submitted though, seems like a problem with it being boolean?

<form is="dmx-serverconnect-form" id="form_update" method="post" action="/.../update">
<input type="hidden" id="updateUUIDField" name="uuid">
<input type="hidden" id="updatePaperField" name="paper">
</form>

<div class="table-responsive">
<table class="table table-hover">
...
<td class="text-center">
<input type="checkbox" 
dmx-bind:checked="paper_invoice" 
dmx-on:click="form_update.updateUUIDField.setValue(uuid);

form_update.updatePaperField.setValue($event.target.checked ? 1 : 0);
form_update.submit()">
</td>

Can anyone tell me if $event.target.checked works in dmx?

TIA

[Teodor]

Why are you using onclick to change a value?
I don’t get the logic here?
Also the checkbox sends no value when it is not checked. This should be handled on the server side in your insert step.
Also make sure to add a key for the repeat region.

[pedroponte]

I have a record already created and want to update its status in the db.

I can change to onchanged, wanted to make sure I was catching any event.

The idea is that if the checkbox becomes checked, it sends 1 to the server, otherwise 0.

<input id="paper_{{$index}}" type="checkbox"
dmx-bind:checked="paper_invoice" dmx-on:changed="                                            
form_update.updateUUIDField.setValue(uuid);
form_update.updatePaperField.setValue(<MISSING PART>);
form_update.submit(); ">

[Teodor]

This is how to handle the checkbox values:

Sending a Value for Unchecked Checkbox on Database Insert / Update

Intro In many cases you need to use checkboxes in the forms used to insert or update data in the database. Due to the nature of the checkboxes and how they work, when a checkbox is not checked it won’t send a value when your form is submitted. This can be a problem if you want to send a false or 0 (or any other) values to your database when your checkboxes are not checked. With Wappler you can do this easily on the server-side directly in the insert or update steps. Checkbox setup We have a…

[pedroponte]

Thank you for your support!

got rid of that code and got another one..

Now it is working nicelly!

before the table repeat

<form is="dmx-serverconnect-form" id="form_update" method="post" action="/.../update" dmx-on:done="list.load({});">
<input type="hidden" id="updateUUIDField" name="uuid"> <input type="hidden" id="updatePaperField" name="paper"> </form>

…

in the table repeat section

<td class="text-center">
<!-- activate (visible when paper_invoice == 0) --> <a href="#" dmx-show="paper_invoice == 0" dmx-on:click=" form_update.updateUUIDField.setValue(uuid); form_update.updatePaperField.setValue('1'); form_update.submit();"><i class="fa fa-square-o"></i> </a>

<!-- deactivate (visible when paper_invoice == 1) -->
<a href="#" dmx-show="paper_invoice == 1" dmx-on:click=" form_update.updateUUIDField.setValue(uuid); form_update.updatePaperField.setValue('0'); form_update.submit()                                         "><i class="fa fa-check-square"></i>
</a>
</td>