I have a form where the url action come from an API call.
So, in the submit event of the form I need to call an API that receive the URL then I need set the action of the form and trigger the POST.
But, all the steps must run only when the user click on the submit button.
I tried:
<form name="myForm" ng-submit="form.submit()" method="post" enctype="multipart/form-data" >
<input type="file" name="file" id="file">
<input type="submit" value="Upload Image" name="submit">
</form>
and
angular.module('formCtrl', ['formService', 'authService'])
.controller('formController', function($scope, $http, Form, AuthToken) {
var vm = this;
vm.submit = function() {
Form.get().success(function(data)
{
if (data.url)
{
document.myForm.action = data.url;
document.myForm.submit();
}
});
}
});
But didn't work. Actually, I tried a lot of thing without success.
And I'm not using jquery in my project.
Can some one give me some help in how to do it ?
Add submit to your $scope and specify ng-controller as your controller formController
Related
After I click submit in a form, some javascript runs to modify the data and sends it to whatever the form action is specified in the HTML:
// Submit the form:
// $form.get(0).submit();
$('.submit', $(event.target.form)).click();
I would like to instead use ng-click and send that info to an angular function, such as vm.checkout().
How can I make this happen?
Use ngSubmit directive instead of ngClick for form submit.It binds to the submit event which is fired when a form is submitted.
ng-submit works only when forms submitted.
where as ng-click can work without form submit event.
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.submitMe = function () {
alert('Submitted');
};
});
<div ng-app="myApp" ng-controller="MyCtrl">
<form ng-submit="submitMe()" name="myForm">
<button type="submit">submit</button>
</form>
</div>
JavaScript
$scope.submit = function(data){
// do something with data
}
HTML
<form>
<input type="text" ng-model="temp.name" name="name"/>
<button type="button" ng-click="submit(temp)">Submit</button>
</form>
If it is a form you are submitting you should use ng-submit. Add the ng-submit tag with the corresponding function which will be in your controller. Then, you will be able to handle the data from your form submission.
For example:
<form ng-submit="submit()" ng-controller="ExampleController"></form>
I have sample code like this:
Html Code:
<body ng-controller="MainCtrl">
<form name="myForm">
<input name="myText" type="text" name="test" ng-model="mytext" required />
<button ng-click="save()" ng-disabled="myForm.$invalid">Save</button>
</form>
</body>
Js code:
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.save = function(){
//logic or http method
console.log("Test");
}
});
Attached the code in this link: Click Here
Logic:
Default save button disabled.
After enter the form enable the button.
After save again disable the save button.
Again user enter the text need to enable save button.
Note: Here I attached only one input but I have multiple input fields.
Also, In save function I had logic data save into database.
You can use $pristine to identify if there were any changes to the form and enable button only then:
<body ng-controller="MainCtrl">
<form name="myForm">
<input name="myText" type="text" name="test" ng-model="mytext" required />
<button ng-click="save(myForm)" ng-disabled="myForm.$invalid || myForm.$pristine">Save</button>
</form>
</body>
Notice how $pristine is used on ng-disabled:
ng-disabled="myForm.$invalid || myForm.$pristine"
In this case button will be disabled if form is invalid or if there were no changes to the form.
If you use this approach you also need to set the form to pristine after saving the data. You can use method $setPristine:
$scope.save = function(myForm) {
// set form to pristine
myForm.$setPristine();
}
Notice that there is a form parameter which is used to pass a form to the method. In HTML you also need to pass this parameter as part of ng-click:
ng-click="save(myForm)"
Here is JSFiddle that demonstrates the functionality
For more information check out documentation of FormController.
you have disabled the submit button when the form is invalid.
myForm.$invalid
so whenever a required field is blank the form will be invalid and button will be disabled. As soon as all the required input in the form have values, submit button will be enabled.
To make it disabled you need to reset all the modal variables of the required inputs once the save has done its work i.e on the success call back of http request reset the model variables.
Well here is how i would do it, i'll add another tracking variable. something like this.
$scope.btnStatus = true;
$scope.save = function(){
//logic or http method
$scope.btnStatus = false;
console.log("Test");
}
$scope.onChange = function(){
if($scope.btnStatus == false)
$scope.btnStatus = true;
}
and the html would look like this.
<form name="myForm">
<input name="myText" type="text" name="test" ng-change="onChange()" ng-model="mytext" required />
<button ng-click="save()" ng-disabled="myForm.$invalid || !btnStatus">Save</button>
</form>
Here is a working code based off of your code.
I want to upload files using javascript/jquery/ajax and in my case, I have to prevent the reload on form submitting on upload.
Also, I want to add a delete button, such that, when file is uploaded, the delete button can delete this and same is the scenario, that to prevent the page refresh/reload on form submitting.
Hence, I've three buttons in a single form, UPLOAD, DELETE, NEXT and in my case, only next allows to submit the form by refreshing/action of form. And obviously, when file is just selected and the user directly hits the next button, it first uploads and then take his action.
HTML:
<form name="myform" method="post" id="FORM2" enctype="multipart/form-data">
// OTHER VALUES OF FORM
<input type="file" name="FileUpload-1" id="FileUpload-1" class="file_upload" />
<input type="submit" value="Upload" id="upload" class="submitUpload" />
<input type="submit" value="Delete" id="delete" class="submitDelete" />
<input type="submit" name="" id="FORMSUBMIT">
</form>
JS:
$(".submitUpload").click(function(){ console.log('UPLOAD');
action = "upload.php";
$("#FORM").on('submit',function(){
var options={
url : action,
success : onsuccess
};
$(this).ajaxSubmit(options);
return false;
});
}
return false;
});
$(".submitDelete").click(function(){ console.log('DELETE');
return false;
});
$('.FORMSUBMIT').click(function () {
//CUSTOM HANDLING
});
To Directly answer your question:
$("#FORM").on('submit',function(evt){
evt.preventDefault();
});
This piece of code will prevent the normal form submitting.
My advice is to transform the Update and Delete buttons from type=submit to type=button. Like this:
<input type="button" value="Delete" id="Delete" class="submitDelete" />
This will prevent the form to be submitted when delete or update are pressed...
I wrote a jsfiddle for you:
https://jsfiddle.net/yL35bh10/
I recently prototyped a page needing image file upload. I found a package on GitHub that was easy to use and should provide the majority of the functionality you're needing.
https://github.com/blueimp/jQuery-File-Upload
My only question to you: Once a file is uploaded to the server, how are you going to know what to delete?
How can I prevent submitting a form in Angular until I receive a callback?
I have something along these lines:
<form method="post" action="http://example.com/external" ng-submit="submit()">
<input type="hidden" name="foo" value="{{bar}}" />
<input type="submit" />
</form>
Before submitting the form, I need to get the {{bar}} value from a local API call (using $http), and place it in the scope before allowing the actual form to submit (not POSTed using $http). How can this be done?
The form directive in Angular will wrap it in a formController and intercept it. You can still run your asynchronous code but you will need to reference the DOM form to submit it. I have an example fiddle with the solution - basically it sets up a button to submit the form, asynchronously sets the hidden field, then posts it.
Here is the relevant code:
MyController = function ($scope, MyService) {
$scope.boo = "";
$scope.submit = function () {
MyService.getAsync().then(function(result) {
$scope.boo = result;
document.myForm.action = "http://example.com/";
document.myForm.submit();
});
};
};
If you run a fiddle you will see the hidden field is populated:
http://jsfiddle.net/jeremylikness/T6B2X/
The "ugly" part of the code is the direct reference to:
document.myForm
If you wanted to clean this up, you could write your own directive that allows you to place an attribute on the form and interacts with a service to manipulate it. I.e. MyFormService and then I could do MyFormService.setAction(url) and MyFormService.submit() - that would be more cleaner and reusable but time wouldn't permit me to set that up for you.
As docs for ng-submit state:
Additionally it prevents the default action (which for form means
sending the request to the server and reloading the current page) but
only if the form does not contain an action attribute.
So remove that action attribute and handle it directly yourself in the submit() handler on the scope.
Make yours http call and in then success handler submit the form manually.
Can you not just use the submit button's onClick event to call a function that returns false if the submit is not allowed?
i.e. onClick='return CheckIfFooPopulated();'
Then in that function return false is foo as not yet been set or true if it OK to submit.
The problem is that ng-submit doesn't work with an action attribute, as stated in the docs.
Then, you can do whatever you want inside of submit() in your controller. However, I would use ng-model for the form input fields because it gives you better control over the model.
You would use this $scope.formModel to bind the input fields to the scope.
You could implement submit like that:
$scope.submit = function() {
$http.get("URL").success(function(data) {
$http.post("URL2", { model: $scope.formModel, bar: data.bar }).success(function() {
$location.path("/new-route");
});
});
}
There many possibilityes, but a less risky is to use ng-switch.
ng-switch do not load DOM if not needed.
<span ng-switch on="barNotEmpty">
<span ng-switch-when="true">
<form method="post" action="http://example.com/external" ng-submit="submit()">
<input type="hidden" name="foo" value="{{bar}}" />
</form>
</span>
<span ng-switch-default>
<form>
<input type="hidden" name="foo" value="{{bar}}" />
</form>
</span>
Suppose I have a form :
<form id="myForm" method="POST" action="/something/somewhere">
<input type="text" name="textField" />
<input type="submit" name="foo" value="bar" />
</form>
the /something/somewhere action does not return a complete html page, but just a fragment.
I would like to let the submit button do its posting job, but catch the result of this post and inject it somewhere in the DOM.
The jQuery submit happens before the form is actually submitted. An exemple of how it could work is:
$('#myForm').posted(function(result)
{
$('#someDiv').html(result);
});
Any way to do this?
Description
You can use the jQuery .post() and .serialize() method for that.
.post() Load data from the server using a HTTP POST request.
.serialize() Encode a set of form elements as a string for submission.
.preventDefault() If this method is called, the default action of the event will not be triggered. In your case the normal submit.
Sample
Html
<form id="myForm" method="POST" action="/My/MyActionMethod">
<input type="text" name="textField" />
<input type="submit"/>
</form>
<div id="someDiv"></div>
jQuery
$(function() {
$('#myForm').live('submit', function (e) {
var form = $(this);
e.preventDefault();
$.post(form.attr('action'), form.serialize(), function (result) {
$('#someDiv').html(result);
});
});
});
MVC Controller
public class MyController : Controller
{
[HttpPost]
public ActionResult MyActionMethod(FormCollection forms)
{
// do something with forms["textField"];
return Content("<b>Hello World!</b>");
}
}
If you have trouble getting it to work (thanks IE), try
event.preventDefault ? event.preventDefault() : event.returnValue = false;
More Information
jQuery.post()
jQuery.serialize()
event.preventDefault()
While you can hack a simple example yourself using .post and .serialize, if you want to do anything more than trivial, I'd suggest looking into this plugin, which is (from what github and the project page says) actively community-maintained by the jQuery folks.