Javascript function argument setting through DOM

Question

I have a select element which I'm creating through javascript (DOM)

var cell_stock_id = row.insertCell(0);
var cell_stock_id_sel = document.createElement('select');

I have kept an onchange javascript function for this-

cell_stock_id_sel.setAttribute("onchange","populateOtherFields");

The function gets called when i change the selected option in select.

Is there a way I can pass an argument to this function "populateOtherFields" ?

I have a select box and a lot of text fields in a table row. I want to populate those rows based on the selection. I'm able to access the data which has to be inserted in those fields, but I don't know how to enter the data in those textfields for that row. I'm thinking of passing a unique number which will identify with the names of the elements in a row, and the javascript will parse that pattern in the names of the elements of the row.

 document.forms["0"].elements[i].name.indexOf("pattern").

So is there a way by which i can pass this "pattern", which is essentially the iteration (no. of rows, row number) number.

select__1, text__1, text2__1
select__2, text__2, text2__2

The '__1' , and the '__2' need to be passed. And they're not static patterns. Could be any number.

T.J. Crowder · Accepted Answer · 2012-06-12 10:21:29Z

4

Don't use setAttribute to set up event handlers, use direct assignment or (better) addEventListener / attachEvent and then you can create a function that will call your function with the desired arguments. (You could do that anyway, of course, but using setAttribute you'd either have to do it inline or create yet another global, named function.)

Direct assignment:

cell_stock_id_sel.onchange = function() {
    populateOtherFields(arguments, here);
};

Works on all browsers, but you can only have a single change handler on the element using this method (as with setAttribute).

addEventListener:

cell_stock_id_sel.addEventListener('change', function() {
    populateOtherFields(arguments, here);
}, false);

This is the standard, but it doesn't exist on older versions of IE.

attachEvent:

cell_stock_id_sel.attachEvent('onchange', function() {
    populateOtherFields(arguments, here);
});

This is IE-only (er, mostly, some browsers throw a bone to IE-only sites). It's Microsoft's pre-standard way of doing it. In IE8 and above in standards mode, you can use addEventListener instead.

Another advantage of all of these methods is that you don't have to have any global functions, whereas the setAttribute way, if you use a function name, that function has to be global. The global namespace on browsers is already really crowded, I always recommend avoiding adding to the clutter.

Because of the various vagaries between browsers, I tend to recommend using any decent JavaScript browser library such as jQuery, YUI, Closure, or any of several others. These smooth over differences like the addEventListener / attachEvent thing and also provide a lot of helpful utility functionality.

answered Jun 12, 2012 at 10:21

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chinmay Over a year ago

Thanks. I tried this- cell_stock_id_sel.addEventListener('change',function(){ populateOtherFields(5); },false); . However, the function populateOtherFields(arg) { alert(arg); } gives "undefined" instead of "5". This is all there is to it, really. Is there some kind of formatting?

Chinmay Over a year ago

Ok This worked. I created a variable inside the function, assigned the value of the variable to it which i orginially wanted to pass, and the value is accessible at the function. many thanks.

user278064 · Accepted Answer · 2012-06-12 10:21:54Z

1

cell_stock_id_sel.addEventListener("onchange", function() {
    populateOtherField(arguments);
});

answered Jun 12, 2012 at 10:21

user278064

10.2k1 gold badge36 silver badges48 bronze badges

2 Comments

Chinmay Over a year ago

Thanks. I tried this- cell_stock_id_sel.addEventListener('change',function(){ populateOtherFields(5); },false); . However, the function populateOtherFields(arg) { alert(arg); } gives "undefined" instead of "5". This is all there is to it, really. Is there some kind of formatting?

Chinmay Over a year ago

Ok This worked. I created a variable inside the function, assigned the value of the variable to it which i orginially wanted to pass, and the value is accessible at the function. many thanks.

Collectives™ on Stack Overflow

Javascript function argument setting through DOM

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related