How can I access a variable from one Form in a different Form inside the same browser window?
Question
I am unable to get the value of a string from a specific Form in a web based system my company uses.
When opened in the browser it consists of three Forms (not frames). A thin left side Menu Form, a top thin horizontal Banner Form, and the other 80% of the bottom right loads in the Form that I am building.
I need to be able to grab a string from the top banner Form named "mainForm".
This string is dynamically populated as it is not set and it just appears between the TD tags. Also the TD element it resides in has no id or name, but it is the only instance of the class "userName".
I have tried several permutations trying to access this class/string combo.
Examples of what I have tried:
document.getElementsByClassName("userName")
document.querySelector('form[name="mainForm"] .userName').innterHTML
document.getElementsByClassName("userName")[0].innerText
document.mainForm.querySelector('.userName').innerText
document.forms.mainForm.getElementsByClassName('userName')
mainForm.getElementsByClassName("userName")
window.form["mainForm"].getElementsByClassName("userName")
document.form["mainForm"].getElementsByClassName("userName")
window.parent.document.getElementsByClassName("userName")
<!--Excerpts of code-->
<form name="mainForm" style="margin: 0px;" action="">
<table>
<tr>
<td align="right" class="userName" nowrap="">Target Text</td>
</tr>
</table>
</form>
<form id="myForm" method="post" action="">
<button type="button" id="btnLog" name="btnLog" onclick="getLog()">Get
Log</button>
</form>
function getLog() {
var elementLog = document.getElementsByClassName("userName");
var log = elementLog.textContent;
alert(log);
}
I expect the alert(log) to return the string value of the userName class.
What actually happens is either the alert triggers and says "undefined" or console errors of unable to get property of undefined or null reference.
2 answers
solution1
2 ACCPTED 2019-05-06 14:37:51
I believe what you are looking for is innerHTML (and not innterHTML ):
function getLog() { var elementLog = document.getElementsByClassName("userName")[0]; var log = elementLog.innerHTML; console.log(log); }
<!--Excerpts of code--> <form name="mainForm" style="margin: 0px;" action=""> <table> <tr> <td align="right" class="userName" nowrap="">Target Text</td> </tr> </table> </form> <form id="myForm" method="post" action=""> <button type="button" id="btnLog" name="btnLog" onclick="getLog()">Get Log</button> </form>
solution2
0 2019-05-06 14:55:07
function getLog() {
alert(document.getElementsByClassName("userName").item(0).innerText);
}
seems to have solved the problem !
replacing .item(0) by [0] is the same
also it is vital to put your javascript functions between the <head></head> tags or generally before you call them!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.