Accessing checked state of checkboxes before form submit?

Wappler General Need Help
1

I have a CSS menu option that will submit a form to delete all selected pictures (checkboxes checked). Works great, unless no pictures are selected. I can't use validation here because the checkboxes being selected before form submit are not always required.

I tried the following code in my menu's div tag:

dmx-on:click="(formPicturesAction.repeat1.data.where('checkboxItem.checked', true).count() == 0) ? notifiesMain.warning('Please select at least one picture') : notifiesMain.warning('did not catch anything selected'); formPicturesAction.hiddenAction.setValue('delete'); formPicturesAction.submit()"

It resolves to the "did not catch anything selected" and submits the form. I thought I could traverse the DOM using form.repeat1.data.where() but no luck so far. The repeat1 builds the checkboxes like this:

<input type="checkbox" name="checkbox-Item[]" id="checkboxItem" dmx-bind:id="'checkboxItem'+$index" dmx-bind:checked="toggleChecked.checked" dmx-bind:value="id" dmx-on:checked="toggleItemChecked.check()" dmx-on:unchecked="toggleItemChecked.uncheck()">

Am I referring to the checkboxes incorrectly? Am I able to traverse the DOM and check if any checkboxes are checked using this approach?

Ultimately, I need the onclick to make sure at least one checkbox is checked before submitting the form.

2

On click validation look solid.
How I would solve this is I would create a paragraph with (formPicturesAction.repeat1.data.where('checkboxItem.checked', true).count() == 0) in it. And you'll what output you'll receive when no picture selected.

Maybe formPicturesAction.repeat1.data.hasItems() will help you.

3

Thanks @Notum. I may get a chance to try your .hasItems() suggestion. For the time being, I replaced the dmx-on:click with a javascript onclick to a custom function that calls dmx.parse('content.formPicturesAction.submit()'); to submit the serverconnect form.

Heads up to future Wapplers. You can submit your page's forms using javascript's submit() routine, but it won't execute Wappler's serverconnect functionality. You'll know something is wrong when the server doesn't send you back to your page. "dmx.parse()" is how you properly call the serverconnect form. I learned this the hard way :slight_smile:

4

Can you elaborate this?
I also created bunch of JavaScript that sends Server Connect forms and all of them works like a charm.
The only way I can imagine when this might not work is that you have form in repeat - several forms with same ID/Name. In that case you need to add Dynamic Atribute ID/Name and send form ID/Name to your JavaScript function to submit only specific form,

5

I can see your point. If there are several forms within a repeat, they all must require unique ID's. That is easily accomplished using the $index of the repeat counter, just concatenate the $index to the ID in a dmx-bind.

My issue was a form outside of a repeat. Calling myform.submit() from within a javascript routine would submit the form, but it didn't run in the server connect context...my wappler API would execute but it wouldn't return to the page after completion. I would just see a blank page. This prevented any dmx-on:success from the calling form page from executing.

Looking through the forums, I came across the "dmx.parse()" function that could be called from within a javascript function and execute the server connect in a way that allowed the API to execute and then return back to the calling page's form.