jQuery with Internet Explorer

Question

I have this code that works perfectly in Firefox, but I can’t make it work in IE.

The user can only choose 10 drives in total and when it reaches 10 displays one alert().

Does anyone have a better idea or solution?

Here the Jsfiddle

function getval() {
    var inputs, index,liste;
    inputs = document.getElementsByTagName('input');

    for(var key in inputs) {
        var value = inputs[key].value;
        var id = inputs[key].id;
        if (value > 0) liste =liste+id+"-"+value+";";
    }

    alert(liste.replace("undefined",""));
}


function mysum() {
    var inputs, index,liste;
    nbbroca=0;
    inputs = document.getElementsByTagName('input');
  
    for(var key in inputs) {
        var value = inputs[key].value;
        if (value > 0) nbbroca += parseInt(value);
      }

    if (nbbroca >= 10) alert(nbbroca);
}

$(":input").bind('change', function () {
    mysum();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<center>
    <form method="post" onsubmit="getval()">
        <table id="products" name="products" class="products">
            <tr class="figures">
                <th>
                    <a href="#">
                        <figure>
                            <img src="http://s33.postimg.org/j2so2jo1b/image1.png" alt="Product name" class="ProductTopCell img-rounded">
                              <p></p>
                        </figure>
                      </a>
                </th>
                <th>
                    <a href="#">
                        <figure>
                            <img src="http://s33.postimg.org/j2so2jo1b/image1.png" alt="Product name" class="ProductTopCell img-rounded">
                            <p></p>
                        </figure>
                    </a>
                </th>
                <th>
                    <a href="#">
                        <figure>
                            <img src="http://s33.postimg.org/j2so2jo1b/image1.png" alt="Product name" class="ProductTopCell img-rounded">
                            <p></p>
                        </figure>
                    </a>
                </th>
                <th>
                    <a href="#">
                        <figure>
                            <img src="http://s33.postimg.org/j2so2jo1b/image1.png" alt="Product name" class="ProductTopCell img-rounded">
                            <p></p>
                        </figure>
                    </a>
                </th>
                <th>
                    <a href="#">
                        <figure>
                            <img src="http://s33.postimg.org/j2so2jo1b/image1.png" alt="Product name" class="ProductTopCell img-rounded">
                            <p></p>
                        </figure>
                    </a>
                </th>
                <th>
                    <a href="#">
                        <figure>
                            <img src="http://s33.postimg.org/j2so2jo1b/image1.png" alt="Product name" class="ProductTopCell img-rounded">
                            <p></p>
                        </figure>
                    </a>
                </th>
            </tr>
            <tr class="quantity">
                <td>
                    <input  id="1011" name="1011" type="number" min="0" value="0" >
                </td>
                <td>
                    <input id="1012" name="1012" type="number" min="0" value="0" >
                </td>
                <td>
                    <input id="1013" name="1013" type="number" min="0" value="0" >
                </td>
                <td>
                    <input id="1014" name="1014" type="number" min="0" value="0" >
                </td>
                <td>
                    <input id="1015" name="1015" type="number" min="0" value="0" >
                </td>
                <td>
                    <input id="1016" name="1016" type="number" min="0" value="0" >
                </td>
            </tr>
        </table>
    
        <button type="submit">Post</button>
    </form>
</center>

Answer 1

Your problem is that the getElementsByTagName returns a NodeList and the for .. in should not be used for such, it should be used to traverse enumerable properties of objects.

If you change yours for...in for for var That’s gonna work (https://jsfiddle.net/892wxwsp/). Change your code to:

function mysum() {
    var inputs, index, liste;
    nbbroca = 0;
    inputs = document.getElementsByTagName('input');

    for (var i = 0; i < inputs.length; i++) {

        var value = inputs[i].value;

        if (value > 0) nbbroca += parseInt(value);
    }
    if (nbbroca >= 10) alert(nbbroca);
}

Answer 2

Since you are wearing jQuery, could write the functions using it, this way:

function sumAll() {
    var total = 0;

    $('.pra-somar').each(function() {
        var valor = parseInt(this.value);

        if (isNaN(valor)) {
            // poderia mostrar um alert('número inválido');
        } else {
            total += valor;
        }
    });

    return total;
}

function validate() {
    if(sumAll() > 10) {
        alert('A soma dos valores não pode ser maior que 10');
        // ainda pode logar os dados ou
        // guardar numa string e mostrar em um alert
        // $('.pra-somar').each(function() { console.log(this.value);});

        return false;
    }

    return true;
}

$(".pra-somar").bind('change', function () {
    validate();
});

For each <input> you would need to add the class pra-somar and in the <form> would look like this:

<form method="post" onsubmit="return validate()">

I hope I helped the/

You can read the documentation from jQuery.each() on the official website of jQuery