Preventing a reload/refresh on form submit in Lightning

Question

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.

Answer 1

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.

Answer 2

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;
});

Answer 3

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();

        ...
    }
    ...
})

Answer 4

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(); },