Develop Reference

jQuery on click not performing actions as expected

I've faced a very weird issue today. I'm using below HTML code for a login form and I am using below JS to make sure that it performs operations as expected.
$('body').on('click', '.account__login-form-button', function() {
$('form#login input').each(function() {
if (isBlank($(this).val())) {
proceed = false;
toastr.error('Login credentials cannot be left blank.', 'Please Enter Login Details!', {
closeButton: !0,
showMethod: 'slideDown',
hideMethod: 'slideUp',
preventDuplicates: true,
positionClass: 'toast-bottom-right'
});
} else
proceed = true;
});
if (proceed) {
var buttonText = $('.account__login-form-button').text();
var username = $('.account__login-form-username').val();
var password = $('.account__login-form-password').val();
$('[class^=account__login-form-]').attr('disabled', true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="login">
<div class="form-group text-center text-success col-md-offset-4 col-md-4" style="cursor: pointer;">
<span id="create_account">
Don't have an account? Click here to create one!
</span>
</div>
<div class="form-group col-md-offset-4 col-md-4">
<input type="text" class="form-control account__login-form-username" name="account_login" placeholder="Username / Mobile / Email-ID">
</div>
<div class="form-group col-md-offset-4 col-md-4">
<input type="password" class="form-control account__login-form-password" name="account_login" placeholder="Enter Password">
<div class="pull-right" style="cursor: pointer;">
<span id="for-pass" name="account_login">
Forgot password?
</span>
</div>
<div class="clearfix"></div>
</div>
<div class="form-group col-md-offset-4 col-md-4">
<button name="account_login" class="btn btn-block btn-primary account__login-form-button">Login Now!</button>
</div>
</div>
For some reasons I don't know what the click event is not being triggered, I also saw if there is an error in the console but nothing there as well.
I even tried changing the class name but same also I'm using this code $( '[class^=account__login-form-]' ).attr( 'disabled', true ); as a direct inject from developers tool console to check if it works or not it does not work there as well. I'm working for a long time on JS but never encountered this weird issue.

A couple tiny mistakes...
There is no <form> element in your HTML. You only have a Bootstrap .form-group class used.
You should declare the proceed variable before the .each() loop.
After the loop, test the proceed value... Not inside.
To disable the inputs, use the *= (contains) operator instead of ^= (starts with)... Because the account__login-form-___ class is not always the first class in the class attribute.
And I changed the condition to test if an input is empty... isBlank() seems to be an excel function... Unless you coded it yourself.
$('body').on('click', '.account__login-form-button', function() {
// Add this here
var proceed = true
// There is no <form> element in your HTML.
$('#login input').each(function() {
if ($(this).val().trim() === "") {
proceed = false;
toastr.error('Login credentials cannot be left blank.', 'Please Enter Login Details!', {
closeButton: !0,
showMethod: 'slideDown',
hideMethod: 'slideUp',
preventDuplicates: true,
positionClass: 'toast-bottom-right'
});
}
}); // END each loop
// AFTER the each loop, test the "proceed" value
console.log("proceed", proceed)
if (proceed) {
var buttonText = $('.account__login-form-button').text();
var username = $('.account__login-form-username').val();
var password = $('.account__login-form-password').val();
console.log(buttonText, username, password)
$('[class*=account__login-form-]').attr('disabled', true);
console.log("inputs are now disabled")
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
<div id="login">
<div class="form-group text-center text-success col-md-offset-4 col-md-4" style="cursor: pointer;">
<span id="create_account">
Don't have an account? Click here to create one!
</span>
</div>
<div class="form-group col-md-offset-4 col-md-4">
<input type="text" class="form-control account__login-form-username" name="account_login" placeholder="Username / Mobile / Email-ID">
</div>
<div class="form-group col-md-offset-4 col-md-4">
<input type="password" class="form-control account__login-form-password" name="account_login" placeholder="Enter Password">
<div class="pull-right" style="cursor: pointer;">
<span id="for-pass" name="account_login">
Forgot password?
</span>
</div>
<div class="clearfix"></div>
</div>
<div class="form-group col-md-offset-4 col-md-4">
<button name="account_login" class="btn btn-block btn-primary account__login-form-button">Login Now!</button>
</div>
</div>

JavaScript/jQuery Change Class of A Tag Specifically When Two Input Fields Are Both Filled In

I have the following HTML:
<div class="field text-left">
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Name</label>
<input type="text" id="name" name="name" placeholder="Name"/>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Surname</label>
<input type="text" id="surname" name="surname" placeholder="Surname"/>
</div>
</div>
<div class="field">
<div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0">
<div class="col-lg-12 col-sm-12 col-xs-12">
Next Step
</div>
</div>
</div>
The above is in a multi-step form with other values and hidden panel.
I am trying to figure out how to remove the Class disabled from the a tag with id fullnameBtn only when both surname and name fields are entered using JavaScript or jQuery.
Can someone help on the right path?
Thanks

1-check if both the fields are filled
2- then remove the "selected" class
if($("name") && $("surname")){
$("#fullnameBtn").removeClass("disabled");
}

Here is something to toggle class [but still i guess you want to disable and enable the nextPage link for which you have to manually handle in disabled class]
$(document).ready(function(){
// lets monitor the input of values for inputs you can use a class also
$('input').on('input',function(){
// added for bit of simplicity or you can directly get valuess
var surname = $('#surname').val();
var name = $('#name').val();
if(surname != "" && name != "" )
{
// values seems filled remove class
$('#fullnameBtn').removeClass('disabled');
}
else
{
// user has emptied some input so add class again.
$('#fullnameBtn').addClass('disabled');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field text-left">
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Name</label>
<input type="text" id="name" name="name" placeholder="Name"/>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Surname</label>
<input type="text" id="surname" name="surname" placeholder="Surname"/>
</div>
</div>
<div class="field">
<div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0">
<div class="col-lg-12 col-sm-12 col-xs-12">
Next Step
</div>
</div>
</div>

Error: [ng:areq] Argument 'UsersSettingsController' is not a function, got undefined

I'm trying to create a edit profile section in angularjs. For that i create in my users controller a section to make a rest api call to get info to inject on the page and later i will do the parte of changePassword also.
At the moment i'm getting the error "Error: [ng:areq] Argument 'UsersSettingsController' is not a function, got undefined" and I cant undestand why.
editAccount view:
<div class="row" ng-controller="UsersSettingsController as usersSettingsCtrl" >
{{userInfo}}
<!-- edit form column -->
<div class="col-md-9 personal-info">
<h3>Personal info</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-3 control-label">Username:</label>
<div class="col-md-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.username}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Organization:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.organization_name}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Permission Group:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.permission_group_name}}" readonly>
</div>
</div>
<div class="form-group" nf-ig="user.organization_permission_group_id=='df0417e3-ce36-41ca-9f13-f58c1a3a96f5'">
<label class="col-lg-3 control-label">Root:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.data.root}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.username}}" readonly>
</div>
</div>
<hr>
<h4>Change Password</h4>
<br>
<form name="newPasswordForm" role="form" ng-submit="newPasswordForm.$valid && ok()" novalidate>
<div class="form-group">
<label class="col-md-3 control-label">Change Password:</label>
<div class="col-md-8">
<input type="password" name="newPassword" ng-model="password.new"
ng-minlength="6" required />
<span class="help-block"
ng-show="newPasswordForm.newPassword.$dirty && newPasswordForm.newPassword.$invalid">
Please enter a new password, it must be at least 6 characters long.
</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Confirm password:</label>
<div class="col-md-8">
<input type="password" name="newPasswordConfirm"
ng-model="password.confirm" ng-minlength="6"
value-matches="password.new" required />
<span class="help-block"
ng-show="newPasswordForm.newPasswordConfirm.$dirty && newPasswordForm.newPasswordConfirm.$invalid">
Please enter the same password again to confirm.
</span>
</div>
</div>
</form>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input type="button" class="btn btn-primary" style="float:right" value="Save Changes">
<div ng-messages="registrationForm.confirmPassword.$error" ng-messages-include="messages.html"></div>
</div>
</div>
</form>
</div>
</div>
usersController:
app.controller('UsersSettingsController',['$scope', 'user', function ($scope, user) {
$http.get('/api/users/userInfo/'+user.id).success(function (data) {
console.log("user info ",data);
$scope.userInfo = data;
});
//changePassword call to rest api
}]);
usersDirective:
(function() {
var app = angular.module('userSettings', []);
app.directive('valueMatches', ['$parse', function ($parse) {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ngModel) {
var originalModel = $parse(attrs.valueMatches),
secondModel = $parse(attrs.ngModel);
// Watch for changes to this input
scope.$watch(attrs.ngModel, function (newValue) {
ngModel.$setValidity(attrs.name, newValue === originalModel(scope));
});
// Watch for changes to the value-matches model's value
scope.$watch(attrs.valueMatches, function (newValue) {
ngModel.$setValidity(attrs.name, newValue === secondModel(scope));
});
}
};
}]);
})();

AngularJS: Submit button requires two clicks to work

I have a submit button on my form but for some weird reason it requires me to click on the button twice before it calls the save function underneth, I am using Pug for my HTML
Here is my HTML template:
<form ng-submit="save()">
<div class="form-group">
<div class="row">
<div class="col col-md-6">
<ol ng-model="service.category" title="Select a category" class="nya-bs-select">
<li nya-bs-option="category in categories.rows" class="nya-bs-option"><a> <span>{{category.name}} </span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
</ol>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col col-md-6">
<div class="input-group"><span class="input-group-addon">Service Name</span>
<input type="text" ng-model="service.name" class="form-control"/>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col col-md-6">
<textarea ng-model="service.description" placeholder="Service Description" rows="10" class="form-control"></textarea>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col col-md-6">
<button type="submit" value="Save" class="btn btn-default"> Save</button>
</div>
</div>
</div>
</form>
The save function called is as
angular.module('App.controllers')
.controller('UpdateServiceCtrl', [
'$scope', '$state', 'ServicesService', 'Notification',
function ($scope, $state, ServicesService, Notification) {
$scope.service = $scope.$parent.service;
$scope.categories = $scope.$parent.categories;
/**
* Edits a service
* #param {integer} serviceID Id of the service to be edited
* #return {undefined} Does not return any values
*/
$scope.save = function () {
$scope.service.category_id = $scope.service.category.id;
ServicesService.save($scope.service, $scope.service.id)
.then(function (result) {
$state.reload();
})
}
}]);

You can disable the submit button after it clicked first time using
ng-disabled='isButtonEnabled' your html.
Modify your save like this
$scope.save = function () {
$scope.isButtonEnabled = false;
$scope.service.category_id = $scope.service.category.id;
ServicesService.save($scope.service, $scope.service.id)
.then(function (result) {
$state.reload();
})
}
Let me know if it doesn't works.

Angular get all form input value

I have this form:
<form class="form-horizontal" role="form" name="form" ng-submit="update(profile)">
<div class="form-group">
<label class="col-md-2 control-label">Facebook</label>
<div class="col-md-10">
<div class="input-group">
<input type="text" ng-model="profile.facebook" class="form-control" placeholder="Facebook" />
<span class="input-group-btn">
<button ripple-button color="facebook" icon="facebook"></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Instagram</label>
<div class="col-md-10">
<div class="input-group">
<input type="text" ng-model="profile.instagram" class="form-control" placeholder="Instagram" />
<span class="input-group-btn">
<button ripple-button color="instagram" icon="instagram"></button>
</span>
</div>
</div>
</div>
</form>
My Controller:
Profile.get((resp)=>{
$scope.profile = resp.result;
});
//resp.result is: {"id":"Hf561b6fd32aec6ea","name":"Example","nickname":"Example 1", "facebook":"example","instagram":"example"}
$scope.update = (profile) => {
console.log(profile);
}
Here's the workflow: First all I will get profile from the server and put all ng-model profile.* value. And user can edit the value and submit.
The Problem: I want to get all value from the form at once. My ng-submit is working properly and it return profile value.
My question is how can I only get the form key and value based on form instead of getting all the profile key?
my console.log return this:
{"id":"Hf561b6fd32aec6ea","name":"Example","nickname":"Example 1", "facebook":"thisischange","instagram":"thisischange"}
Thanks.

You can get it using jQuery:
var object = {};
$('.form-horizontal').serializeArray().forEach(pair) {
object[pair.name] = pair.value;
});