Nan Error in Calculation using Javascript after click Submit

Question

I have a problem here that I can not solve , in this script below performs a calculation of on the marked seats, so far everything is perfect the problem and when I put a Ubmit button to send the data and ends up zeroing the result field giving Nan error. how can I fix this?

follow the javascript https://jsfiddle.net/fabioo7/wjsdxLvk/

$(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;
    }
}
})();

});

Answer 1

I made some modifications. Look below:

1.

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

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

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

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

---

Also do this on the line of each, how are:

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

As it should be:

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

---

Already in the area of Pure Javascript, the var elements is like this:

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

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

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

---

And lastly in the checkCount.value = $("input:enabled:checked").length, that is now like this:

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

2.

For the capture of index dynamically created elements. I specified inside the .index(), as a parameter, the :checkbox

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

3.

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

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

---

Demonstration - Jsfiddle

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