1

I am trying to setup a small article chooser. While it works in Firefox and Chrome, as well as IE7, it has problems on IE8 and IE9.

  • In IE 8 and 9 it changes to "increase" field to "NaN" when clicked. (edit: solved by placing a letter in front of the number)
  • In IE9 it updates the "Warenkorb", but places "NaN" or "\/" in
    the field for "Anzahl". (edit: solved by placing a letter in front of the number)
  • In IE8 it completely ignores the update function. (edit: is related to the innerHTML-Bug)

To me it seems that somehow I can not reach the form itself. I have already tried to use document.forms[0] and document.getElementById["bestmult"] instead, in case the delivered object is not the field inside the form, but that did not change anything. I feel like the solution is very simple, but I just can not put my finger on it.

Here is the code:

<script>
        var sumarray = new Array();
        var artarray = new Array();
        var costarray = new Array();
        var counter=0;

    function increase(obj, field, type){
        var form = obj.form;
        var value = parseInt(form.elements[field].value, 10);
        value++;
        form.elements[field].value = value;
        updateCosts(obj, field, type);
    }
    function decrease(obj, field, type){
        var form = obj.form;
        var value = parseInt(form.elements[field].value, 10);
        if(value > 0){
            value--;
            form.elements[field].value = value;
            updateCosts(obj, field, type);
        }
    }

    function updateCosts(obj, field, type){
        var form = obj.form;

        var exist = artarray.indexOf(form.elements[field].name);

        var preis = 0;
        if (type == 'b'){
            preis = 19.95; 
        }else if (type == 'p') {
            preis = 29.95;
        }

        if (exist != -1){
            if (form.elements[field].value == 0){
                sumarray.splice(exist , 1);
                artarray.splice(exist , 1);
                costarray.splice(exist , 1);
                counter--;
            }else {     
                sumarray[exist] = form.elements[field].value;
                artarray[exist] = form.elements[field].name;
                costarray[exist] = preis;
            }
        }else { 
            sumarray[counter] = form.elements[field].value;
            artarray[counter] = form.elements[field].name;
            costarray[counter] = preis;
            counter++;
        }

        var completestring = "";

        if (counter > 0) {
            var product = 0;
            completestring += "<h1>Warenkorb</h1><table border=0><tr style='background:gray;' align='center'><td width=110 align='center'>Artikel</td><td width=80>Anzahl</td><td align='center' width=60>Preis</td><td align='center' width='40'>Del</td></tr>";

            for(var i=0;i<counter;i++){
                completestring += "<tr><td>"+artarray[i].replace("_", " ")+"</td><td align=center>"+sumarray[i]+"</td><td align=center>"+costarray[i]+"</td><td align=center><img src='img/trash.png' onclick='setZero(\""+artarray[i]+"\")'></td></tr>";
                product += parseInt(sumarray[i])*parseInt(costarray[i]);

            }
            completestring += "</table><h2>"+(product).toFixed(2)+"</h2>";
        } else {
            completestring += "<h1>Warenkorb</h1>";

        }

        document.getElementById("sum").innerHTML = completestring;
    }

    function setZero(element) {
        var form = document.forms[0];   
        form.elements[element].value = "0";
        var obj = form.elements[element];
        updateCosts(obj, element, "b");

    }
</script>
<div id="sum">
</div>
<form id="bestmult" action="test2.html" method="post">
<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td rowspan="2"><input type="text" name="1_Basis" value="0" onblur="updateCosts(this, '1_Basis', 'b')" /></td>
        <td><input type="button" value=" /\ " onclick="increase(this, '1_Basis', 'b')" class="button" ></td>
    </tr><tr>
        <td><input type="button" value=" \/ " onclick="decrease(this, '1_Basis', 'b')" class="button" ></td>
    </tr>
</table>

This code is of cause not everything there is (although everything that could potentially influence the problem at hand), so don't bother with the script tags, or the incomplete form, these where just added for completion, to show how it all fits together without having to post the whole code.

edit: it seems that IE8 and 9 have a problem with the way I named by textfields. I could resolve most of the problem by simply putting a z at the start which I can later simply strip to regain to proper text. Now it is just IE8 that does not seem to like innerHTML. I did find a lot on this on the Internet, yet nothing that really works.

HolgerS
  • 87
  • 7

3 Answers3

1

