Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Set onclick event for checkboxes by name

    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:

    Code:
    <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.

    Code:
    <script>
    document.getElementByName("input_1.1").onclick = setProductPrice();
    </script>
    Any idea on what I'm missing? Thanks in advance for your help.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,298
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    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:-


    Code:
    <form>
    Checkbox <input id="prodmonth[]" type="checkbox" tabindex="1" value="Some Value" name="input_1.1">
    </form>
    
    <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");
    }
    
    </script>

    10) Poo Jar. Crap claws in a crispy breadcrumb. - Thai restaurant menu, Rye.
    Last edited by Philip M; 07-17-2012 at 08:31 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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.
    Last edited by jasonmwhitaker; 07-17-2012 at 08:37 PM.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,298
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Quote Originally Posted by jasonmwhitaker View Post
    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 ....

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    jasonmwhitaker (07-17-2012)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    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
    Code:
    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:
    Code:
    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
    Code:
    document.forms[0]["input_1.1"].onclick = setProductPrice;
    But, again, Philip shows that once again there are many answers to any programming question.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    jasonmwhitaker (07-17-2012)

  • #6
    New Coder
    Join Date
    Nov 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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!

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •