We Keep Coding

Unable to Remove Class for Span Element

I'm trying do remove class "bg-color-disable" for #filenameRPT but nothing I tried work. I have used $("#parentRPT > span#filenameRPT").removeClass("bg-color-disable"); and $("#filenameRPT").removeClass("bg-color-disable"); but no lucks. Any idea?
<div class="two-row mb-3">
<div id="parentRPT" class="input-group bg-color-disable">
<span class="input-group-addon gi data-gi-size gi-file-plus"></span>
<span id="filenameRPT" class="bg-color-disable">
Upload REPORT
<span class="fa fa-arrow-circle-right text-primary ml-1 mr-1"></span>
<a name="rpt" href="#">No File Exists</a
<input class="hidden" name="delete_RPT" value="not_deleted" type="text"/>
</span>
<span id="deleteRPT" class="fa fa-times text-danger hidden" title="Delete"></span>
<label class="input-group-addon has-float-label" for="file-uploadRPT">
Browse
<input id="file-uploadRPT" name="FileToUploadRPT" type="file" accept="application/pdf">
</label>
</div>
</div>
Crazy thing is I was able to remove "bg-color-disable" for #parentRPT using $("#parentRPT").removeClass("bg-color-disable"); but using $("#filenameRPT").removeClass("bg-color-disable"); didn't work for element #filenameRPT. Why?

I think your issue is with improper closing of anchor tag.
Removing class is straight forward.
window.onload = removeClass()
function removeClass() {
console.log('before removal',document.getElementById('filenameRPT').classList);
document.getElementById('filenameRPT').classList.remove('bg-color-disable')
console.log('after removal',document.getElementById('filenameRPT').classList);
}
<div class="two-row mb-3">
<div id="parentRPT" class="input-group bg-color-disable">
<span class="input-group-addon gi data-gi-size gi-file-plus"></span>
<span id="filenameRPT" class="bg-color-disable">
Upload REPORT
<span class="fa fa-arrow-circle-right text-primary ml-1 mr-1"></span>
<a name="rpt" href="#">No File Exists</a>
<input class="hidden" name="delete_RPT" value="not_deleted" type="text"/>
</span>
<span id="deleteRPT" class="fa fa-times text-danger hidden" title="Delete"></span>
<label class="input-group-addon has-float-label" for="file-uploadRPT">
Browse
<input id="file-uploadRPT" name="FileToUploadRPT" type="file" accept="application/pdf">
</label>
</div>
</div>

Prevent from dynamically changings with ng-model

I have some fields to edit user' data. One of the field is also used in breadcrumb:
I use ng-model to bind all the fields:
...
<ol class="breadcrumb">
<li>Home</li>
<li>{{user.name}}</li>
<li class="active">Profile</li>
<li class="active">Edit</li>
</ol>
<hr>
<form role="form" class="col-sm-2">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" ng-model="user.name" placeholder="Username" class="form-control">
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" ng-value="user.birthday" placeholder="Birthday" class="form-control">
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" ng-value="user.city" placeholder="City" class="form-control">
</div>
<button id="submit" ng-click="saveUser(user)" class="btn btn-success pull-right">Save</button>
</form>
...
The problem and also the right behavior of ng-model changes the name value of breadcrumb on input updating:
Is it possible to set value in breadcrumb as a static and prevent it from changing?
The actual result I want to achieve:

Answer is that I should use one-time data-binding using :: on my li element in the breadcrumb like so:
<li>{{::user.name}}</li>
It prevents data from future changing once it was rendered.

How to change button text by verifying data are same or not when edited

