NaN Error in Calculation using Javascript after click submit

Question

NaN Error in Calculation using Javascript after click submit

Navigation

#1 by (3 votes)

1

I have a problem here that I can not solve, in the script below perform a calculation of on the marked seats, so far everything is perfect the problem and when I put a submit button to send the data and finishes clearing the field of result giving NaN Error. how can I fix this?

Followthejavascript link

$(window).load(function(){
var contador = function() {
var n = $("input:enabled:checked").length;
var unchecked = 0;
var cb = $(this).index();
$("input:enabled").each(function(i) {
if ((i < cb) && !($(this).is(":checked"))) {
++unchecked;
}
}) 

if($(this).is(":checked")){
$('#campo').append('<div style="margin-top: 10px;"><input type="text"     placeholder="Insira seu Ticket" name="tks[]" required  class="created"    name="check1" ></div>');
}else{
$('.created').eq($(this).index()-unchecked).remove();
} 

$("#checkcount").text(n + (n === 1 ) + " Cadeiras Marcadas");
};
contador();
$("input[type=checkbox]").on("click", contador);


(function() {
var elements = document.getElementsByTagName('input');
var resultado = document.getElementById('resultado_soma');
var resultadoInput = document.getElementById('resultado_soma2');
var checkCount = document.getElementById('checkcount2');

var total = 0;

for (var i = 0; i < elements.length; i++) {
    elements[i].onclick = function() {
        if (this.checked === false) {
            total = total - this.value;
        } else {
            total = total + parseFloat(this.value);
        }

        resultado.innerHTML  = 'R$ ' + total.toFixed(2).replace(".",",");
        resultadoInput.value  = total.toFixed(2).replace(".",",");
        checkCount.value =  $("input:enabled:checked").length;
    }
}
})();

});

javascript jquery

asked by anonymous 12.01.2016 / 00:15

1 answer

Write current directory in a text file Generate Class from XSD - CTE for Webservice SEFAZ

score 3 · Answer 1

I made some changes. Look at them below:

1.

The main problem is that you are using most selectors for checkbox , only input , without specifying your type . For example:

var n = $("input:enabled:checked").length;

In this way, you also select the input:text , as well as the input:submit , which is not what you want, then replace the above line with:

var n = $("input:checkbox:enabled:checked").length;

Also do this in the each line, as it is:

$("input:enabled").each(...

How should it be:

$("input:checkbox:enabled").each(...

In the Pure Javascript area, var elements looks like this:

var elements = document.getElementsByTagName("input");

It should be this way, using the querySelectorAll selector, like the [type='checkbox'] filter:

var elements = document.querySelectorAll("input[type='checkbox']");

And finally in checkCount.value = $("input:enabled:checked").length , which now looks like this:

checkCount.value =  $("input:checkbox:enabled:checked").length

2.

For capturing index of dynamically created elements. I have specified within%%, as a parameter, the .index()

$('.created').eq($(this).index(':checkbox')-unchecked).remove()

3.

In order to not be allowed to submit the form without having been chosen at least one option, I did this function:

$('form').submit(function(e){
    if($("input:checkbox:enabled:checked").length == 0){
    e.preventDefault();
  }
})

Demo - JsFiddle

Tip: It's important that instead of selecting the elements by their tagNames you use a selector for class or id , so there will be no problems with the multiplication of tags. :)