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

You need to find another way to identify the button.

Maybe it's the first button in the DOM

var mybutton = document.getElementsByTagName('button')[0];

Maybe it's the first button on the second form

var mybutton = document.getElementsByTagName('form')[1].getElementsByTagName('button')[0];

Maybe the button has a unique name attribute

var mybutton = document.getElementsByName('buttonname')[0];

Does it have a class and is it the third element of this class in the DOM?

var mybutton = document.getElementsByClassName('buttonclass')[2];

As above, HTML forms can be traversed in javascript thus:


var button = document.forms['formName']['buttonName'];


or, using dot-notation (does the same thing in this context):


var button = document.forms.formName.buttonName;


That's all very well and good, but what about an example?


<form name="myForm">
<input type="text" value="Hello World" name="myButton" />
</form>

then...

<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

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.

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

var mybutton = document.getElementsByClassName('button_off')[0];

mybutton.onclick = function() {
// set a variable when button is clicked
avariable = "whatever";
}

Thanks again!

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

Any other suggestions?

can you add stuff to the html? because the obvious suggestion would seem to be

html:
onMouseDown="mousedownButton('nzdd');setVar()"

js:

function setVar() {
avariable = "whatever";
}

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.

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?

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.

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!

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

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>

if the title "SAVE" is unique...


<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>

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!

Any idea for a solution for this problem?