0

I am working on a lightning component (aura) and submitting form data via a button. what i am experiencing is that the form data is not getting posted on the first click. after verifying the data did not post, we click the button again (not refresh) and the data is correctly posted to the action link. I am not sure what i am doing wrong or what it is that i am not understanding about how this is working. I thought the data would be available after calling the helper.buildParty() function. Here is the code im working with...


component

<!-- myLabel is the url to the external page -->
<form aura:id="cmaForm" action="{!v.myLabel}" target="_blank" method="post">
                <input type="hidden" name="client" aura:id="client" value="jimbob" />
                <input type="hidden" name="party" aura:id="party" value="{!v.party}" />
                <input type="submit" value="Create Party/Link Party" />
            </form>

controller

submitDetails: function(component, event, helper){
            helper.buildParty(component, event, helper);
            component.find("cmaForm").getElement().submit();
    }

helper

buildParty : function(component, event){
        //fields are being set in another function from the helper that pulls from the force:recordData
        let buildParty ='{'+
            '"middleName": "'+component.get("middleName")+'",'+
            '"dateOfBirth": "'+component.get("v.dateOfBirth")+'",'+
            '"lastName": "'+component.get("v.lastName")+'",'+
            '"state": "'+component.get("v.state")+'",'+
            '"address1": "'+component.get("v.address1")+'",'+
            '"address2": "'+component.get("address2")+'",'+
            '"city": "'+component.get("v.city")+'",'+
            '"zipCode": "'+component.get("v.zipCode")+'",'+
            '"firstName": "'+component.get("v.firstName")+'", '+
        '}';
        
            component.set("v.party",buildParty);    
            console.log('Get Party: '+component.get("v.party"));
    }

I've tried a promise, chaining promises. I've tried settimeout. I've tried populating values using afterRender(). I've tried initializing the data using doInint(). Ive tried initializing the data on (changeType === "LOADED") still no result.

1 Answer 1

1

Updating an attribute doesn't immediately update the DOM, so you need wait for a render cycle:

helper.buildParty(component, event, helper);
setTimeout(
  $A.getCallback(
    function() {
      component.find("cmaForm").getElement().submit()
    }
  )
);

Here, setTimeout will wait for one render cycle, and $A.getCallback is needed to modify a component outside a life cycle event.

2
  • oh that's definetly the part i didn't understand. im going to try that now. thank you so much for your help. Commented Dec 13, 2022 at 14:24
  • it worked, thank you again for your help. seems like i have some manual reading ahead of me. Commented Dec 13, 2022 at 14:36

You must log in to answer this question.

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