I have a form in Angular that has two buttons tags in it. One button submits the form on ng-click. The other button is purely for navigation using ng-click. However, when this second button is clicked, AngularJS is causing a page refresh which triggers a 404. I’ve dropped a breakpoint in the function and it is triggering my function. If I do any of the following, it stops:
If I remove the ng-click, the button doesn’t cause a page refresh.
If I comment out the code in the function, it doesn’t cause a page refresh.
If I change the button tag to an anchor tag (<a>) with href="", then it doesn’t cause a refresh.
The latter seems like the simplest workaround, but why is AngularJS even running any code after my function that causes the page to reload? Seems like a bug.
Here is the form:
<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
<fieldset>
<div class="control-group">
<label class="control-label" for="passwordButton">Password</label>
<div class="controls">
<button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">Change</button>
</div>
</div>
<div class="buttonBar">
<button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">Save</button>
</div>
</fieldset>
</form>
Here is the controller method:
$scope.showChangePassword = function() {
$scope.selectedLink = "changePassword";
};
If you have a look at the W3C specification, it would seem like the obvious thing to try is to mark your button elements with type='button' when you don't want them to submit.
The thing to note in particular is where it says
A button element with no type attribute specified represents the same thing as a button element with its type attribute set to "submit"
You can try to prevent default handler:
html:
<button ng-click="saveUser($event)">
js:
$scope.saveUser = function (event) {
event.preventDefault();
// your code
}
You should declare the attribute ng-submit={expression} in your <form> tag.
From the ngSubmit docs
http://docs.angularjs.org/api/ng.directive:ngSubmit
Enables binding angular expressions to onsubmit events.
Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page).
I use directive to prevent default behaviour:
module.directive('preventDefault', function() {
return function(scope, element, attrs) {
angular.element(element).bind('click', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
});
And then, in html:
<button class="secondaryButton" prevent-default>Secondary action</button>
This directive can also be used with <a> and all other tags
You can keep <button type="submit">, but must remove the attribute action="" of <form>.
I wonder why nobody proposed the possibly simplest solution:
don't use a <form>
A <whatever ng-form> does IMHO a better job and without an HTML form, there's nothing to be submitted by the browser itself. Which is exactly the right behavior when using angular.
Add action to your form.
<form action="#">
This answer may not be directly related to the question. It's just for the case when you submit the form using scripts.
According to ng-submit code
var handleFormSubmission = function(event) {
scope.$apply(function() {
controller.$commitViewValue();
controller.$setSubmitted();
});
event.preventDefault();
};
formElement[0].addEventListener('submit', handleFormSubmission);
It adds submit event listener on the form.
But submit event handler wouldn't be called when submit is initiated by calling form.submit(). In this case, ng-submit will not prevent the default action, you have to call preventDefault yourself in ng-submit handler;
To provide a reasonably definitive answer, the HTML Form Submission Algorithm item 5 states that a form only dispatches a submit event if it was not submitted by calling the submit method (which means it only dispatches a submit event if submitted by a button or other implicit method, e.g. pressing enter while focus is on an input type text element).
See Form submitted using submit() from a link cannot be caught by onsubmit handler
I also had the same problem, but gladelly I fixed this by changing the type like from type="submit" to type="button" and it worked.
First Button submits the form and second does not
<body>
<form ng-app="myApp" ng-controller="myCtrl" ng-submit="Sub()">
<div>
S:<input type="text" ng-model="v"><br>
<br>
<button>Submit</button>
//Dont Submit
<button type='button' ng-click="Dont()">Dont Submit</button>
</div>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Sub=function()
{
alert('Inside Submit');
}
$scope.Dont=function()
{
$scope.v=0;
}
});
</script>
</body>
Just add the FormsModule in the imports array of app.module.ts file,
and add import { FormsModule } from '#angular/forms'; at the top of this file...this will work.
When clicking on the checkbox it hides currently displaying DIV & shows hidden DIV. After this hidden div displayed it has a form to submit on button click.
My problem is when i click on this submit button, the form is hiding again. I have tried stopPropagation(), preventDefault() and many ways & problem still exist. When I use preventDefault() then it shows the div without hiding but the submit is disabled.
I saw many questions related this.but nothing works to me. I want to submit form without hiding the div which the form resides. I'm a beginner with jquery.
$(function() {
$("#active").click(function() {
if ($(this).is(":checked")) {
$("#donorTeam").show();
$("#donor").hide();
} else {
$("#donorTeam").hide();
$("#donor").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="active"> select type
<div id="donor" style="display:block;"></div>
<div id="donorTeam" style="display:none;">
<form>
<button type="submit" id="sub">Add</button>
</form>
</div>
Thanks in advance.
You could try either of these 2 approaches
1.
$(function () {
$('#donorTeam form').on('submit',function (e) {
// Ajax call here
e.preventDefault();
});
});
2 . add onsubmit="return false" to the form attribute
<form onsubmit="return false">
<button type="submit" id="sub">Add</button>
</form>
I was able to implement auto-focus when you click a button taking you to the modal. Due to the following code:
AngularJS:
app.directive('autoFocus', function($timeout) {
return {
restrict: 'AC',
link: function(_scope, _element) {
$timeout(function(){
_element[0].focus();
}, 0);
}
};
});
HTML:
<input type="text" auto-focus>
However when applying the same logic to input boxes that are available after clicking on a button and going to a separate page, it doesn't seem to work. Has anyone encountered this before or experienced the same issue?
I have used the built in autofocus like this
<input ... autofocus="{{$index==0}}"/>
Have you tried that? No custom directive.
First of all, I searched here for the past hour to see if I found an answer to my question before I posted, but you're my last hope! I found a piece of code that nearly works as I want it, but not quite.
I need to get rid of the fade-in and fade-out.
I need the script to check onload which radio button is checked and show the correct div.
Here is my code:
<input type="radio" name="d_method" class="c_email"/>Email
<input name="d_method" type="radio" class="c_collection"/>Colletion
<input name="d_method" type="radio" class="c_post"/>Post
<div id="c_email" style="display:none;">
email textbox
</div>
<div id="c_collection" style="display:none;">
collection textbox
</div>
<div id="c_post" style="display:none;">
post textbox
</div>
And here is the jquery:
$(':radio').change(function() {
var itemSelector = '#' + $(this).attr('class');
$('div').stop().fadeOut(function() {
$(itemSelector).fadeIn();
});
});
Try this
$(function(){
$(':radio').click(function() {
$('#' + $(this).attr('class')).fadeIn().siblings('div').hide();
})
.filter(':checked').click();//trigger the click event
});
Working demo - http://jsfiddle.net/H8VVP/1/
Suppose I have input[type=file] element and I want to intercept onclick event and prevent file dialog from appearing if conditions are not met. Is it possible? And why, if - not?
Soufiane's code requires that you have a Javascript library called jQuery on your page. If you don't have it, you can get it at http://www.jquery.com or use something in plain Javascript:
HTML
<input type="file" id="openf" />
JS:
document.getElementById('openf').onclick = function (e) { e.preventDefault(); };
HTML:
<input type="file" class="openf" />
JS:
$('.openf').click(function(e){
e.preventDefault();
});