Check my modifications in your script code

<script>
        var sumarray = new Array();
        var artarray = new String();
        var costarray = new Array();
        var counter=0;

    function increase(obj, field, type){
        var form1 = obj.form;
        //alert(obj.form1.elements[0].value);
        var value = parseInt(form1.elements(field).value, 10);
        value++;
        form1.elements(field).value = value;
        updateCosts(obj, field, type);
    }
    function decrease(obj, field, type){
        var form = obj.form;
        var value = parseInt(form.elements(field).value, 10);
        if(value > 0){
            value--;
            form.elements(field).value = value;
            updateCosts(obj, field, type);
        }
    }

    function updateCosts(obj, field, type){
        var form = obj.form;

        var exist = artarray.indexOf(form.elements(field).name);

        var preis = 0;
        if (type == 'b'){
            preis = 19.95; 
        }else if (type == 'p') {
            preis = 29.95;
        }

        if (exist != -1){
            if (form.elements(field).value == 0){
                sumarray.splice(exist , 1);
                artarray.splice(exist , 1);
                costarray.splice(exist , 1);
                counter--;
            }else {     
                sumarray[exist] = form.elements(field).value;
                artarray[exist] = form.elements(field).name;
                costarray[exist] = preis;
            }
        }else { 
            sumarray[counter] = form.elements(field).value;
            artarray[counter] = form.elements(field).name;
            costarray[counter] = preis;
            counter++;
        }

        var completestring = "";

        if (counter > 0) {
            var product = 0;
            completestring += "<h1>Warenkorb</h1><table border=0><tr style='background:gray;' align='center'><td width=110 align='center'>Artikel</td><td width=80>Anzahl</td><td align='center' width=60>Preis</td><td align='center' width='40'>Del</td></tr>";

            for(var i=0;i<counter;i++){
                completestring += "<tr><td>"+artarray[i].replace("_", " ")+"</td><td align=center>"+sumarray[i]+"</td><td align=center>"+costarray[i]+"</td><td align=center><img src='img/trash.png' onclick='setZero(\""+artarray[i]+"\")'></td></tr>";
                product += parseInt(sumarray[i])*parseInt(costarray[i]);

            }
            completestring += "</table><h2>"+(product).toFixed(2)+"</h2>";
        } else {
            completestring += "<h1>Warenkorb</h1>";

        }

        document.getElementById("sum").innerHTML = completestring;
    }

    function setZero(element) {
        var form = document.forms[0];   
        form.elements[element].value = "0";
        var obj = form.elements[element];
        updateCosts(obj, element, "b");

    }
</script>

For ie8 indexOf() method for Array will give error. Check this

Community
  • 1
  • 1
999k
  • 6,257
  • 2
  • 29
  • 32
  • Thank you for your quick answer, but `indexOf()` is also a function of Array. Your solution might fix something though. – HolgerS Apr 29 '13 at 09:37
  • Quick answer :-).. i dont think this is quick... I checked here i ie8. For ie 8 indexOf will give error. Please see this link http://stackoverflow.com/questions/3629183/why-doesnt-indexof-work-on-an-array-ie8 – 999k Apr 29 '13 at 09:44
0

I think the problem is related to passing "this" to the function. It seems to be passing the button.

Try replacing

var form = obj.form;

with

var form=document.forms[0]

and ignore the reference to "obj"

ElPedro
  • 576
  • 10
  • 17
  • Yes, as mentioned I already tried that without much luck. `object.form` does deliver the correct form in any browser I have tested so far. That is not it. – HolgerS Apr 29 '13 at 09:41
0

Ok, so here is the solution packed together into one answer:

I was facing two problems:

the first one was, that an attribute name in XML can not start with a Number. I solved this by simply adding a letter in front, which i could delete for the String lateron using the replace-function.

The second problem was that the IE8 does not have the Array function indexOf(). Thank you 555k for your help here, you gave me the final piece to the puzzle. I wrote a small workaround, that suits my situation:

var exist = -1;
var needle = form.elements[field].name;
for (var i=0;i<counter;i++){
    if (artarray[i].indexOf(needle) != -1){
        exist = i;
    }
}

This does exactly what I want, so it works for my problem. It is, of cause, not a solution to the problem of a nonexistant "indexOf()" for an aged browser, but maybe someone can use this.

HolgerS
  • 87
  • 7