I need one help.
I need to change button text according to some condition using Javascript/Jquery. I will explain my code below.
Here, when a user is selects the drop-down list, the 3 input field is filled with some value. the JavaScript code is given below.
function setValue(){
var arrField=[];
if(document.getElementById('uinfo').value==1){
document.getElementById('uname').value="Ram";
document.getElementById('uemail').value="subhra#gmail.com";
document.getElementById('ucity').value="cuttuck";
arrField.push({'uname':document.getElementById('uname').value,'uemail':document.getElementById('uemail').value,'ucity':document.getElementById('ucity').value});
}else{
document.getElementById('uname').value="";
document.getElementById('uemail').value="";
document.getElementById('ucity').value="";
var arrField=[];
}
}
<select onchange="setValue();" id="uinfo">
<option value="">Select</option>
<option value="1">User Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail"/>
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="email" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button type="button" class="btn btn-success" onclick="checkAllValue();">
<i class="icon-user icon-white"></i> Add
</button>
<button type="button" class="btn btn-success" onclick="checkAll();">
<i class="icon-user icon-white"></i> Check
</button>
Here I need that when a user will click on the Check button it will check for the original value after the drop down select if all are as it was then the Add button text will remain as Add.
If any field value has changed after selecting that button text will change to Update.
Please help me.

