I have a requirement and i am stuck with it.

Description: I have to create a Custom LWC form where the form should contain fields from various objects using lightning-edit-record-form but i need a single SUBMIT BUTTON with which i can submit a record. For example, using lightning-edit-record-form i will get Account name,Account number fields from account Object, Email fields from Contact Object in the form and i need a single SUBMIT button to submit the form.

My Question: How can i submit records of various objects with a single SUBMIT button?


One way is to include a hidden submit button inside each form:

<lightning-button class="slds-hide" type="submit"></lightning-button>

and then have a single visible button:

<lightning-button label="Submit" onclick={submitForms}></lightning-button>

that submits all the forms:

submitForms() {
    const forms = this.template.querySelectorAll('lightning-edit-record-form');
    for (const form of forms) form.submit();

but this gets a bit more complicated if you need to handle form submit errors.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.