how to get hidden values in webdriver using javascript - javascript

There's a hidden input field in which I'm trying to insert a specific date value. The field originally produces a value, from which a user can select an appropriate value.
The page's source code looks like this:
<div id="change_img">
<img width="80" height="30" border="1" src="http://jntuh.ac.in/results/images/CaptchaSecurityImages.php?width=100&height=50&characters=5&code=ryyrh">
<br>
<input id="code" type="hidden" value="ryyrh" name="code">
</div>

Use WebElement's getAttribute method. In your case it will be:
WebElement hiddenInput = driver.findElement(By.id("code"));
String value = hiddenInput.getAttribute("value");
If for any reason you need to do it with javascript (your question specifically asked for js) then this code should work:
String script = "return document.getElementById('code').getAttribute('value');";
String value = ((JavascriptExecutor) driver).executeScript(script).toString();

I tested this solution in C# and it works. I am then able to parse the returned string to find and verify what I need.
http://yizeng.me/2014/04/08/get-text-from-hidden-elements-using-selenium-webdriver/
So in the example in the question you would get the innerHTML of the visible parent "change_img" element which will include the hidden element.

Solution in Python:
script = "return document.getElementById('code').getAttribute('value');";
print(driver.execute_script(script))
Solution in C#:
string script = "return document.getElementById('code').getAttribute('value');";
string value = ((IJavaScriptExecutor)driver).ExecuteScript(script).ToString();

Related

Get the text value when DOM doesn't have either title/value field

I would like to take the value using selenium from the text-box which is ready only and aria-live marked as off.
DOM as below:
<input autocomplete="off" class="abc" type="text" role="textbox" id="sumAccount" aria-describedby="sumAccount_describedby" tabindex="0" readonly="true" data-preview="true" aria-live="off">
In the webpage Summary of Account field is showing the value as "4567" ready only field
I have tried the below code to get the value, I am getting null value always:
string accNumber = driver.findElement(By.id("sumAccount")).getAttribute("title");
string accNumber = driver.findElement(By.id("sumAccount")).text();
Can any one help me to get the value?
To extract the value using Selenium from the <input> which is ready only and aria-live="off" you can use the following solution:
string accNumber = driver.findElement(By.id("sumAccount")).getAttribute("value");

HTML & Javascript change content inside angle brackets ( < > )

Just wanted to know if it is possible to change with pure Javascript the content between the angle brackets in a HTML tag.
By this I mean all the content, not only the tag name, not only the id, not only the class and all the different attributes but everything inside, even non standart HTML code.
One small example:
Before
<div id="myID" class="myCLASS" whaterver-content ></div>
After Javascript DOM function
<div id="myID" class="myCLASS" other-content ></div>
I know tag name, id and class can be modified with DOM Element Object functions in JS. Is there any nice function that does the same for data not inside quotes and not before an attribute?
Thanks for your answers.
EDIT: I just saw this Set attribute without value by asking the question on another way. But is the result the same? Or will there be ="" after the attribute?
I do not like the accepted answer. You should not be manipulating HTML as string. It is not safe and performance is usually really bad.
Imagine that whaterver-content is actual text somewhere inside that div, for example as user input. It will get replaced when it should not be.
Please use DOM manipulation directly:
var element = document.getElementById('myID');
element.removeAttribute("whaterver-content");
element.setAttribute("other-content", "");
How about using replace on the element's outerHTML attribute?
function change() {
document.getElementById('myID').outerHTML =
document.getElementById('myID').outerHTML.replace('whaterver-content','other-content');
console.info(document.getElementById('myID').outerHTML);
}
<div id="myID" class="myCLASS" whaterver-content ></div>
<input type='button' onclick='change();' value='change' />

Can not copy data of HTML tags to JavaScript

