0

when I use the below code to submit each form, onsubmit={handleSubmit} doesnt run. Why?

<lightning-record-edit-form key={item.id} object-api-name="professionalExperience__c" onsubmit={handleSubmit}>

this.template
        .querySelectorAll("lightning-record-edit-form")
        .forEach(element => {
            alert('ELEMENTO: ' + JSON.stringify(element));
            element.submit();
            alert('post submit SUBMIT');
            
        });

  handleSubmit(event){
        alert('hello');
        event.preventDefault();       // stop the form from submitting
        const fields = event.detail.fields;
        alert(JSON.stringify(fields));
        console.log(fields);
        this.template.querySelector('lightning-record-edit-form').submit(fields);
     }
5
  • Can you separate out your template and js? Also what is this this.template .querySelectorAll("lightning-record-edit-form") and why not call ` this.submit();` instead of ` element.submit();` and pass all the fields as arguments. Nov 26 '20 at 12:38
  • salesforce.stackexchange.com/questions/277825/… here are more info related Nov 26 '20 at 12:41
  • Sounds like you have multiple lightning-record-edit-forms in your component. In the method handleSubmit, take look at the line this.template.querySelector('lightning-record-edit-form').submit(fields);. This line would query and fetch any one of the multiple record edit forms and doesn't guarantee the one on which submit event was triggered.
    – arut
    Nov 26 '20 at 15:28
  • Hi @arut, exactly I have multiple record form. My problem is that handleSubmit its not been called =(. All forms are submitted but I cant manage the handleSubmit before submits. Theres not any way to get all the values of all forms before submit? Nov 26 '20 at 15:38
  • What is key={item.id} in your code? Was it a typo error for record-id={item.id}?
    – arut
    Nov 30 '20 at 10:29
1

If you define a custom submit event handler using onsubmit={handleSubmit} within a lightning-record-edit-form, then you need to define a button element (of type='submit') within the record edit form. LWC would then wire this submit button to the custom event handler code. So, on click of the button, a submit event is triggered and the custom event handler code is executed. Within this event handler code, event.detail.fields param holds all the field values that can be updated during runtime.

On the contrary, when you have multiple lightning-record-edit-forms, a single submit/save button with onclick event handler, and the following code in the event handler, the custom event handler defined as onsubmit={handleSubmit} will have no impact because there is no specific button wired up with this handler code.

this.template.querySelectorAll("lightning-record-edit-form").forEach(element => {element.submit();});

Executing the above code does not invoke the custom event handler method because you are not triggering the submit event of the lightning-record-edit-form, but directly calling the public method submit of the record edit form.

I don't see a fields attribute in your code on the lightning-record-edit-form, so assuming that you are using lightning-input-fields in your component. Possible solution to your problem is to access the input fields directly in your code. For example, if you had the lightning input field defined as <lightning-input-field field-name="Name"></lightning-input-field>, then you can access this specific field as shown in the sample code below.

const inputFields = this.template.querySelectorAll('lightning-input-field');
    
if (inputFields) {
   inputFields.forEach(field => {
        if(field.name === "Name") {
            // Do something here with the field
        }
    });
}

If you have same field in other lightning record edit forms, then you may use data-* attributes. For example, if you had the lightning input field defined as <lightning-input-field data-id="Name1" field-name="Name"></lightning-input-field>, then you can access this specific field as shown in the sample code below.

const inputFields = this.template.querySelectorAll('lightning-input-field');
    
if (inputFields) {
   inputFields.forEach(field => {
        if(field.dataset.id === "Name1") {
            // Do something here with the field
        }
    });
}

Alternatively, you may also use onchange event handler of the lightning-input-field and manage the values on the input fields.

You may also use the data-attributes at record edit form level, if you want identify and control the submission of the record data. Disclaimer: I've not tried to replicate you problem and test this solution at my end, but it should work.

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.