...

View Full Version : Getting Element(button) on form with no ID



wwinters
03-22-2012, 04:27 PM
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

devnull69
03-22-2012, 04:58 PM
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];

Mikebert4
03-22-2012, 05:46 PM
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

wwinters
03-22-2012, 05:47 PM
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.

devnull69
03-22-2012, 07:21 PM
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";
}

wwinters
03-22-2012, 08:14 PM
Thanks again!

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

wwinters
03-22-2012, 08:59 PM
Any other suggestions?

xelawho
03-22-2012, 10:53 PM
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";
}

Old Pedant
03-22-2012, 11:02 PM
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.

wwinters
03-22-2012, 11:03 PM
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?

Old Pedant
03-22-2012, 11:05 PM
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.

wwinters
03-23-2012, 05:31 PM
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!

SamHuff
03-23-2012, 05:52 PM
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>

xelawho
03-23-2012, 06:14 PM
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>

wwinters
03-27-2012, 03:14 PM
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!

wwinters
04-02-2012, 03:33 PM
Any idea for a solution for this problem?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum