We Keep Coding

jQuery: Reset classes once the field is empty

NOTE:
The following solution comes from THIS TOPIC, please see that first.
I have 11 inputs:
<input type="text" class="[something]-input inputs">
(Where [something] is a name, different for every input)
$(document).on("change", ".inputs", function(){
var thisclass = $(this).attr('class').split("-")[0];
if($(this).val() == ''){
//
}
highlightInputNumbers(thisclass, 0);
});
The highlightInputNumbers function goes this way:
function highlightInputNumbers(classe, stepcount, empty){
var all= $("td[class*="+classe+"]");
var index = all.length-1;
var concat_steps = $(all[index]).html().split('.')
//var due_serie = $(all[index]).html().split('.')
var due_serie = $('.'+classe+'-input').val().split('.')
for (var i = index; i >= (index-stepcount)+2; i--) {
due_serie = due_serie.concat($(all[i-1]).html().split('.'));
};
//Rimuovo i doppioni
var serieCompleta = [];
$.each(due_serie, function(i, el){
if($.inArray(el, serieCompleta) === -1) serieCompleta.push(el);
});
//Ottengo dati
for(var s = 0; s < index-(stepcount-1); s++){
var bar = $(all[s]);
var barnum = bar.html().split('.');
bar.html('');
var found = 0;
for(i = 0; i<= barnum.length-1; i++){
for(n = 0; n<= serieCompleta.length-1; n++){
if(i != 4){ var punto = '.' }else{ var punto = ''}
/* Problem here:*/
if(barnum[i] == serieCompleta[n]){
bar.append('<span class="highlight">'+barnum[i]+'</span><span class="fade">'+punto+'</span>');
found = barnum[i];
}
}
if(barnum[i] != found){
bar.append('<span class="fade">'+barnum[i]+punto+'</span>');
}
}
}
}
Where I commented /*Problem here*/ is where I highlight the numbers in the column (that I have inserted), but if I remove the numbers in the input they stay highlighted... If I change them it keeps the old ones..
As you can see here: https://dl.dropboxusercontent.com/u/2276958/Cols_and_rows.mov

Small addition in your code.
Let me try to explain what was happening in your code.
At first try:
your code gets the input values (eg. 89.30.20)
Loop through all available values in the table
Split each value by '.'
Then loop through these spitted values to check for match and highlight
Replace the matched number to highlighted span (i.e 20 to 20 and unmatched number to faded span.
This all works for first time. But at the second try, your code breaks from step 3. As in step 3 code tries to split values by '.' but the values were replaced with Span values in your first try. So now to rectify this issue I added small check and 2-3 lines of extra code to extract actual values from Span values.
That extra code is:
// Check if values bar already contains Span tags (means already processed in first try
var hasSpans = bar.find('span').length>0;
if(hasSpans)
{
//If yes then extract the actual values from these span tags without '.' (This will work for all tries after FIRST)
barnum=bar.find('span').map(
function() {
if($(this).html() != '.')
return $(this).html().replace('.','');
}).get();
}
// else normal case, split the values by '.' (This will for very FIRST try)
else barnum = bar.html().split('.');
$(document).on("change", ".inputs", function(){
var thisclass = $(this).attr('class').split("-")[0];
if($(this).val() == ''){
//
}
highlightInputNumbers(thisclass, 0);
});
function highlightInputNumbers(classe, stepcount, empty){
var all= $("td[class*="+classe+"]");
var index = all.length-1;
var concat_steps = $(all[index]).html().split('.')
//var due_serie = $(all[index]).html().split('.')
var due_serie = $('.'+classe+'-input').val().split('.')
for (var i = index; i >= (index-stepcount)+2; i--) {
due_serie = due_serie.concat($(all[i-1]).html().split('.'));
};
//Rimuovo i doppioni
var serieCompleta = [];
$.each(due_serie, function(i, el){
if($.inArray(el, serieCompleta) === -1) serieCompleta.push(el);
});
//Ottengo dati
for(var s = 0; s < index-(stepcount-1); s++){
var bar = $(all[s]);
var barnum;
var hasSpans = bar.find('span').length>0;
if(hasSpans)
{
barnum=bar.find('span').map(
function() {
if($(this).html() != '.')
return $(this).html().replace('.','');
}).get();
}
else barnum = bar.html().split('.');
bar.html('');
var found = 0;
for(i = 0; i<= barnum.length-1; i++){
for(n = 0; n<= serieCompleta.length-1; n++){
if(i != 4){ var punto = '.' }else{ var punto = ''}
/* Problem here:*/
if(barnum[i] == serieCompleta[n]){
bar.append('<span class="highlight">'+barnum[i]+'</span><span class="fade">'+punto+'</span>');
found = barnum[i];
}
}
if(barnum[i] != found){
bar.append('<span class="fade">'+barnum[i]+punto+'</span>');
}
}
}
}
span.highlight{
color:green;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>02/05/2015</td><td class="bari1">89.10.86.30.65</td></tr>
<tr><td>30/04/2015</td><td class="bari2">96.11.73.36.13</td></tr>
<tr><td>02/05/2015</td><td class="bari3">78.34.50.72.11</td></tr>
<tr><td>30/04/2015</td><td class="bari4">34.78.69.60.22</td></tr>
<tr><td>02/05/2015</td><td class="bari5">12.29.30.69.33</td></tr>
<tr><td>30/04/2015</td><td class="bari6">59.10.20.96.44</td></tr>
<tr><td colspan="2"><input type="text" class="bari-input inputs"></td></tr>
</table>
<table>
<tr><td>02/05/2015</td><td class="vari1">89.10.86.30.65</td></tr>
<tr><td>30/04/2015</td><td class="vari2">96.11.73.36.13</td></tr>
<tr><td>02/05/2015</td><td class="vari3">78.34.50.72.11</td></tr>
<tr><td>30/04/2015</td><td class="vari4">34.78.69.60.22</td></tr>
<tr><td>02/05/2015</td><td class="vari5">12.29.30.69.33</td></tr>
<tr><td>30/04/2015</td><td class="vari6">59.10.20.96.44</td></tr>
<tr><td colspan="2"><input type="text" class="vari-input inputs"></td></tr>
</table>

Failed to sum variable in javascript

I have script to sum amount that I get from ID's of html element, this is the script :
<script type="text/javascript">
$(document).ready(function() {
/* var sum=0; */
$('#checkAll').click(function(event) { //on click
if(this.checked) { // check select status
var i = 0;
var sum = 0;
$('.checkItem').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
sum = sum + parseInt($('#amount'+i).val());
i++;
});
}else{
$('.checkItem').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
sum=0;
i=0;
}
$('#totalRecord').val(i);
$('#totalAmount').val(sum);
$('#totalAmountFake').val(ChangeToRupiah(sum));
});
});
</script>
function ChangeToRupiah(angka){
var rev = parseInt(angka, 10).toString().split("").reverse().join("");
var rev2 = "";
for(var i = 0; i < rev.length; i++){
rev2 += rev[i];
if((i + 1) % 3 === 0 && i !== (rev.length - 1)){
rev2 += ".";
}
}
return rev2.split("").reverse().join("") + ",00";
}
But when i run it, i got this message in my result element :
I guess it's about limitation of javascript variable, but it's not, I use Internet Explorer 9.

