Menu
I'm trying to figure out how to select the textarea in the code below using xpath and JavaScript (which is the only option here).
<body>
<div id="calculator">
<div id="calculatorController">
<form action="#" method="get" onsubmit="return false">
<p>
<textarea disabled="disabled"></textarea>
</p>
</form>
...
I'm trying to do something like this
var element = document.evaluate( '//body/form/p/textarea' ,document, null, XPathResult.ANY_TYPE, null );
// and write back
element.value = "Hello textarea";
But it fails
Anyone keen to help?
Thanks
Update below this
============================================================
The entire block of code looks like this.
Don't forget the window.onload=function()
<html>
<head>
<script type='text/javascript'>
//<![CDATA[
window.onload=function(){
var element = document.evaluate( '//body//form/p/textarea' ,document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue;
if (element != null) {
element.value = 'Hello textarea';
}
}
//]]>
</script>
</head>
<body>
<div id="calculator">
<div id="calculatorController">
<form action="#" method="get" onsubmit="return false">
<p>
<textarea disabled="disabled"></textarea>
</p>
</form>
</div>
</div>
</body>
</html>
934
This document describes the interface for using XPath in JavaScript internally, in extensions, and from websites. Mozilla implements a fair amount of the DOM 3 XPath, which means that XPath expressions can be run against both HTML and XML documents.
To find a unique attribute for your DOM: Open the context menu (right-click) for the element (such as a button, input field, div, span, or h1). Choose Inspect element (Mozilla Firefox) or Inspect (Google Chrome). Note the unique DOM attribute that you'll use to identify your element (such as id, class, or name).
The evaluate method does not return a DOM node as you seem to expect. You would need
var element = document.evaluate( '//body//form/p/textarea' ,document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue; if (element != null) { element.value = '...'; } @Mark Robinson comment is right, your Xpath expression is wrong, you could use one of those :
//body/div/div/form/p/textarea (Mark's example) //body//form/p/textarea (any form in body) Plus, the evaluate function will return a XPathResult object, not the textarea, so you can't do directly element.value
Here is your example fixed:
<body> <div id="calculator"> <div id="calculatorController"> <form action="#" method="get" onsubmit="return false"> <p> <textarea disabled="disabled"></textarea> </p> </form> </div> </div> </body> --
var element = document.evaluate( '//body/div/div/form/p/textarea' ,document, null, XPathResult.ANY_TYPE, null ); var textarea = element.iterateNext (); textarea.value = "Hello textarea"; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
