I'm trying to create a form with a dynamic table using "dmx-repeat," but I'm having trouble. The idea is to create an object like this:
"linhas_kits": [{"num kits": 1,"matriz": "VB","composto": "A","morada_envio": "Rua Exemplo, 123"},{...}]
But what's passed in the payload is something like this:
"linhas kits": [{"$id":21,"num_kits":"1","matriz":"VB","composto":"A","morada_envio":""}, {...}]
where data is the data with which the line was created. It doesn't update the information with the changes I make to the fields!
Another problem is that I created the datastore with the storage="none" option to avoid saving the information to local storage. I want the rows to disappear when I refresh the browser, but that's not what's happening (the rows persist after a refresh).
My form code is as follows:
<form action="../../dmxConnect/api/eventos/detect_alabe/submit.php" method="post" id="form_detect_alabe" is="dmx-serverconnect-form" dmx-generator="bootstrap5" dmx-form-type="vertical" dmx-on:error="notifies.warning(lastError.response)" dmx-on:success="run([{'bootbox.alert':{message:'Informação submetida com sucesso. Entraremos em contacto caso seja necessário mais informação.',title:'Mensagem',centerVertical:true,buttons:{ok:{label:'Fechar',className:'btn-success'}}}},{run:{outputType:'text',action:`form_inscricao.reset()`}}])">
<!-- Hidden input para enviar todas as linhas conforme o data store, fiel ao preenchimento do utilizador sem JS manual, apenas App Connect formatters -->
<input type="hidden" name="linhas_kits" dmx-bind:value="linhas_kits.data.toJSON()">
<div class="form-group mb-3 row">
<label class="col-sm-2 col-form-label col-form-label-sm">Compostos pretendidos:</label>
<div class="col-sm-10">
<small id="compostos_pretendidos_help" class="form-text text-muted"><u>Compostos sensoriais</u>: Acetaldeído / oxidado (A), Ácido acético / acescente (B), Sulfato de quinino / amargo (C), Sulfurete de hidrogénio / reduzido (D), 2,4,6-tricloroanisol (TCA) / mofo (E), 4-etilfenol / animal (F)<br><u>Matrizes sensoriais</u>: Vinho branco (VB) e Vinho tinto (VT)</small>
</div>
</div>
<div class="form-group mb-3 row">
<label class="col-sm-2 col-form-label col-form-label-sm"></label>
<!--Datastore-->
<dmx-datastore id="linhas_kits" storage="none"></dmx-datastore>
<!-- Cabeçalho dos campos das linhas -->
<div class="row mb-1">
<div class="col-sm-1 fw-semibold">Nº Kits</div>
<div class="col-sm-2 fw-semibold">Matriz</div>
<div class="col-sm-2 fw-semibold">Composto</div>
<div class="col-sm-6 fw-semibold">Morada de envio</div>
</div>
<!-- Tabela dinâmica de linhas -->
<div is="dmx-repeat" id="linhas_kits_repeat" dmx-bind:repeat="linhas_kits.data" class="row align-items-center mb-2">
<div class="col-sm-1">
<input type="number" class="form-control form-control-sm" name="num_kits" min="1" max="9" required dmx-bind:value="num_kits" dmx-class:is-invalid="num_kits === undefined || num_kits.toString() === '' || num_kits.toNumber() < 1 || num_kits.toNumber() > 9" dmx-on:input="linhas_kits.update({$id: $id, num_kits: $event.target.value})">
</div>
<div class="col-sm-2">
<select class="form-select form-select-sm" name="matriz" required dmx-bind:value="matriz" dmx-on:change="linhas_kits.update({$id: $id, matriz: $event.target.value})">
<option value="VB">VB</option>
<option value="VT">VT</option>
</select>
</div>
<div class="col-sm-2">
<select class="form-select form-select-sm" name="composto" required dmx-bind:value="composto" dmx-on:change="linhas_kits.update({$id: $id, composto: $event.target.value})">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-control-sm" name="morada_envio" required dmx-bind:value="(morada_envio.toString ? morada_envio.toString() : '')" dmx-on:input="linhas_kits.update({$id: $id, morada_envio: $event.target.value})" placeholder="Morada de envio" dmx-class:is-invalid="!morada_envio || (morada_envio.toString().replace(/^\s+|\s+$/g, '') === '')">
</div>
<div class="col-sm-1 d-flex gap-2">
<button type="button" class="btn btn-outline-danger btn-sm" dmx-on:click="linhas_kits.delete({$id: $id})">Remover</button>
</div>
</div>
<!-- Botão adicionar linha -->
<div class="row mb-2">
<div class="col-sm-12">
<button class="btn btn-primary btn-sm" dmx-on:click="linhas_kits.insert({
num kits: 1,
matriz: 'VB',
composto: 'A',
morada_envio: ''})">Adicionar Linha
</button>
</div>
</div>
<!--/Linhas de kits dinâmicas-->
</div>
<!--Comentários-->
</div>
</div>
<div class="row gx-3" id="row_submeter">
<div class="col">
<div class="form-group">
<button type="submit" class="btn btn-primary bg-success">Submeter</button>
</div>
</div>
</div>
</form>
Can you give me a little help? The AI isn't able to help...