Display the value on click of check box in an array

I have an array of 10 checkboxes. onclick of checkbox i want to get the value of that particular checkbox. That I am able to achieve using my code.When I click in serial order it is working fine. When I click on checkbox 5 after clicking on checkbox 7 the value of checkbox 5 ie..5 is getting added befor 7. I dont want in that order. I want the values to displayed in whatever order I click. My js file is as follows
var selected = new Array();
$(document).ready(function(){
checkBoxTest();
});
function checkBoxTest() {
alert("checkbox test");
for(i = 0; i < 10; i++){
$("#catalog_table").append('<tr><td>Checkbox<input type="checkbox" name ="chkbox" value="' +i+' "/><td></tr>');
test();
}
}
function test() {
$('#catalog_table input:checkbox').change(function() {
var emails = [];
$('#catalog_table input:checkbox:checked').each(function() {
emails.push($(this).val());
});
var textField = document.getElementById("root");
textField.value = emails;
});
}
My HTML code is something like this
<table id="catalog_table"> </table>
<textarea id="root"></textarea>
Can any one please tell me how to do this?
Demo

Its messy, but it works:
http://jsfiddle.net/za7m8/1/
var selected = new Array();
$(document).ready(function(){
$("input[type='checkbox']").on('change', function() {
// check if we are adding, or removing a selected item
if ($(this).is(":checked")) {
selected.push($(this).val());
} else {
for(var i = 0; i<selected.length;i++) {
if (selected[i] == $(this).val()) {
// remove the item from the array
selected.splice(i, 1);
}
}
}
// output selected
var output = "";
for (var o = 0; o<selected.length; o++) {
if (output.length) {
output += ", " + selected[o];
} else {
output += selected[o];
}
}
$("#root").val(output);
});
});

You just have to change your javascript like this.
var selected = new Array();
$(document).ready(function(){
checkBoxTest();
});
function checkBoxTest() {
alert("checkbox test");
for(i = 0; i < 10; i++){
$("#catalog_table").append('<tr><td>Checkbox<input type="checkbox" name ="chkbox" value="' +i+' "/><td></tr>');
test();
}
}
var emails = [];
function test() {
$('#catalog_table input:checkbox').change(function() {
if (this.checked)
{
if ( emails.indexOf( $(this).val() ) === -1 )
{
emails.push($(this).val());
}
} else
{
if ( emails.indexOf( $(this).val() ) !== -1 )
{
var index = emails.indexOf( $(this).val() );
emails.splice(index, 1);
}
}
var textField = document.getElementById("root");
textField.value = emails;
});
}

