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 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

button for Date and Time in Bootstrap Datetimepicker

I'm trying to have two buttons. One for time and another for date.
For example
http://jsfiddle.net/RR4hw/1383/
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" readonly />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
jQuery(function () {
jQuery('#startDate').datetimepicker();
jQuery('#endDate').datetimepicker();
jQuery("#startDate").on("dp.change",function (e) {
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
});
how can i approach it? Is this possible?

I solved this by using option "sideBySide":
jQuery('#startDate').datetimepicker({sideBySide: true});
jQuery('#endDate').datetimepicker({sideBySide: true});
I hope it helps.

jquery selector for div that contains specific class

I'm trying to select the DIV of the first row in the offers table on this page that is shipped by Amazon Prime.
http://www.amazon.co.uk/gp/offer-listing/B00NMND7AW/?condition=new
So in this example the row I'm trying to select with jQuery is the one that is £25.19
I have tried the following:
div.olpOffer .a-icon-prime:first
This gets me only so far. Now I need to figure out how to select the div that contains that.
I need to be able to paste this into the Selector Gadget plugin for Chrome and it should select the div that contains the cheapest Amazon Prime item.

It sounds like you are looking for the :has() selector:
$('.olpOffer:has(.a-icon-prime):first');
This will select the first .olpOffer element that has an element with a class of .a-icon-prime.

I suggest
$(".supersaver").closest("div.olpOffer")
It selects the row:
<div class="a-row a-spacing-mini olpOffer">
<div class="a-column a-span2">
<span class="a-size-large a-color-price olpOfferPrice a-text-bold"> £25.19 </span>
<span class="a-color-price">
</span>
<span class="supersaver"><i class="a-icon a-icon-prime" aria-label="Amazon Prime TM"><span class="a-icon-alt">Amazon Prime TM</span>
</i>
</span>
<p class="olpShippingInfo">
<span class="a-color-secondary">
Eligible for FREE UK Delivery Details
</span>
</p>
</div>
<div class="a-column a-span3">
<div class="a-section a-spacing-small">
<span class="a-size-medium olpCondition a-text-bold">
New
</span>
</div>
</div>
<div class="a-column a-span2 olpSellerColumn">
<h3 class="a-spacing-none olpSellerName">
<img alt="Amazon.co.uk" src="http://ecx.images-amazon.com/images/I/01pSGAIMN3L.gif" width="90" height="19">
</h3>
</div>
<div class="a-column a-span3 olpDeliveryColumn">
<p class="a-spacing-mini olpAvailability">
</p>
<ul class="a-vertical">
<li class="olpFastTrack"><span class="a-list-item">
In stock.
<span id="ftm_us7UeOB4c9pZTmqq2Md4WubIlhxKT3k9uiwFnsOOTz6eaIxF2ReWmql9mIaXr5EWHB9hdFWHF3jDdpJB7I6iPIEhJZbrPX5z">Want delivery by Thursday, 3 December?
<span id="shippingMessage_ftinfo_olp_1">Order it in the next <span id="ftc_us7UeOB4c9pZTmqq2Md4WubIlhxKT3k9uiwFnsOOTz6eaIxF2ReWmql9mIaXr5EWHB9hdFWHF3jDdpJB7I6iPIEhJZbrPX5z" style="color: #006600;">19 hours and 10 minutes</span>, and choose <b>One-Day Delivery</b> at
checkout.
</span>
See details
</span>
</span>
</li>
<li><span class="a-list-item">
Domestic delivery rates
and return policy.
</span>
</li>
</ul>
<p></p>
</div>
<div class="a-column a-span2 olpBuyColumn a-span-last">
<div class="a-button-stack">
<form method="post" action="/gp/item-dispatch/ref=olp_atc_new_1" class="a-spacing-none">
<input type="hidden" name="session-id" value="275-2613291-9295018">
<input type="hidden" name="qid">
<input type="hidden" name="sr">
<input type="hidden" name="signInToHUC" value="0" id="signInToHUC">
<input type="hidden" name="metric-asin.B00NMND7AW" value="1">
<input type="hidden" name="registryItemID.1">
<input type="hidden" name="registryID.1">
<input type="hidden" name="itemCount" value="1">
<input type="hidden" name="offeringID.1" value="us7UeOB4c9pZTmqq2Md4WubIlhxKT3k9uiwFnsOOTz6eaIxF2ReWmql9mIaXr5EWHB9hdFWHF3jDdpJB7I6iPIEhJZbrPX5z">
<input type="hidden" name="isAddon" value="0">
<span class="a-declarative" data-action="olp-click-log" data-olp-click-log="{"subtype":"main","type":"addToCart"}">
<span class="a-button a-button-normal a-spacing-micro a-button-primary a-button-icon" id="a-autoid-6"><span class="a-button-inner"><i class="a-icon a-icon-cart"></i><input name="submit.addToCart" class="a-button-input" type="submit" value="Add to Basket" aria-labelledby="a-autoid-6-announce"><span class="a-button-text" aria-hidden="true" id="a-autoid-6-announce">
Add to Basket
</span></span>
</span>
</span>
</form>
<div class="a-section a-spacing-micro a-text-center">
or
</div>
<p class="a-spacing-none a-text-center olpSignIn">
Sign in to turn on 1-Click ordering.
</p>
</div>
</div>
</div>