JS Function not working for Multiple Input Text Fields In Internet Explorer

Question

I am attempting to check the field to determine whether or not it is a number (no non-numeric characters except .). If the field's value is a number, convert it to a two-decimal format. Currently the code is working in FireFox and Chrome, but I am having trouble with Internet Explorer (multiple versions, specifically tested on IE8 and IE9). I have been messing around with it for a few hours and haven't been able to look up a solution to the problem. In Internet Explorer, only the first field works correctly. The other fields do not work correctly and Internet Explorer does not trigger an error.

This is the relevant code in the html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

 <head>
  <script type="text/javascript" src="amount.js"></script>
 </head>

 <body>
  <input type="text" id="amount1" onChange="changeAmount(this.id);"/>
  <input type="text" id="amount2" onChange="changeAmount(this.id);"/>
  <input type="text" id="amount3" onChange="changeAmount(this.id);"/>
  <input type="text" id="amount4" onChange="changeAmount(this.id);"/>
  <input type="text" id="amount5" onChange="changeAmount(this.id);"/>
 </body>
</html>

This is the relevant code from amount.js:

function changeAmount(input)
{
   var pattern = /([^0-9\.])+/;
   var ctl = document.getElementById(input);
   var myvalue = ctl.value;

   if(myvalue != "" && !pattern.test(myvalue))
   {
     myvalue = parseFloat(myvalue);
     myvalue = myvalue.toFixed(2);
     if(!pattern.test(myvalue))
     {
        ctl.value = myvalue;
     }else
     {
        ctl.value = '';
     }
   }
}

I am going to browse some more threads on here to see if I can't find the solution.

Thanks for any help in advance.

Answer 1

With this HTML:

<input type="text" id="amount1" onChange="changeAmount(this);"/>
<input type="text" id="amount2" onChange="changeAmount(this);"/>
<input type="text" id="amount3" onChange="changeAmount(this);"/>
<input type="text" id="amount4" onChange="changeAmount(this);"/>
<input type="text" id="amount5" onChange="changeAmount(this);"/>

Try using this Javascript:

function changeAmount(input) {
    var myvalue = input.value;
    myvalue = parseFloat(myvalue);
    if (!isNaN(myvalue)) {
        input.value = myvalue.toFixed(2);
    } else {
        input.value = "";
    }
}

DEMO: http://jsfiddle.net/7rDeg/4/

It uses my recommended change of passing this instead of this.value to the function.

Also, there's no need for regular expressions. Just attempt to parse the value with parseFloat . If it's a success, then fix the number with 2 decimals and re-set the input's value. Otherwise, clear the textbox.

UPDATE:

While that should all work fine, I'd recommend against using inline event handlers. So for example, it's ideal to use this HTML:

<input type="text" id="amount1" />
<input type="text" id="amount2" />
<input type="text" id="amount3" />
<input type="text" id="amount4" />
<input type="text" id="amount5" />

with this Javascript:

function changeAmount() {
    var myvalue = this.value;
    myvalue = parseFloat(myvalue);
    if (!isNaN(myvalue)) {
        this.value = myvalue.toFixed(2);
    } else {
        this.value = "";
    }
}

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    } else {
        element["on" + eventName] = callback;
    }
}

window.onload = function () {
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type === "text") {
            addEvent(inputs[i], "change", changeAmount);
        }
    }
};

DEMO: http://jsfiddle.net/7rDeg/6/

Note: With parseFloat , it will strip any trailing non-numeric characters. For example, the input "234.35234a" will be parsed as "234.35234" (therefore passing the !isNaN(myvalue) condition) and fixed as "234.35". If you don't want this to happen use:

myvalue = +myvalue;

instead of the parseFloat line.

JS Function not working for Multiple Input Text Fields In Internet Explorer

Question

1 answers

solution1
0 ACCPTED 2013-04-17 19:56:16

JS Function not working for Multiple Input Text Fields In Internet Explorer

Question

1 answers

solution1 0 ACCPTED 2013-04-17 19:56:16

solution1
0 ACCPTED 2013-04-17 19:56:16