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.
How can I display a message on the redirected page after submit a form?
I have a form on my page that after submitting the form it redirects to the index.html. After redirecting I have a div with a message that is set to display:none. What I'm trying to do is to set to display:block the div for a couple seconds then set the display back to none. Here is what I have so far:
<input type="hidden" name="_next" value="index.html">
<button onclick="emailSubmit()" class="sub-button" type="submit" value="Send Message" style="margin-bottom: -35px;">Send Message</button>
<script>
function emailSubmit() {
setTimeout(function(){ document.getElementById("confirmation").style.display = "block"; }, 500);
setTimeout(function(){ document.getElementById("confirmation").style.display = "none"; }, 3000);
}
</script>
Cold You please share Your code? How does your html file Look like?
Where Do You keep Your message?
As far You only hidden and show dom element. It is Look like the div is empty.
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 am making a web app and instead of routing to a whole new page when a submit button is pressed, I just want to display something else over the mdDialog or form that I already have.
So far I am mostly just planning it out, but some pseudocode that I have is something like this:
HTML:
<form [formGroup]="firstFormUserSees">
**input containers and what not**
</form>
<div>
<button md-raised-button (click)="submit()"[disabled]="firstFormUserSees.invalid>Submit</button>
</div>
<form [formGroup]="secondFormUserSees" *ngIf= **something**>
**second form stuff here**
</form>
And in the typeScript there would be a method called submit(), but I just am not sure how to go about it and am new to TS and angular 2
You can use *ngIf.
For example:
Above your constructor:
show_my_form = true;
HTML
<form [formGroup]="firstFormUserSees" *ngIf="show_my_form">
**input containers and what not**
</form>
<div>
<button md-raised-button (click)="submit()"[disabled]="firstFormUserSees.invalid>Submit</button>
</div>
<form [formGroup]="secondFormUserSees" *ngIf= **something**>
**second form stuff here**
</form>
And in the function you trigger after a submit
this.show_my_form = false;
You can show and hide the content by changing the boolean. In your case hide the form and show another element. (You need to create a boolean for the other elements aswell)
I am trying to set the focus of an input field inside my form when I reveal a modal using ZURB Foundation framework. I am really truly sorry if this question has been asked before I've been having problems finding a solution to this for a while.
This is what I have:
<div id="myModal" class="reveal-modal" data-reveal>
<form action="php_scripts/post_message.php" method="POST" name="modalForm" id="modalForm">
<label for="curse">Пиши си овде:</label>
<textarea type="text" name="curse" id="curse" placeholder="Напиши што ти душа сака.." required="true"></textarea>
<input type="submit" name="submit" class="button secondary tiny right" value="OK">
</form>
<a class="close-reveal-modal">×</a>
</div>
Everytime I click a button this modal pops up and I want my input field (textarea) to be in focus when I do that. I tried adding the autofocus attribute and I also tried using javascript to set the focus when I click the button or when this div shows or loads (onshow and onload methods). Nothing seems to work for me so any help will be much appreciated.
I think you'll have to use JS or jQuery to handle the opened event like this..
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
var modal = $(this);
modal.find('[autofocus]').focus();
});
Demo: http://codeply.com/go/Ahs4oZDsWn
With Foundation 6 the event name has changed:
$(document).on('open.zf.reveal', '[data-reveal]', function () {
console.log('asdfasdfsadf')
var modal = $(this);
modal.find('[autofocus]').focus();
});