Submit two lightning-record-edit-form by one button

javascriptlightning-web-components

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 the submit method. You need to iterate this list and call submit 1 by 1. Something like this.

this.template.querySelectorAll('lightning-record-edit-form').forEach((form) => {form.submit()});
Related Topic