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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Getting Element(button) on form with no ID

    Hello All,

    I am fairly new to javascript. I need to access a button on a form and perform task using onclick. When I view the source of the page, the id of the button seems to be dynamic with a 'Link' suffix. (ex. xtydLink). How can I access this button if I cannot use getelementbyid because the ID changes?

    Thanks in advance

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    You need to find another way to identify the button.

    Maybe it's the first button in the DOM
    Code:
    var mybutton = document.getElementsByTagName('button')[0];
    Maybe it's the first button on the second form
    Code:
    var mybutton = document.getElementsByTagName('form')[1].getElementsByTagName('button')[0];
    Maybe the button has a unique name attribute
    Code:
    var mybutton = document.getElementsByName('buttonname')[0];
    Does it have a class and is it the third element of this class in the DOM?
    Code:
    var mybutton = document.getElementsByClassName('buttonclass')[2];

  • #3
    New Coder
    Join Date
    Jul 2008
    Location
    Peterborough - UK
    Posts
    63
    Thanks
    4
    Thanked 9 Times in 9 Posts
    As above, HTML forms can be traversed in javascript thus:

    Code:
    var button = document.forms['formName']['buttonName'];
    or, using dot-notation (does the same thing in this context):

    Code:
    var button = document.forms.formName.buttonName;
    That's all very well and good, but what about an example?

    Code:
    <form name="myForm">
        <input type="text" value="Hello World" name="myButton" />
    </form>
    then...
    Code:
    <script type="text/javascript">
    
    var btn = document.forms['myForm'].myButton;
    
    alert(btn.value);
    
    </script>
    You should get 'Hello World' alerted.


    Hope this helps some!
    M
    Last edited by Mikebert4; 03-22-2012 at 06:51 PM. Reason: Removed ego slightly

  • #4
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks devnull69 ,

    This is what is the source:

    </table>
    <table><tr><td><table style="vertical-align: text-bottom; display: inline;" width=1% cellpadding=0 cellspacing=0 border=0><tr><td nowrap style="border: none;"><a id="nzddLink" title="SAVE" class="button" href="javascript: submitfields()" onfocus="document.getElementById('nzdd').onmouseover();" onblur="document.getElementById('nzdd').onmouseout();" ><div id=nzdd class=button_off onMouseDown="mousedownButton('nzdd');" onMouseUp="highlightButton(false, 'nzdd');" onMouseOver="highlightButton(true, 'nzdd');" onMouseOut="highlightButton(false, 'nzdd');" style=""><img src="/MRimg/save.png" alt="SAVE" border=0 align=absmiddle id="nzdd_image"> <span id="nzdd_textSpan" style=" font-weight: bold; height: 18px; cursor: pointer;">SAVE</span></div></a></td></tr></table></td><td><label class=tinyText >Note: You must click this 'SAVE' button BEFORE clicking the 'SAVE' button on the main Create Page.</label></td></tr></table>

    I need to set a variable when this button is clicked. "nzdd" appears to change everytime this page is loaded.

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    The button has a class "button_off". If it is the only element with this class on the page, you can get the button with
    Code:
    var mybutton = document.getElementsByClassName('button_off')[0];
    
    mybutton.onclick = function() {
       // set a variable when button is clicked
       avariable = "whatever";
    }

  • #6
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again!

    Unfortunately this class is not unique to this element (button)...

  • #7
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Any other suggestions?

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    can you add stuff to the html? because the obvious suggestion would seem to be
    Code:
    html:
    onMouseDown="mousedownButton('nzdd');setVar()" 
    
    js:
    
    function setVar() {
       avariable = "whatever";
    }

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,103
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    Can't you find *ANYTHING* in there that doesn't change on each page load?

    For example is title="SAVE" always there?

    Of is <img src="/MRimg/save.png" ... /> always there?

    If you can tell us anything that is consistent, you could find the button.
    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.

  • #10
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks but unfortunately I cannot modify the HTML. That would definately open up a lot of options but I guess that would make it too easy!

    Also what would make the ID different each time the page is loaded?

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,103
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    Quote Originally Posted by wwinters View Post
    Also what would make the ID different each time the page is loaded?
    Paranoia on the part of the page designers? They don't WANT to make it easy for you?

    It's trivial to do this from server-side code. Just pick a random name each time the page loads.
    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.

  • #12
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes. The 'Title" as well as the "img src" are consistently distinctive for this element on this page. How can I use this information to get the button ID?

    Thanks again!

  • #13
    New Coder
    Join Date
    Mar 2012
    Posts
    13
    Thanks
    0
    Thanked 1 Time in 1 Post
    are these the only two tables in the html.

    if so, this should work if not all you need to know is the index of that table
    Code:
      var firstTable = document.getElementsByTagName("table");
    
      innerTable = firstTable[0].rows[0].cells[0].firstChild
    
      link = innerTable.rows[0].cells[0].firstChild;
    
      link.innerText = "sam is the man";
    
        <table>
        <tr>
        <td>
        <table style="vertical-align: text-bottom; display: inline;" width=1% cellpadding=0 cellspacing=0 border=0>
        <tr>
        <td nowrap style="border: none;">
        <a id="nzddLink" title="SAVE" class="button" href="javascript: submitfields()" onfocus="document.getElementById('nzdd').onmouseover();" onblur="document.getElementById('nzdd').onmouseout();" >
        <div id=nzdd class=button_off onMouseDown="mousedownButton('nzdd');" onMouseUp="highlightButton(false, 'nzdd');" onMouseOver="highlightButton(true, 'nzdd');" onMouseOut="highlightButton(false, 'nzdd');" style="">
        <img src="/MRimg/save.png" alt="SAVE" border=0 align=absmiddle id="nzdd_image"> 
        <span id="nzdd_textSpan" style=" font-weight: bold; height: 18px; cursor: pointer;">
        SAVE</span>
        </div>
        </a>
        </td>
        </tr>
        </table>
        </td>
        <td>
        <label class=tinyText >Note: You must click this 'SAVE' button BEFORE clicking the 'SAVE' button on the main Create Page.</label>
        </td>
        </tr>
        </table>
    Last edited by SamHuff; 03-23-2012 at 06:55 PM.

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    if the title "SAVE" is unique...

    Code:
    <script type="text/javascript">
    		var myvar;
    		
                thelinks=document.getElementsByTagName("a");
    			for (var i = 0; i < thelinks.length; i++) {
                if (thelinks[i].title=="SAVE"){
    			thelinks[i].onclick=function(){
    			myvar="whatever"
    				}
    			}
    		}
            </script>

  • #15
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I believe that I am still missing something so I am uploading the source behind this form. Also a little background on what I am trying to do: I added code to alert the user when they try to close the form using the 'X' instead of saving first. Unfortunately when the user clicks the save button it also closes the form and still displays the alert. I want to set a flag when the user clicks the save button like noalert and check it when closing the form. Is this solution feasible or is there a better approach?

    Thanks again!
    Attached Files Attached Files


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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