View Full Version : Set onclick event for checkboxes by name

07-17-2012, 07:13 PM
Hello, all. I've dug through the forums and tried several dozen variations of the solutions posted, none working so far.

I have an input field generated by a CMS that I cannot edit:

<input id="prodmonth[]" type="checkbox" tabindex="1" value="Some Value" name="input_1.1">

I am trying to add a simple onclick event to this input.

Due to another script that's running and other fields with the same ID, I need to use the name to identify the element, not the ID.

This is what I'm using. It doesn't generate anything, not an empty onclick attribute or anything. I am running it last in the footer after all other scripts.

document.getElementByName("input_1.1").onclick = setProductPrice();

Any idea on what I'm missing? Thanks in advance for your help.

Philip M
07-17-2012, 08:12 PM
There is no such thing as getElementByName(); getElementsByName() returns a node list (in effect an array) and since you must give radio buttons a common name, it can be used to get the whole group. Otherwise it has limited uses.

Try this:-

Checkbox <input id="prodmonth[]" type="checkbox" tabindex="1" value="Some Value" name="input_1.1">

<script type = "text/javascript">

var obj = document.forms[0]["input_1.1"]; // note that you must use square bracket notation where the name includes a period.
obj.onclick = function(){setProductPrice()}

function setProductPrice() {
alert ("OK");


10) Poo Jar. Crap claws in a crispy breadcrumb. - Thai restaurant menu, Rye.

07-17-2012, 08:26 PM
Thanks, but that didn't take either. I'm going to try to rewrite the other functions to make room for doing this by ID instead of name.

Philip M
07-17-2012, 08:34 PM
Thanks, but that didn't take either. Do you think we need to rewrite the other functions and have this function update the onclick with getElementById instead of Name?

Well, it works fine for me. :) The fault, dear Brutus, lies not in the stars ....

Old Pedant
07-17-2012, 08:36 PM
And there is no such thing as getElementByName.

The closest is getElementsByName() [plural!!!], which returns an *array* of elements of that name.

So you COULD do

document.getElementsByName("input_1.1")[0].onclick = setProductPrice;

Note that you CAN NOT use parentheses after setProductPrice else the function is called AT THE TIME that you make the assignment to onclick! You want a REFERENCE to the function, so that means you use only the name of the function.

You can also do it as Philip showed:

document.getElementsByName("input_1.1")[0].onclick = function() { setProductPrice(); };

but I really can't see any need to do this in this example.

In any case, Philip's suggestion to get the element by way of the <form> is superior. Though I would have done it as simply

document.forms[0]["input_1.1"].onclick = setProductPrice;

But, again, Philip shows that once again there are many answers to any programming question.

07-17-2012, 08:40 PM
Thanks. We went back and rewrote the old function to look for getElementsByName, ran some JS to update all the checkboxes to have the name prodmonth[], then ran this alteration of the suggested code in the footer for each of the IDs.

It doesn't attach an onclick event to the input in the HTML, but it triggers one which is all that matters to me.

Thanks you two!

<script type = "text/javascript">
var obj = document.getElementById('choice_1_1');
obj.onclick = function(){setProductPrice()}