jQuery with Internet Explorer

Question

jQuery with Internet Explorer

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

I have this code that works perfectly in Firefox, but I can not get it to work in IE.

The user can only choose 10 units in total and when he reaches 10 he displays a alert() .

Does anyone have an idea or a better 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><formmethod="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>

javascript html jquery

asked by anonymous 01.06.2016 / 13:19

2 answers

1

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

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 every% of% you would need to add the class <input> and the pra-somar would look like this:

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

I hope I have helped \ o /

You can read the <form> documentation on the official jQuery.each()

01.06.2016 / 18:37

How do I send data from a html table to POST form? Add AND and OR to Where de list

score 3 · Accepted Answer

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

If you change your for...in to for var this will already work ( link ). 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);
}