We Keep Coding

Avoid multiple clicks on button in AngularJS

I have a button which on click will save the form information.
The problem is, user instead of clicking 1's on the "Save" button clicks on it multiple times as long as it disappears on the screen. With this, I am saving same form which inturn throw duplicate exceptions.
Please help me. Thanks in advance.
<button ng-click="myFunc()">Save</button>
In above code, myFunc() is triggered with the number of times user clicks.

Use a $scope variable and ng-disabled to update the click and check for the variable,
<button ng-click="myFunc()" ng-disabled="buttonClicked"></button>
Controller
$scope.buttonClicked = true;

I think disable the button after the first click will help you to solve this issue.

That's in case you want this feature related to multiple buttons:
JS:
$scope.disabled = {};
$scope.myFunc = function(identifier) {
$scope.disabled[identifier] = 1;
...
}
HTML:
<button ng-click="myFunc(identifier)" ng-disabled="disabled.identifier"></button>
In case that you want this feature only on one button:
JS:
$scope.disabled = 0;
$scope.myFunc = function() {
$scope.disabled = 1;
...
}
HTML
<button ng-click="myFunc()" ng-disabled="disabled"></button>

You can disable your submit button after the first click to prevent duplicate entry.
For Example, you have HTML something like,
<div ng-app="mydemo" ng-controller="myController">
<button type="submit" ng-disabled="isDisabled" ng-click="myFunc()"> Submit</button>
</div>
angular.module('mydemo', [])
.controller('myController',function($scope){
$scope.isDisabled = false;
$scope.disableButton = function() {
$scope.isDisabled = true; // To disable Button
}
});
This way you can disable button. It will surely work for you. Thanks.

create a directive for this, so that it can be reused
app.directive('clickAndDisable', function() {
return {
scope: {
clickAndDisable: '&'
},
link: function(scope, iElement, iAttrs) {
iElement.bind('click', function() {
iElement.prop('disabled',true);
scope.clickAndDisable().finally(function() {
iElement.prop('disabled',false);
})
});
}
};
});
so use click-and-disable="myFunc()" rather than ng-click

Hiding the form after first click resolved this issue.

jQuery tabs and validate

