Can I easily delete 'blank' rows in an array?

Wappler General How To
#1

I have part of a form which works well. The results of which are entered into a single Database Field as json. There are 5 rows shown here but the user can add as many rows as they need and then submit the form.

If there are any ‘blank’ rows, or at least the ‘part’ has a blank value, then I don’t want those ‘blank’ rows to process or put another way, I want to remove them before they are uploaded to the Database. How can I do that?

All these fields use the name 'name="method_item[]"' which puts everything into an array.

image
image744×292 12 KB

Here is the view in DevTools.

image

And here is the json as it is uploaded into the Database field.

[
{"part":"Front Bumper Cover","replace":"1","repair":"0","paint":"0"},
{"part":"O\/S\/F Wing","replace":"0","repair":"1","paint":"1"},
{"part":"O\/S\/F Washer Bottle","replace":"1","repair":"0","paint":"1"},
{"part":"","replace":"0","repair":"0","paint":"0"},
{"part":"","replace":"0","repair":"0","paint":"0"}
]
How to store INPUT and multiple CHECKBOX as JSON in single DB field
#2

Hi,
In HTML, forms elements which are disabled, don’t get sent on form submission. So if you can identify some way to mark rows 4 & 5 as disabled, they will not be part of the JSON.
The trick here is to also allow user to fill in the information when they want.

#3

Hi @sid, thanks for your comments and interesting approach. Sorry for the slow reply but I had already come up with a similar approach but instead I used conditional regions and hidden input fields.

image
image699×225 9.01 KB

And so for the text input field I put a hidden field in a conditional region which only becomes ‘live’ when text is entered into the input field…

<div class="col-sm-8">
  <input type="text" class="form-control form-control-lg" 
    id="car_part" 
    aria-describedby="input1_help" placeholder="Enter part or item here" 
    dmx-bind:value="sc_ad_job_q.data.TEST12[$index].part">
  <div is="dmx-if" id="conditional9" dmx-bind:condition="car_part.value">
    <input id="car_part_use" name="method_item[]" class="form-control" 
      dmx-bind:id="method_item_[{{$index}}][part]" 
      dmx-bind:name="line_items[{{$index}}][part]" 
      dmx-bind:value="car_part.value" type="hidden">
  </div>
</div>

and then I grouped all of the checkboxes in a conditional region which also, only becomes ‘live’ when text is entered into the input field…

<div class="col-sm-3" is="dmx-if" id="conditional10" dmx-bind:condition="car_part.value">
   ...
</div>
1 Like