4

i have created a form in salesforce lightning using form tag and one button there is inputtype="submit", value="submit", i dont want to reload the page when submit clicked. please help me out.

<aura:component> 
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <form action=" url" method="post" I'd="form"/>
    <Inputtype="submit",value="submit" >
</aura:component>

doInit: function(component, event, helper) 
{
    $( "form" ).submit(function( event ) {
        event.preventDefault();
        return false;
    });
}

it is not working if i used in doInit.

Update:

 submitForm : function () {
            $( "form" ).submit(function( event ) {

       event.preventDefault();
       return false;
    });
        }

this submitFrom() function i have called in onclick method for button.

<input type="submit" name="submit" onsubmit="submitForm()"/>

but it is not working. page is still loading.

  • that looks lie your visualforce page. What about your apex class related to the VF page? That would have the code for the button's behaviour.... – canyoucatchme Nov 17 '15 at 5:11
  • If you don't want the page to refresh, why are you using a form submission? Couldn't you accomplish the same thing by calling an Aura Enabled apex method on the component's controller? – martin Nov 17 '15 at 7:45
  • Using submit type button triggers browser's HTML5 form validation. So it's nice to leverage that, do the submission through AJAX but then prevent the actual page reload - very trivial in plain HTML/JS but apparently complicated in Lighting. – Daniel Sokolowski Apr 3 '17 at 18:25
2

I got and answer on that.. i have used

          $("form").submit(function( event ) {
              event.preventDefault();
              url = $form.attr( 'action' );
              var posting = $.post( url, { email: $('#email').val() } );
              posting.done(function( data ) {
               alert("success")
                   });
               alert("submitted")
                 });

this is working and page is not loading againg but i am unable to submit that form and update the form with values.

1

If you don't want to refresh the page you can use jquery for that purpose

Here is basic example of that.

$( "form" ).submit(function( event ) {

   event.preventDefault();
   return false;
});
1

Lightning parses out onsubmit from the form element, however it leaves the action parameter in - so the following worked for me in a LockerService enabled org.

<form action="javascript:return false" aura:id="sendNotificationForm" ... >

To do it without jQuery and in-line withing the Lightning framework is to call event.preventDefault() parameter that's passed to an action.

({
    ...
    ,sendNotification: function(component, event, helper) {
        ....

        event.preventDefault();

        ...
    }
    ...
})
0

Just posting here in case anybody else wants to do this.

I wanted to submit the form programmatically so that the input validations will be invoked. I also had 'lightning:input' and other custom components instead of the 'lightning:inputField' in the form. The below code worked for me:

<!--import jQuery from static resources -->

<lightning:recordEditForm aura:id="recordEditForm" 
                          objectApiName={!v.sObjectName}" 
                          onsubmit="{!c.handleSaveRecord}">
    <!--Needed this to make the form work-->
    <div class="slds-hide">
        <lightning:inputField fieldName="Name" />
        <button id="saveButton" type="submit" label="Save" />
    </div>
    <!--Put input components here-->
</lightning:recordEditForm>

Then I had a button in the controller that called 'onSave' which submits the form and thus invoking the input validations:

onSave: function(cmp, event, helper) { $('#saveButton').click(); },

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.