JavaScript: Dynamic Field Names

Question

HI All,

I have a piece of javaScript that removes commas from a provided string (in my case currency values)

It is:

 function replaceCommaInCurrency(myField, val)
 {
  var re = /,/g;

  document.net1003Form.myField.value=val.replace(re, '');
 }

'MyField' was my attempt to dynamically have this work on any field that I pass in, but it doesn't work, I get errors saying 'MyField' is not valid. I sort of get my, but I thought this was valid.

I am calling by using: onBlur="replaceCommaInCurrency(this.name, this.value);return false;"

this.name and this.value are passing in the right values...field name and its value.

How do I do this dynamically?

-Jason

Answer 1

If you code it right into the markup like that, e.g. onblur="replaceCommaInCurrency(this)", the control originating the event gets passed as the parameter. Then you should be able to do something like:

myField.value = myField.value.replace(re, '');

with jQuery:

var jqField = $(myField);
jqField.val(jqField.val().replace(re, ''));

Answer 2

You can use eval to make your code snippet work:

eval("document.net1003Form." + myField + ".value=val.replace(re, '');");

As mentioned below, the square brackets work (and don't suck like eval), stupid me for forgetting about those:

document.net1003Form[myField].value=val.replace(re, '');

Alternatively, try something like this:

function replaceCommaInCurrency(field){
    var re = /,/g;
    field.value = field.value.replace(re, '');
}

Which gets called like so:

onBlur="replaceCommaInCurrency(this); return false";

You should consider using a javascript toolkit for things like this. You could set a class like "currency" on each input, then use this snippet of jQuery based Javascript to handle everything:

$(function(){
    $("input.currency").bind('blur', function(){
     this.value = $(this).val().replace(',', '');
    })
});

This code would fire on document ready, attach an event handler to each input with currency as its class, and then do the replacements. Note that you don't need a regex for replacement as well.

Answer 3

    function removeCommaInCurrency(myField)
    {
            var re = /,/g;

            myField.value=myField.value.replace(re, '');
    }

-- and then call it like this:

<input type="text" name="..." onchange="removeCommaInCurrency(this);">

Answer 4

In general, you should be using a framework that will handle low level functionality like this, but the specific answer to your question is to use bracket notation for the field name:

function replaceCommaInCurrency( myField, val)
{
  var re = /,/g;

  document.net1003Form[myField].value=val.replace(re, '');
}

Answer 5

flatline and roenving's solution with ‘this’ is the cleaner approach, it also avoids the problems of ‘document.formname.fieldname’.

(Use ‘document.forms.formname’ to access a form without possible clashing on forms having the same name as members of the document object, and ‘forms.elements.fieldname’ to do the same with fields. Like all JavaScript object, object[namevariable] can also be used. Or, better, add IDs and use the unambiguous document.getElementById method.)

By moving binding into the script you can also remove the inline JavaScript of the onclick attribute, making the markup cleaner still:

<input type="text" class="number" name="something" />
...
<script type="text/javascript"> // external script is best, linked after all forms
    function numberfield_bind() {
        var inputs= document.getElementsByTagName('input');
        for (var inputi= inputs.length; inputi-->0;)
            if (inputs[inputi].className=='number')
                inputs[inputi].onchange= numberfield_change;
    }
    function numberfield_change() {
        this.value= this.value.split(',').join('');
    }
    numberfield_bind();
</script>