2

I have a lightning:recordEditForm that requires two submit buttons. Submit buttons are required rather than using onclick due to submit() not firing the forms onsubmit event. This is required so that I can modify the fields payload.

Is there a way to tell within the onsubmit event which button was clicked?

I've tried the following:

event.getParam("name") - returns undefined

event.getSource().get("v.name") - returns undefined

event.getName() - returns "submit" for both buttons. This makes sense.

event.getSource() - returns something like the below, relying on the number will likely be fragile:

SecureComponentRef: markup://lightning:recordEditForm {1234:0} {recordEditForm}{ key: {"namespace":"c"}

    <lightning:recordEditForm
            aura:id="recordEditForm"
            onload="{!c.handleLoad}"
            onsubmit="{!c.handleSubmit}"
            onsuccess="{!c.handleSuccess}"
            recordId="{!v.RecordId}"
            objectApiName="Account">

        <lightning:messages />

        <lightning:buttonIcon
                              iconName="utility:save"
                              title="APPROVE"
                              name="APPROVE"
                              value="APPROVE"
                              type="submit" />  

        <lightning:buttonIcon iconName="utility:save"
                              title="REJECT"
                              name="REJECT"
                              value="REJECT"
                              type="submit" />

        <lightning:inputField fieldName="Name"/>
        <lightning:inputField fieldName="Phone"/>

    </lightning:recordEditForm>

handleSubmit : function(component, event, helper) {
    console.log("param name "+event.getParam("name")); //undefined
    console.log("source name "+event.getSource().get("v.name")); //undefined
    console.log("param value: "+event.getParam("value")); //undefined
    console.log("getSource "+event.getSource()); //SecureComponentRef: markup://lightning:recordEditForm {1234:0} {recordEditForm}{ key: {"namespace":"c"} }
    console.log("getName "+event.getName()); //Submit
},
2
  • can you add the minimal required code to reproduce your issue? Jun 12, 2020 at 9:56
  • Done, not sure how much it helps :)
    – Girbot
    Jun 12, 2020 at 10:07

1 Answer 1

0

All you have to do is add onclick event to your button together with type="submit". The onclick will fire first than the form gets submit. Define an attribute where you can store the button name and get that button name in handlesubmit method.

Aura Markup:-

<aura:attribute type="String" name="buttonlabel"/>
    
    <lightning:recordEditForm  onsubmit="{!c.handleSubmit}" aura:id="myRecordForm"
            objectApiName="Account">

        <lightning:messages />

        <lightning:buttonIcon alternativeText="sach"
                              iconName="utility:save"
                              title="APPROVE"
                              name="APPROVE"
                              value="APPROVE"
                              type="submit"
                              onclick="{!c.Submit1}"/>  

        <lightning:buttonIcon alternativeText="sach"
                              iconName="utility:save"
                              title="REJECT"
                              name="REJECT"
                              value="REJECT"
                              type="submit"
                              onclick="{!c.Submit2}"/>

        <lightning:inputField fieldName="Name"/>
        <lightning:inputField fieldName="Phone"/>

    </lightning:recordEditForm>

JS Controller:-

({
    handleSubmit : function(component, event, helper) {
        event.preventDefault();       // stop the form from submitting
        var button = component.get('v.buttonlabel');        
        var fields = event.getParam('fields');
        if(button === 'button1'){
            fields.Name = '32 Prince Street';
        }else if(button === 'button2'){
            fields.Name = '50 Queen Street';
        }        
        component.find('myRecordForm').submit(fields);
    },
    Submit1 : function(component, event, helper) {
        component.set('v.buttonlabel','button1');
    },
    Submit2 : function(component, event, helper) {
        component.set('v.buttonlabel','button2');
    },
})
0

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.