1

Problem : In lightning-record-edit-form handleSubmit is not getting called

Details : Below is the code and when user clicks on "Update Opportunity" record is getting saved but nor handleSubmit nor handleSuccess is getting fired.


HTML

<template>
    <lightning-card  title="Opportunity Update">
        <lightning-record-edit-form object-api-name="Opportunity" record-id="<HardCodedId>">
            <lightning-messages>
            </lightning-messages>

            <lightning-input-field field-name="Name"></lightning-input-field>
            <lightning-input-field field-name="AccountId"></lightning-input-field>
            <lightning-button
                    class="slds-m-top_small"
                    type="submit"
                    label="Update Opportunity">
            </lightning-button>
        </lightning-record-edit-form>
    </lightning-card>
</template>

JavaScript

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class updatedeal extends LightningElement {

   handleSubmit(event){
      event.preventDefault();       // stop the form from submitting
      const fields = event.detail.fields;
      console.log('Fields -->',fields);
      this.template.querySelector('lightning-record-edit-form').submit(fields);
   }

   handleSuccess(event) {
         const evt = new ShowToastEvent({
            title: 'Success',
            message: 'Opportunity is update successfully',
            variant: 'success'
         });
         this.dispatchEvent(evt);
   }
}       

If you have any pointer let me know.

4

I think it's just something minor. The lightning-record-edit-form tag is missing the onsucces and onsubmit attributes.

<lightning-record-edit-form object-api-name="Opportunity" record-id="<HardCodedId>" onsuccess={handleSuccess} onsubmit={handleSubmit} >
  • Ohhh..I missed this. Now I feel like stupid. Thank you very much. – Kiran Machhewar Aug 17 at 1:13
  • No problem. We've all been there :) – Kasper Aug 17 at 1:16
  • 1
    To the future google searcher (aka me :) ). Another easy to miss mistake that has caught us out a couple times is using a capital 'S' when defining the submit button type. Using <lighting-button type="Submit"> will not work....it must be all lowercase. type="submit" – Scott McClung Oct 29 at 14:13

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.