From the ng-book:
We use ng-submit to bind an expression to an onsubmit event. This directive also prevents the default action (sending the request and reloading the page), but only if the form does not contain an action attribute.
What is the meaning of the above paragraph?
It means that :
<form ng-submit="submit()"></form>
Will prevent the submit event. And never post the form to your server.
But
<form ng-submit="$ctrl.submit()" action="/url" method="post"></form>
Will not prevent the default submit event.
If you do nothing, your form will be treat as a classic html form and post the result to /url on your server (after the submit code of your controller).
To prevent it in this case, you need to pass the event in submit this way :
<form ng-submit="$ctrl.submit($event)" action="/url" method="post"></form>
And in your controller :
function submit(event) {
event.preventDefault();
}
If <form> tag have both of these attribute: <form ng-submit="submit()" action="http://example.com"> In that case it will call "submit()" method as well as it will also redirect to action link.
But if it only has ng-submit and not having the action attribute : <form ng-submit="submit()"> In that case there will no redirect on submission and it will only excute the submit() method.
Related
I know that while using Angular's ng-submit will disable the default form action and use angular's function but the problem is when it is used with Laravel blade templating it somehow do not disable the function... So as below code, if i do something like this
{!! Form::open(array('class' => 'form-horizontal signup-form', 'ng-submit' => 'updateProfile()')) !!}
and when I inspect the generated code, it gives me something like this
<form method="POST" action="http://www.example.com:8000/profile/update" accept-charset="UTF-8" class="form-horizontal signup-form ng-pristine ng-valid" ng-submit="updateProfile()"><input name="_token" type="hidden" value="8pNEBRXkUSfGUvSWfvFAmFPULLBO6kiet6LieC5B">
which when the submit button is triggered, it executes the form's action instead of calling the Angular's thus giving me an MethodNotAllowedException. But when I use manual coding like this
<form ng-submit="updateProfile()" class="form-horizontal signup-form">
everything works like a charm. I wonder if anyone knows any workaround to this issue can share their experience with me. i know that i can do manual code just for these section but again, I want to maintain consistency in the codes.
I think when you submit the form which generate by laravel form builder, it also calling the updateProfile() function and may be you don't prevent the default action of the event at the end, because of that form has a action so that page will submit to the action. If your form has no action then there is no way to submit the form as like your manual code, if you put a action to the manually coded form with the same updateProfile() it will submit the form to the action you provided.
to avoid that put event.preventDefault(); inside the updateProfile() function.
$scope.updateProfile = function(event) {
......
event.preventDefault();
}
and pass the event to the function as, updateProfile($event)
{!! Form::open(array('class' => 'form-horizontal signup-form', 'ng-submit' => 'updateProfile($event)')) !!}
What is the simplest way to submit a form directly to a controller?
I have a form like:
<form name="searchForm">
<input type="text" name="query" ng-model="query">
<button type="submit">Search</button>
</form>
And a controller that handles routes for #/search?query=xxxx.
How can I make it so when the form is submitted it's equivalent to a user clicking a link with a href="#/search?query=xxxx"? I would think there would be something like ng-action="#/search" but I haven't found anything that simple.
Please see below points to solve your problem.
Use ng-submit="SaveData(pass your model value here)" as attribute of form tag.
Create SaveData scope method in your controller JS.
Create URL and use window.location to redirect.
I need the functionality of the onsubmit attribute on a form - namely when I call this onsubmit function, it must return truthy in order for the form to post. However I would like to do this with an angular function call, along the lines of:
<form id="form-submit-canvas" autocomplete="on" enctype="multipart/form-data" accept-charset="UTF-8" method="POST" onsubmit="{{FormSubmit.validate()}}" action="{{FormSubmit.SUBMIT_URL}}" novalidate>
However the above gives out errors about interpolation being used on onsubmit. I tried putting in ng-submit and it does not work since the action property I have set is overridden.
Not sure if it's still valid for you, but as I've been fighting the similar problem.
Following answer brought me to the right track: https://stackoverflow.com/a/17769240/1581069
So, to sum up the steps required:
you should call pure javascript (angular-free one) in your onsubmit, like (please note: if you return false there => form won't be submited):
<form id="form-submit-canvas" ... name="fooForm" onsubmit="return externalValidate();" ...
And implement the the method to hand-over to angular, like:
function externalValidate(){
return angular.element($("#form-submit-canvas")).scope().validate();
}
where your validate() method should be just one you referred to previously (implemented in your angular controller).
and externalValidate() should be implemented outside of any angular-specific component.
Moreover make sure sure to return correct result from the validate() method (to prevent form submission). Maybe something like:
$scope.validate = function () {
// TODO implement whatever magic you need prior to submission
return $scope.fooForm.$valid;
}
Try using the ng-submit attribute instead of onsubmit. Related advise: Many attributes are not supported by Angular. You should find the ng- equivalent of the attribute you want to use to get Angular to react to them properly.
Example:
<form id="form-submit-canvas" autocomplete="on" enctype="multipart/form-data" accept-charset="UTF-8" method="POST" ng-submit="validate()" novalidate>
...
<input type="submit" name="submit" value="Submit" />
</form>
Where the validate() method in ng-submit is a method declared on your $scope.
Here is a related tutorial: AngularJS Tutorial (ng-submit)
Well I know this could help somebody looking for how to use the submit form action in Angular. I'm working with Angular 13 and this is how we can capture the submit action:
<form [formGroup]="formData" (onSubmit)="onSubmit()">
<button type="submit">Click here!</button>
</form>
The reference is here
I have the following form in my AngularJS app which contain hidden fields with values filled based on user selection on some inputs on the form (radio buttons...etc), when the user click on the Submit link I should route the user to an external URL while passing hidden fields just as any normal form submission. Unfortunately I can't do this as some of the hidden field values are dependent on some calculations inside a function of the view related controller (as shown below in controller code, so I was wondering is there a way I can call the controller function from this form, then the controller function post the whole form and its field? Any example is highly appreciated. Thanks.
Note I am using link instead of a button.
<form name="clientPaymentForm" id="clientPaymentForm" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name" ng-model="client.name">
...
...
<input type="hidden" name="amount" ng-value="order.total">
...
...
<a class="orderButton" href="javascript:{}" onclick="document.getElementById('clientPaymentForm').submit(); return false;">Order Now</a>
</fieldset>
</div>
</form>
Controller:
$scope.processOrder = function(){
//Order calculation happens here to update order.total value and can only happen after click click Order Now to place the order...
};
I guess this is a bit late, but what you want to use is the ng-click directive which will allow you to call functions defined directly on the scope.
Assuming that you've defined $scope.processOrder, change your a tag to the following:
<a class="orderButton" ng-click="processOrder()">Order Now</a>
And everything should work as hoped.
Alternatively, you could use ng-submit on the form to have it work when you press the "Enter" or "Return" key, as in:
<form name="clientPaymentForm" id="clientPaymentForm" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" ng-click="processOrder()">.
I want to prevent-default action of http-post to '/signUp' if e-mail is null upon filling form.
Controller Code:-
$scope.signUp = function() {
if($scope.email = null);
preventdefault;
}
html (jade) :-
form(name="input", action="/signUp", method="post")
input(type="submit", value="submit")
When you have the action attribute specified for the form, angularjs will not do preventDefault.
If you remove it and add ng-submit instead:
<form name="myForm" method="post" ng-submit="signUp(myForm)" novalidate>
<input type="email" name="email" ng-model="newSignup.email" required>
<button type="submit">sign up</button>
</form>
In this case the form will always have preventDefault and on submit your $scope.signUp() function will be called where you can proceed with an ajax post to the backend /signup or further validation.
Note that by using proper validation attributes on your inputs (like type="email" and required), angularjs will perform some basic validation for you.
You can have an extra ng-disabled="!myForm.$valid" on the submit button to keep the button disabled while the email is not correctly entered.
By using ng-model on the inputs like in my example, your scope will get a $scope.newSignup object which you can check in your signUp() function for further validation:
$scope.signUp = function(htmlForm) {
if ($scope.newSignup.email !== 'some#email.com') {
return false; // you should really show some info to the user
}
...
}