Try this
function setValue(){
var arrField=[];
if(document.getElementById('uinfo').value==1){
document.getElementById('uname').value="Ram";
document.getElementById('uemail').value="subhra#gmail.com";
document.getElementById('ucity').value="cuttuck";
arrField.push({'uname':document.getElementById('uname').value,'uemail':document.getElementById('uemail').value,'ucity':document.getElementById('ucity').value});
}else{
document.getElementById('uname').value="";
document.getElementById('uemail').value="";
document.getElementById('ucity').value="";
var arrField=[];
}
}
function checkAll(){
var uname = $('#uname').val();
var email = $('#uemail').val();
var city = $('#ucity').val();
var count = 0;
if(uname!='Ram')
{
count++;
}
else if(email!='subhra#gmail.com')
{
count++;
}
else if(city!='cuttuck')
{
count++;
}
if(count>0)
{
$('#add').text('UPDATE');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select onchange="setValue();" id="uinfo">
<option value="">Select</option>
<option value="1">User Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail"/>
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="email" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button id="add" type="button" class="btn btn-success" onclick="checkAllValue();">
<i class="icon-user icon-white"></i> Add
</button>
<button type="button" class="btn btn-success" onclick="checkAll();">
<i class="icon-user icon-white"></i> Check
</button>

var arrField = new Array();
function setValue() {
if (document.getElementById('uinfo').value == 1) {
document.getElementById('uname').value = "Ram";
document.getElementById('uemail').value = "subhra#gmail.com";
document.getElementById('ucity').value = "cuttuck";
arrField.push({
'uname': document.getElementById('uname').value,
'uemail': document.getElementById('uemail').value,
'ucity': document.getElementById('ucity').value
});
} else {
document.getElementById('uname').value = "";
document.getElementById('uemail').value = "";
document.getElementById('ucity').value = "";
arrField = [];
}
$('#Save').text('Add');
}
$(document).ready(function() {
$('#uname, #uemail, #ucity').change(function() {
if (arrField[0].uname == $('#uname').val() && arrField[0].uemail == $('#uemail').val() && arrField[0].ucity == $('#ucity').val())
$('#Save').text('Add');
else
$('#Save').text('Update');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select onchange="setValue();" id="uinfo">
<option value="">Select</option>
<option value="1">User Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="text" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button type="button" class="btn btn-success" onclick="checkAllValue();" id="Save">
<i class="icon-user icon-white"></i> Add
</button>

The (additional) jQuery code you're looking for would be something like this. Note that I added the class "changebtn" to the target button to make it work:
$(document).ready(function(){
// Save original value when document is ready
var original = $("#uinfo").val();
// Update Button when current value is different
// from original as the selection changes
$("#uinfo").on("change", function(){
if ($(this).val() != original) {
$(".changebtn").html("Update");
} else {
// Reset Button when User switches back to original
$(".changebtn").html("Add");
}
});
});
JSFiddle demo: https://jsfiddle.net/0yj5y5sb/2/

Try this way
//Object, key based on select options
var popData= {
'user-info':
{uname: 'User1', uemail: 'user1#test.com', ucity: 'user city'}
,
'emp-info':
{uname: 'Emp1', uemail: 'emp1#test.com', ucity: 'emp city'}
};
//Select change that will update values
$('#uinfo').change(function(){
$.each(popData[$(this).val()], function( i, val ) {
$('#'+i).val(val);
});
});
//When input change check based on the conditions
$('button.check').click(function(){
//Check if any changes in the fields
if(
popData[$('#uinfo').val()].uname != $('#uname').val() ||
popData[$('#uinfo').val()].uemail != $('#uemail').val() || popData[$('#uinfo').val()].ucity != $('#ucity').val()
)
{
$('button.add').text('Update');
}
//Check if no changes in the fields
else if(popData[$('#uinfo').val()].uname == $('#uname').val() &&
popData[$('#uinfo').val()].uemail == $('#uemail').val() && popData[$('#uinfo').val()].ucity == $('#ucity').val())
{
$('button.add').text('Add');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="uinfo">
<option value="">Select</option>
<option value="user-info">User Info</option>
<option value="emp-info">Emp Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail"/>
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="email" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button type="button" class="btn check">
<i class="icon-user icon-white"></i> Check
</button>
<button type="button" class="btn btn-success add">
<i class="icon-user icon-white"></i> Add
</button>

How to get the value of input and sum the total

This i'm trying to do, I want to get all the data in input fields using javascript and put the sum of all the fields in another input. But im getting an error, the value of total is null or blank. Can someone help me about this? Or give me clue what's causing the error.
Here my html code for the inputs i will not include all of the fields to lessen the code.
var ma = +(document.getElementById('majore').textContent);
var qu = +(document.getElementById('quize').textContent);
var hss = +(document.getElementById('hs').textContent);
var attt = +(document.getElementById('att').textContent);
var laboo = +(document.getElementById('labo').textContent);
var acttt = +(document.getElementById('act').textContent);
var recitss = +(document.getElementById('recits').textContent);
var total = ma + qu + hss + attt + laboo + acttt + recitss;
document.getElementById('totals').innerHTML = total;
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well quize">
<label for="quize">Quizzes</label>
<div class="input-group">
<input type="text" class="form-control quize" id="quize"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well hos">
<label for="hs">Homework/Seatwork</label>
<div class="input-group">
<input type="text" class="form-control hs" id="hs"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well total">
<label for="total">Total/label>
<div class="input-group">
<input type="text" class="form-control total" id="totals"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
here's my js. this code is inside in the `success function` of `ajax`.

Use value property, not textContent/innerHTML to get the value from Input-Element
Also note that you are accessing few elements which are not in the DOM, I have removed those statements from Demo
var ma = +(document.getElementById('majore').value);
var qu = +(document.getElementById('quize').value);
var hss = +(document.getElementById('hs').value);
var total = ma + qu + hss;
document.getElementById('totals').value = total;
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore" value="10" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well quize">
<label for="quize">Quizzes</label>
<div class="input-group">
<input type="text" class="form-control quize" id="quize" value="10" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well hos">
<label for="hs">Homework/Seatwork</label>
<div class="input-group">
<input type="text" class="form-control hs" id="hs" value="10" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well total">
<label for="total">Total/label>
<div class="input-group">
<input type="text" class="form-control total" id="totals" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>

You may try this code
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore" onchange="sum()"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<div class="well quize">
<label for="quize">Quizzes</label>
<div class="input-group">
<input type="text" class="form-control quize" id="quize" onchange="sum()"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<div class="well hos">
<label for="hs">Homework/Seatwork</label>
<div class="input-group">
<input type="text" class="form-control hs" id="hs" onchange="sum()"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<div class="well total">
<label for="total">Total</label>
<div class="input-group" id="totals">
<input type="text" class="form-control total" id="totals"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<script>
function sum() {
var ma = parseInt(document.getElementById('majore').value);
var qu = parseInt(document.getElementById('quize').value);
var hss = parseInt(document.getElementById('hs').value);
var totals = ma + qu + hss;
document.getElementById('totals').innerHTML = totals;
}</script>

You can get or set the value for the input element using val property.
Get the value from the input element and sum the values
Set the value for the total input field
Here is the Code :
var total = +($('#majore').val()) + +($('#quize').val()) + +($('#hs').val());
$('#totals').val(total);
Check your output in Jsfiddle
This is simple and optimized way. Read more about val property here

function numberSum(N) {
var total = 0;
for(var i = 1; i <= N; i++){
total += i;
}
return total;
}
function run(){
val = document.getElementById("val").value;
document.getElementById("results").innerHTML=val+": "+numberSum(val)
}
<input id="val">
<input type="Submit" onclick="run();">
<p id="results"></p>
Your showing only your body part ...kindly do the script like this way

Checkboxes weird behaviour in AngularJS ng-repeat

I've a form containing input fields and checkboxes (table crud generating dynamically). See the image below:
Here, In my clients modal dialog form I've implemented small crud for adding/updating/deleting Providers data and showing table below of it on the fly.
Following is my code:
View:
<form name="clientForm" ng-submit="check(id)" ng-controller="ClientsController">
<div class="form-group">
<label for="name">Name</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Name" ng-model="client.name">
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Email" ng-model="client.email">
</div>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Phone" ng-model="client.phone">
</div>
</div>
<div class="form-group">
<label for="phone">Providers</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" ng-model="provider.provider_name" placeholder="Enter Provider Name">
</div>
<br>
<button type="button" id="addbtn" class="btn btn-sm btn-primary" ng-click="addProvider()">Add Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-info" ng-click="updateProvider(id)">Update Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-default" ng-click="clearProvider()">Clear Provider</button>
<br>
<table style="width: 50%; margin-top: 10px;" class="">
<tbody>
<tr ng-repeat="val in providersData">
<td>
<input type="checkbox" name="providersData" ng-model="$parent.client.providersList" value="{{val._id}}"/>
</td>
<td>{{val.provider_name}}</td>
<td>
<a style="color: blue;" href="javascript:void(0);" ng-click="editProvider(val._id)"><i class="glyphicon glyphicon-edit"></i></a>
<a style="color: red;" href="javascript:void(0);" title="Delete" confirmed-click="removeProvider(val._id)" ng-confirm-click="Are you sure you want to remove provider?"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="well well-lg text-center bg-gray">
<button class="btn btn-success" ng-if="id">Save Client</button>
<button class="btn btn-danger" ng-if="id" title="Delete" confirmed-click="remove(client._id)" ng-confirm-click="Are you sure you want to remove?">Delete</button>
<button type="button" class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-success" ng-if="!id">Add Client</button>
</div>
</form>
Controller:
$scope.showModal = false;
$scope.client = {};
$scope.provider = null;
$scope.addClient = function () {
alert(JSON.stringify($scope.client));
$http.post('/clients', {param: $scope.client}).success(function (response) {
if (response) {
alert("Client added successfully");
$scope.client = "";
refresh();
$scope.closemodal();
}
});
};
Now I want to insert/update selected checkboxes value to db along with Name, Email, and Phone field.
Here I'm facing following issues:
Whenever I'm clicking on any checkbox its checking all checkboxes.
After clicking on Add Client button its showing result of alert(JSON.stringify($scope.client)) like this
{"name":"asdfdsafasdf","email":"sdf","phone":"sadf","providersList":{"id":true}}
In mongodb its showing like this:
I've search a lot tried this and ng-model="$parent.client.providersList.id" but still its not working.
I'm beginner in AngularJS and just started working on it.
Any help would be appreciated.

You should use ng-true-value & ng-false-value over the checkbox(I'm considering default value to be 0). And then use $index of providersData ng-repeat to create an array of client.providersList.
Markup
<input type="checkbox" name="{{'providersData'+$index}}"
ng-model="client.providersList[$index].id" ng-true-value="val._id" ng-false-value="0" />

You are facing this problem because of the value of your ng-model attribute. The value for ng-model attribute must be different for each checkbox. Here, try this:
<input type="checkbox" name="providersData" ng-model="client.providersList{{$index}}" ng-value="val._id" />
Try something like this:
$scope.client = {};
$scope.client.providersList = [];
// Now watch the model for changes
$scope.$watch('client', function(){
// When the checkbox is selected it returns true
if($scope.client.providersList1 == true){
$scope.client.providersList.push({"id": value})
}
// Repeat the if statements for all the checkboxes (or use a for loop)
}, true);