1
HTML
<template>
    <lightning-record-edit-form object-api-name="CustomObjec__c" record-type-id="0120C000000Ay7WQAS" onsuccess={handleSuccess}>

                    <lightning-input-field field-name="Business__c" required>
                    </lightning-input-field>
                    <lightning-input-field field-name="Type__c" required>
                    </lightning-input-field>


              <lightning-button type="submit" variant="brand" label="Submit" data-name="myButtonName"></lightning-button>

    </lightning-record-edit-form>
</template>
JS
import { LightningElement } from 'lwc';

export default class CaseProductManagedServicesLwc extends LightningElement {

  handleSuccess(event){
    const updatedRecord = event.detail.id;
    console.log('onsuccess: ', updatedRecord);

    alert('Button name ' + JSON.stringify(event.target.dataset));

 }

}
1
  • 1
    Hi @DevzTory, and welcome to SFSE! We would need to see some code in order to help you. Please read about How to Ask, then edit your question to include any relevant code. Thanks!
    – Raul
    Apr 6, 2020 at 11:28

3 Answers 3

5

There is no correlation from the click of the button to the onsuccess handler. This is because the callback is asynchronous (we need to save data to the server and get a response back). Instead, store the button ID on click:

 <lightning-button type="submit" onlick={storeButtonName} variant="brand" label="Submit" data-name="myButtonName"></lightning-button>

...

storeButtonName(event) {
   this.buttonName = event.target.dataset.name;
}
2
  • Hi all. I have a 'Save' button and a 'Save and New' button in LWC. Both these button implement type="submit". I need to use type="submit" to leverage built in abilities of lightning-record-edit-form. In the handleSuccess event, I want to reset the form or navigate to new record based on whether the 'Save' button or 'Save and New' button was clicked.
    – DevzTory
    Apr 6, 2020 at 16:10
  • @DevzTory As I said, you'd want to save the button that was clicked beforehand, so in your onsuccess handler, you can choose the behavior you'd like to execute.
    – sfdcfox
    Apr 6, 2020 at 16:24
0

@sfdcfox I have an alert in my JS to display the button name. It returns 'undefined'. Code below:

<template>
<lightning-record-edit-form object-api-name="Case" density="compact"  onsuccess={handleSuccess}>

    <lightning-messages>
    </lightning-messages>
                <lightning-input-field field-name="Status" required>
                </lightning-input-field>
                <lightning-input-field field-name="Origin" required>
                </lightning-input-field>

    <div class="slds-m-top_medium">
          <lightning-button class="slds-m-top_small" label="Cancel" variant="variant" onclick={navigateToObjectHome}></lightning-button>
          <lightning-button class="slds-m-top_small slds-m-left_x-small" type="submit" variant="brand" data-name="save" label="Save" onlick={storeButtonName}></lightning-button>
          <lightning-button class="slds-m-top_small slds-m-left_x-small" type="submit" variant="brand" data-name="saveAndNew" label="Save and New" onlick={storeButtonName}></lightning-button>
      </div>

</lightning-record-edit-form>

...

import { LightningElement, api, track } from 'lwc';
export default class CaseProductManagedServicesLwc extends LightningElement {
  @api CaseRecordId;
  @track buttonName;

      storeButtonName(event) {
        this.buttonName = event.target.dataset.name;
     }
     handleSuccess(event) {
      alert('button pressed: ' + this.buttonName);
    }
}
2
  • You have typo error in your code. Could you type the correct event name as onclick? [Not onlick]. I guess due to this error, the click event handler never gets executed and you get undefined in the alert message.
    – arut
    Apr 6, 2020 at 17:32
  • That solved it! Thanks @Sfdcfox for the solution. Thanks Arut for sorting that bug for me.
    – DevzTory
    Apr 6, 2020 at 17:44
0

The onsuccess handler corresponds to the lightning-record-edit-form and NOT the lightning-button. In your code, event.target will fetch the lightning-record-edit-form element. Besides, as already mentioned by @sfdcfox, the click event of the button has no correlation with the onsuccess handler.

In order to access the button data attributes, you need not invoke for the button click event or wait for the onsuccess handler. You could query them in the renderedCallback() method as follows:

this.template.querySelector('[data-name="myAccBtn"]');

or

this.template.querySelector('[data-name="myAccBtn"]').dataset.name;

Please note that the renderedCallback method() will be executed every time there is a change to the DOM structure or page refresh. So, you'll have to be careful about the code inside this method.

Not the answer you're looking for? Browse other questions tagged .