0

I am trying to trigger the on submit event on the recordEditForm. I could easily trigger submission itself by using .submit() but that won't trigger the onsubmit JS event handler ( try it, it doesn't work ).

I was looking at workaround online and it's suggested to hide a button inside the recordEditForm and to click that using Javascript, which is fine but now I got a new problem: I couldn't query for the actual hidden button in HTML to "click" on it. What should I do?

Here is the component code, as you can see the submit button is hidden side the recordEditForm, and there is a separate visible button outside that the user can click on:

<!-- onSubmit handler defined here -->
<lightning:recordEditForm aura:id="Form" 
                          class="submit_form"
                          onsubmit="{!c.onSubmit}"
                          onsuccess="{!c.onSuccess}">
    <!-- This button is hidden to the user but used to trigger on handler in JS-->
    <lightning:input type="submit" aura:id="submit_hidden" class="submit_hidden"/>
</lightning:recordEditForm>

<!-- User click on this button -->
<lightning:buttonStateful aura:id="save" 
                          class="button save_button"
                          onclick="{! c.onSubmitClicked}"/>

Here is my JS controller, my goal is to trigger the alert("onSubmit"):

onSubmit: function(component, event, helper) {
    alert("onSubmit");
},

// This function work but does NOT trigger on submit event!  It just directly sends to the server.
onSubmitClicked: function(component, event, helper) {
    component.find('Form').submit();
},

CSS to hide the submit button:

.THIS .submit_hidden {
    display: none;
}

How do I trigger the onSubmit event for recordEditForm from Javascript when the user click on another button?

This is the HTML the Aura code generated for the hidden submit button:

<lightning-input class="submit_hidden slds-form-element" data-aura-rendered-by="556:0" lightning-input_input-host="">
   <span lightning-input_input="" data-aria="" class="slds-assistive-text"></span>
   <label lightning-input_input="" for="input-88" class="slds-form-element__label slds-no-flex"></label>
   <div lightning-input_input="" class="slds-form-element__control slds-grow">
        <!-- This is the element that actually get clicked -->
        <input lightning-input_input="" type="submit" id="input-88" class="slds-input" value="">
   </div>
</lightning-input>

What I have tried: I try to directly refer to the DOM element to click it, but I am having trouble selecting it, any help on this?

document.querySelector('.submit_hidden').querySelector('.slds-input')
Improve this question
2
  • Why do you want to trigger the event? We could then potentially give you workarounds to achieve that end rather than find a hacky way to programmatically click the submit button. If it's to get the lightning:inputField fields and values, my workaround in the past has been to name all of them with the same aura:id (or some known list of names) and then use component.find() to read off the fieldName and value from the components themselves and construct the record object manually and then submit to the server. Commented Apr 16, 2021 at 23:07
  • 1
    It's to modify some fields values using other field values Commented Apr 16, 2021 at 23:17

1 Answer 1

Reset to default
2

If your goal is to "modify some fields' values using other field values", then you can do this in your onSubmitClicked controller before calling component.find('Form').submit().

If you have values bound to the lightning:inputField (or whatever component) value attribute, you can use component.set() to update the relevant aura:attributes, or if not, you can get the components directly via component.find() and then set the value attribute by using fieldComponent.set("v.value", "sampleValue") (unfortunately can't give explicit examples since you didn't list the fields in the component markup)

Those field values will thus be set as you want once you call component.find('Form').submit().

Improve this answer
1
  • 1
    Alright this works, I guess I should have taken a walk or something, you know how we get stuck in our direction and don't look at other ways? Commented Apr 16, 2021 at 23:44

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.