I am using jQuery tabs and validating all fields are filled in prior to allow the user to move to the next tab. On a few of the tabs there are options where the user can choose from multiple options and, sometimes, the user will click option 1 and mean option 2 but when they try and click the previous button this validates the fields and won't let them until they have filled in all the fields which is a rubbish UX.
I would like to only validate on clicking a next button but not on clicking a previous button.
<a class="btn nexttab navbutton" href="#step1">Previous</a>
<a class="btn nexttab navbutton" href="#step3">Next</a>
Here is the code I am using currently:
var validator = $("#start").validate();
var tabs = $("#tabs").tabs({
select: function(event, ui) {
var valid = true;
var current = $(this).tabs("option", "selected");
var panelId = $("#tabs ul a").eq(current).attr("href");
$(panelId).find(":input").each(function() {
console.log(valid);
if (!validator.element(this) && valid) {
valid = false;
}
});
return valid;
}
});
To try and overcome this I added a class called next button to the next buttons only and then tried to change this line which I assume checks any input:
$(panelId).find(":input").each(function() {
to:
$(".nextbutton").click(function() {
but it allows the user to move to the next screen without having to fill in all the fields.
How can I make it so only forward movement is validated?
http://jsfiddle.net/553xmzh3/1/

I would like to only validate on clicking a next button but not on clicking a previous button. .... How can I make it so only forward movement is validated?
Simply put a cancel class on your "previous" button. All validation rules will automatically be ignored when a submit button contains a cancel class. However, the submitHandler will fire as if the form is valid.
<input type="submit" value="PREVIOUS" class="cancel" /><!--// This submit will not trigger validation //-->
<input type="submit" value="NEXT" /><!--// This submit will trigger validation //-->
Working DEMO: http://jsfiddle.net/4zdL8ha3/
EDIT:
Although it still works, using class="cancel" has been officially deprecated and replaced with formnovalidate="formnovalidate"
<input type="submit" value="PREVIOUS" formnovalidate="formnovalidate" />
Working DEMO: http://jsfiddle.net/4zdL8ha3/1/
Since you're using anchor tags instead of type="submit" elements, this solution will not work for you. It would be best to replace your anchor tags with a button element. That way, using CSS, you can style the button to look exactly the same as an anchor.
<button type="submit" class="btn nexttab navbutton" formnovalidate="formnovalidate">Previous</button>
<button type="submit" class="btn nexttab navbutton">Next</button>
Working DEMO: http://jsfiddle.net/4zdL8ha3/2/
EDIT:
If you must have anchor tags in place of type="submit" buttons, then you need to write the appropriate click handlers and check the form's validity only on the "next" button handlers. Using the .valid() method also simplifies your code by removing your custom validation tester from the tab switcher function.
$(".nexttab").click(function () { // NEXT BUTTON
if ($("#start").valid()) { // TEST VALIDATION
$("#tabs").tabs("select", this.hash);
}
});
$(".cancel").click(function () { // PREVIOUS BUTTON - NO VALIDATION TEST
$("#tabs").tabs("select", this.hash);
});
Initializations:
var validator = $("#start").validate();
var tabs = $("#tabs").tabs({
select: function (event, ui) {
var current = $(this).tabs("option", "selected");
var panelId = $("#tabs ul a").eq(current).attr("href");
return true;
}
});
DEMO: http://jsfiddle.net/553xmzh3/3/

Avoid posting back when user clicks html button

I want to avoid posting back when user clicks an html button. because i want show one pop up using javascript. I dont want postback when the button is clicked.
function ShowEditChoicesPopup() {
// I want to show some pop up here.
$("popupdiv").show();
return false;
}
And the markup am using is:
<button onclick="javascript:ShowEditChoicesPopup();"> Edit Choices </button>
Please suggest some idea.

Apply event.preventDefault();
function ShowEditChoicesPopup(event) {
event.preventDefault();
$("popupdiv").show();
}

Try with the below code snippet.
<button onclick="javascript:return ShowEditChoicesPopup();">
OR
<button onclick="javascript:return ShowEditChoicesPopup(); return false;">
OR
<button onclick="javascript:ShowEditChoicesPopup(); return false;">

Try:
function ShowEditChoicesPopup() {
// I want to show some pop up here
$("popupdiv").show();
return false;
}
return false;
}
You need a second return false for ShowEditChoicesPopup() which should cancel form submission. This assumes the code is in a <form> block.

Use event.preventDefault(); which will prevent default behaviour of the element and performs specified function

Follow the example:
http://jsfiddle.net/guinatal/ct8uS/1/
HTML
<form>
<button onclick="return ShowEditChoicesPopup();"> Edit Choices </button>
<div id="popupdiv" style="display:none">popupdiv</div>
</form>
JS
function ShowEditChoicesPopup() {
// I want to show some pop up here
$("#popupdiv").show();
return false;
}

KnockoutJS click binding never called

function UserModel() {
self.forgeTransactions = function() {
console.log("forgeTransaction()");
}
self.navigateToNew() = function {
console.log("navigateToNew()");
}
}
ko.applyBindings(new UserModel());
<button class="btn" style="float: right" data-bind:"click: forgeTransactions">Add fake transaction</button>
The problem with this code is that forgeTransaction is never called whilst if i change the click binding to navigateToNew i can clearly see "navigateTwo" on the console.
Why is this happening?
Note: I can attach the entire source if needed.

You should write data-bind= not data-bind:

Your function is called forgeTransactions but you are attempting to call forgeTransaction in the button data-bind.

Activate onchange after changing content with javascript

Why wouldn't onChange function of an input be activated when the value of the input is changed by javascript? For example why when clicking on the button alert wouldn't happen?
<html>
<body>
<input type="text" id="myInput" onchange="alert(1)" />
<button onclick = "document.getElementById('myInput').value = 'ads'">click</button>
</body>
</html>
How can I make the onchange function work then?
edit:
I now understand event won't be triggered automatically, how can I call it(jquery too) ?

Scripted value changes don't trigger an event. You have to manually trigger an event.
jQuery: $('#myInput').trigger('change');
Add the following code to the onchange event:
var input = document.getElementById("myInput");
if(input.fireEvent) input.fireEvent("onchange");
else {
var ev = document.createEvent('HTMLEvents');
ev.initEvent("change", true, false);
input.dispatchEvent(ev);
}
So, combined with your code (you should actually separate the JS code from the HTML):
<button onclick="var input = document.getElementById('myInput');input.value = 'ads';if(input.fireEvent)input.fireEvent('onchange');else{var ev=document.createEvent('HTMLEvents');ev.initEvent('change',true,false);input.dispatchEvent(ev);}">click</button>