You need to clear up your code a bit, like this:
I assume that unchecking removes the value from the array, and checking adds.
var selected = new Array(); // What for is this here ?
$(document).ready(function () {
checkBoxTest();
});
function checkBoxTest() {
for (i = 0; i < 10; i++) {
$("#catalog_table").append('<tr><td>Checkbox<input type="checkbox" name ="chkbox" value="' + i + ' "/><td></tr>');
}
test();
}
function test() {
var emails = [],
textField = document.getElementById("root");
$('#catalog_table input:checkbox').change(function () {
var val = $(this).val();
// if you don't want removal of values on `uncheck`, comment out everything below excluding `emails.push(val)` and the last line
if(this.checked){ // if checked
emails.push(val); // add it
}else{
emails.splice(emails.indexOf(val), 1); // remove it if not checked
}
textField.value = emails; // set the value
});
}
DEMO

onchange event not tracking properly

I have a form that I want to track any changes. Right now I have it set so when the user exits the page, an alert box displays saying how many changes were made to the form. However, it keeps registering 0. I've tested with adding an alert to the inputChanges function telling me a change has occurred and the alert fires, but the count still registers as 0 when I exit the page...
Here's my script:
window.onload = function() {
var totalChanges = "";
var inputHandles = 0;
var selectHandles = 0;
var textAreaHandles = 0;
window.onbeforeunload = function(){
alert("Total Form Changes:" + totalChanges);
}//onbeforeunload
var totalChanges = inputHandles + selectHandles + textAreaHandles;
function inputChanges() {
inputHandles++;
alert("Change");
}
var inputs = document.getElementsByTagName("input");
for (i = 0; i < inputs.length; i++){
inputs[i].onchange = inputChanges;
}
function selectChanges(){
selectHandles++;
}
var selects = document.getElementsByTagName("select");
for (i = 0; i < selects.length; i++){
selects[i].onselect = selectChanges;
}
function textAreaChanges(){
textAreaHandles++;
}
var textAreas = document.getElementsByTagName("textarea");
for (i = 0; i < textAreas.length; i++){
textAreas[i].onchange = textAreaChanges;
}
}//Onload

You declare totalChanges here:
var totalChanges = "";
...and then re-declare it here:
var totalChanges = inputHandles + selectHandles + textAreaHandles;
...at which point the things you're adding up are all 0.
You need to do that calculation at the point where you need the value:
window.onbeforeunload = function(){
totalChanges = inputHandles + selectHandles + textAreaHandles;
alert("Total Form Changes:" + totalChanges);
}
Or set totalChanges = 0 initially and then increment it every time the other variables change, but that's clunkier.
Note also that you're not tallying the number of fields that now have values different to their starting values, you're tallying the number of individual edits. So if the user changes a field twice with the second change being back to the original value your code will track that as two changes (when logically it's kind of zero changes).

Since the user can change values back to what they were, I suggest you compare all input.value with input.defaultValue and check select.options[select.selectedIndex]defaultSelected
also you might want to move the } and the alert to after the sum of total changes
something like this
window.onload = function() {
var totalChanges = 0;
window.onbeforeunload = function(){
var inputs = document.getElementsByTagName("input"); // ditto for "textarea"
for (var i = 0; i < inputs.length; i++){
totaChanges += inputs[i].value != inputs[i].defaultValue;
}
var selects = document.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++){
totalChanges += !selects[i].defaultSelected;
}
alert("Total Form Changes:" + totalChanges);
}//onbeforeunload
}

change numbers from dynamic elements

I have this code that sends the values a user have typed in... the information and numbers are sent as an array and pushed into another array, I then display the text in a dynamically created list element and number in a span element...
var button = $('#add');
button.click(function()
{
var filmnamn = $('#name');
var filmnamnet = filmnamn.val();
var betyg = $('#star');
var betyget = betyg.val();
betyget = Number(betyget);
if(filmnamnet == 0)
{
$('#name').css('background-color', 'red');
}
if(betyget == 0)
{
$('#star').css('background-color', 'red');
}
if(betyget == 0 || filmnamnet == 0)
{
alert("Vänligen fyll i fälten korrekt");
}
else
{
var array = new Array();
array.unshift(betyget);
array.unshift(filmnamnet);
film_array.unshift(array);
betyg_array.unshift(array);
updateFilmList();
}
});
var film_list = $("#filmlista");
var film_array = new Array();
function updateFilmList()
{
document.getElementById("name").value = '';
document.getElementById("star").value = 0;
var filmen = film_array[0][0];
var grade = film_array[0][1];
var element = '<li class="lista">' + filmen + '<span class="betyg">'+ grade +'</span></li>';
film_list.append(element);
changeNumber();
}
And at last I have the function that i want to change the number in the span element to the amount of stars that the number shows... this works fine but only for the first created list and span element, when I try to add more listelements the number wont show up as stars, can someone tell me why this happens and point me in the direction to fix the problem?
function changeNumber(){
var elements= document.getElementsByClassName("betyg");
for (var i=0; i<elements.length; i++) {
var element = elements[i];
var length = parseInt(element.innerHTML);
var x=Array(length+1).join("*");
element.innerHTML=x;
}
}