Hello I have a little problem I wanted to create a button behind the lightning record edit form that would submit all lightning record edit forms, I tried this.template.querySelectorAll('lightning-record-edit-form').Submit()
unfortunately it doesn't work.
I will add that in case I use this.template.querySelector('lightning-record-edit-form'). submit()
it works but submit only the first lightning-record-edit-form
HTML
<template>
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
<thead>
<tr >
<th class="" scope="col">
<a class="slds-th__action slds-text-link_reset" >
Name
</a>
</th>
<th class="" scope="col">
<a class="slds-th__action slds-text-link_reset">
Email
</a>
</th>
</thead>
<tbody>
<template for:each={testitems} for:item="item">
<tr class="slds-hint-parent" key={item.Id} >
<td data-label="Book Name">
<template if:true={item.statusCheck}>
<lightning-record-edit-form
class="test"
object-api-name={objectApiName}
record-id={item.Id}>
<div class="flex">
<lightning-input-field
field-name={nameText} variant = "label-hidden" >
</lightning-input-field>
</div>
</lightning-record-edit-form>
</template>
<template if:false={item.statusCheck}>
{item.Name__c}
</template>
<br>
<div>
<ul>
<strong>{text}</strong>
<template for:each={item.Cart__r} for:item="cartItem">
<li key={cartItem.Id}>
<template if:true={boolVisible}>
<div > {cartItem.BookName__c}</div>
</template>
</li>
</template>
</ul>
</div>
</td>
<td data-label="Email">
<template if:true={item.statusCheck}>
<lightning-record-edit-form
class="test"
object-api-name={objectApiName}
record-id={item.Id}>
<div class="flex">
<lightning-input-field
field-name={email} variant = "label-hidden" >
</lightning-input-field>
</div>
</lightning-record-edit-form>
</template>
<template if:false={item.statusCheck}>
{item.Email__c}
</template>
<br>
<div>
<ul>
<strong>{text3}</strong>
<template for:each={item.Cart__r} for:item="cartItem">
<li key={cartItem.Id}>
<template if:true={boolVisible}>
<div > {cartItem.PriceBooks__c}</div>
</template>
</li>
</template>
</ul>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</template>
JS
handleSubmit() {
this.template.querySelector('lightning-record-edit-form').submit()
}
Best Answer
You are close.
querySelector('lightning-record-edit-form')
will get you only the first form.querySelectorAll('lightning-record-edit-form')
will get you a list of forms where you cannot call thesubmit
method. You need to iterate this list and call submit 1 by 1. Something like this.