For some reasons I am trying to change functionality of submit button. I am facing problem in copying data from HTML tags to JS. The alert generated by following code prints "Undefined" not the data inside tag.
<html>
<body>
<input class="inputtext" id="email" name="email" type="text"></div>
<input value="Submit" name="v4l" id="login" class="inputsubmit" type="button" onclick="myFunction();return false">
<script>
function myFunction() {
var TestVar =document.getElementsByClassName('login').value;
alert(TestVar);
}
</script>
</body>
</html>
I know it can be done by form but I need it this way.
try
var TestVar = document.getElementById('email').value
alert(TestVar);
this will get value of text field
getElementsByClassName
^
See that s? Elements is plural. getElementsByClassName returns a NodeList (which is like an Array).
You have to either pick an index from it (foo[0]) or loop over it to get the values.
That said, you don't actually have any elements that are a member of the login class, so it is going to return a Node List of zero length.
You do have an element with id="login", so maybe you should use getElementById instead.
There doesn't seem much point in reading the value from an element that you've hard coded the value for. You might actually want to be using document.getElementById('email')

ASP: Get the value from javascript using getElementbyId

I am trying to get value from javascript using getElementbyId but i am not getting it.
If i put,
<input type="text" id="disprice<% =pID %>" value="<%=disprice%>" name="Price" />
like this then i am getting value from java script in my text box.
But if i try to get that same thing like this,
<span class="productListPrice" id="disprice<% =pID %>">
then i am not getting the value..
Please help me if possible.
Mitesh
Your texbox needs an id.
More details http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_getelementbyid
#mitesh: Here's some sample code that should help --
JavaScript:
var price = document.getElementById('Price');
ASP:
Dim iPrice
iPrice = Request.Form("Price")
HTML:
<input type="text" id="Price" name="Price" value="<%=iPrice %>">
Only input values are transmitted back to the server on a postback and the name is used (not the id). The id is primarily for doing things in JavaScript client-side.
Also, in both cases, getElementById will return the element with the given id. However, the element itself is different (a span as no inherent value). This step may require some more troubleshooting to determine "what" isn't working.

How to refer html element id specified in visualforce and pass onto javascript function?

I have apex tag that generate input text field.
<apex:page id="my_page">
<apex:inputText id="foo" id="c_txt"></apex:inputText>
</apex:page>
When someone clicks this field, I want to execute javascript.
But when I check the HTML source, this apex tag which becomes input tag has (I think) dynamically generated part.
<input type="text" size="50" value="Tue Nov 16 00:00:00 GMT 2010"
name="j_id0:j_id3:j_id4:c_txt" id="j_id0:j_id3:j_id4:c_txt">
As you can see id has junk part :(
id="j_id0:j_id3:j_id4:c_txt"
In my Javascript I'm trying to getElementById('c_txt') but this does not work of course. How to deal with this???
UPDATE
Seems like I can do this but not working...
<apex:includeScript value="{!URLFOR($Resource.datepickerjs)}"></apex:includeScript>
<apex:inputText id="foo" id="c_txt" onclick="javascript:displayDatePicker()" />
datepickerjs
var elem = getElementById('c_txt');
alert(elem);
The alert shows 'null' so something must be wrong.
Even this alert returns null...
var targetDateField = document.getElementById('{!$Component.my_page:c_txt}');
alert(targetDateField);
You can use the $Component notation in javascript, you use it like so:
var e = document.getElementById("{!$Component.ComponentId}");
One thing to be wary of though, is if your element is contained within several levels of Visualforce tags which have IDs:
<apex:pageBlock id="theBlock">
<apex:pageBlockSection id="theBlockSection">
<apex:commandLink action="{!someAction}" value="LINK!" id="theLink"/>
// snip
// in javascript you would reference this component using:
document.getElementById("{!$Component.theBlock.theSection.theLink}");
I got solution to my problem.
$Compoent global visualforce expression can only be used in visualforce code not inside of
Javascript as far as my search.
Below code works fine. It outputs the value in the inputText field to js alert message Now you can pass id attribute to the Javascript and process whatever the task needed.
Created Date: <apex:inputText id="dah" value="{!created}" size="50"
onclick="javascript:go('{!$Component.dah}')"></apex:inputText>
<script>
function go(field) {
var huh = document.getElementById(field).value;
alert(huh); //returns the string u put inside of input text field
}
</script>

Categories

Resources