JS - Input Element Value null before inspecting the element - javascript

I have a strange case here.
What I'm trying to do is injection of javascript into the page using chrome extension.
That works so far,
Idea is that javascript looks up value of an element and if matches "Hobart" it alerts.
The issue is that value is returning as null, BUT when I inspect the element in chrome, the script starts recognizing the value of the element.
But after page refresh, goes back to null.
The input field element is always displaying "Hobart" on the page.
Its like the page is not allowing reading of the element by javascript if element is not inspected. Any ideas whats going on?
Screenshot 1
Screenshot 2
Another SS of changing color to red after "enabling" value readout by inspecting.
Javascript And HTML part of the page I'm trying to get value from:
state = document.getElementById("sys_display.incident.assignment_group").value;
if (state=="Hobart") {
document.getElementById("sys_display.incident.assignment_group").style.color="red";
alert("Hobart");
};
<div class="input-group ref-container ">
<input id="sys_display.incident.assignment_group" name="sys_display.incident.assignment_group" aria-labelledby="label.incident.assignment_group"
type="text"
autocomplete="off"
autocorrect="off"
value="Hobart"
data-type="ac_reference_input"
data-completer="AJAXReferenceCompleter"
data-dependent="null"
data-ref-qual="true"
data-ref="incident.assignment_group"
data-ref-key="null"
data-ref-dynamic="false"
data-name="assignment_group"
data-table="sys_user_group"
class="form-control element_reference_input "
style="; "
spellcheck="false"
onfocus="if (!this.ac) addLoadEvent(function() {var e = gel('sys_display.incident.assignment_group'); if (!e.ac) new AJAXReferenceCompleter(gel('sys_display.incident.assignment_group'), 'incident.assignment_group', 'null', 'true'); e.ac.onFocus();})"
aria-required="true">
</div>

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");

How to get "make" value from one HTML form to another?

I'm having an issue sharing a value between my HTML forms. I'm a beginner so this is probably a very easy fix.
Newvehicle.html:
<div class="input-group">
<input class="form-control" id="inputMake" type="text" placeholder="Make..." style="width: 150px;"/>
</div>
Item1.html:
<label>Make: </label><li onclick="getMake()"></li></br>
Newvehicle.js:
function getMake(){
var make = document.getElementById("inputMake").value;
}
I would like the value inputted into the text field on Newvehicle.html to display as a list item on Item1.html. Can someone please advise?
What you could do is, to save the value in localStorage and retrive it in the secound file.
A possible HTML solution would be:
Newvehicle.html:
<div class="input-group">
<input class="form-control" id="inputMake" type="text" placeholder="Make..." style="width: 150px;" onkeyup="localStorage.value1 = this.value" />
</div>
Item1.html:
<label>Make: </label><li id='entry_1'></li></br>
<script type="text/javascript">
document.getElementById('entry_1').innerHTML = localStorage.value1;
</script>
Newvehicle.js:
not required for that, but nice to have the whole logic in a seperate JS file
Explanation:
the onkeyup event fires up each time the usert releases a key on the keyboard, so with each firing we create/replace the value1 in localStorage.
right after the list element will a javasript code be executed that reads the value from localStorage in your case value1 and replaces the innerHTML.
keep in mid that this only works if you work on the same domain.Localstorage keeps the data until you clear the localstorage whit localStorage.clear()
alternatively you can use sessionStorage instead of localStorage tho keep the data only for one browsing session.
See:
Webstorage on W3C Schools
Keep on going and soon you will master the Javasript language.

Typeahead placing span tag after my label tag for my search. How can I add a label properly?

We have to be ADA compliant on our site. One of the things they look for is every form must have a label tag. The code has a label tag in the right place, but then when the javascript loads on the page, a span tag gets between the tag and the search field making it no longer compliant. I don't see a way to add a label. I was curious if anyone else had a suggestion for this or is there an alternative to typeahead that will work? In order to be compliant it must look like
<label for="search">Search: </label>
<input type="text" name="search" id="search"/>
For example the way it works now looks like...
<label for="search">Search: </label>
<span class="twitter-typeahead">
<input type="text" name="search" id="search"/>
</span>
There is no option to change the span tag that wraps your input. You can see where it is hardcoded in the source code here. Unfortunately, typeahead is no longer maintained either, so there will not be a future option to customize this.
However, you can always modify the code yourself. Either in the www.js file that I linked to (if you compile yourself) or in the bundle, find the buildHtml() function and change that line to an empty string.
function buildHtml(c) {
return {
wrapper: '',
menu: '<div class="' + c.menu + '"></div>'
};
}
I don't know if this will have unknown repercussions elsewhere in typeahead, but I just tried it on a page and everything seemed to be working fine.

Uncaught TypeError: Cannot set property 'value' of null

I'm trying to pass the entered text to the controller using an ajax request. But i'm getting athe error "Uncaught TypeError: Cannot set property 'value' of null " when I tried to execute JS file..
Here is the HTMLcode:
<form action="">
<input type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
<input type="button" class="searchbox_submit1" name="submit" value="text" onClick="javascript:getSearchText();">
</form>
Here is the JS code:
function getSearchText() {
var searchText = document.getElementByName("search").value;
h_url=document.getElementById("u").value;
var theURL = h_url+'search_all/' + deptid + '/' + searchText + '/1';
$.ajax({
url : theURL,
fail: function(){
},
success : function() {
},
error:function(){
}
});
}
Please help me to fix this.
You don't have an element with the id u.That's why the error occurs.
Note that you are trying to get the value of the input element with the name 'u' and it's not defined in your code.
The problem may where the code is being executed. If you are in the head of a document executing JavaScript, even when you have an element with id="u" in your web page, the code gets executed before the DOM is finished loading, and so none of the HTML really exists yet... You can fix this by moving your code to the end of the page just above the closing html tag. This is one good reason to use jQuery.
In case anyone landed on this page for a similar issue, I found that this error can happen if your JavaScript is running in the HEAD before your form is ready. Moving your JavaScript to the bottom of the page fixed it for my situation.
The problem is that you haven't got any element with the id u so that you are calling something that doesn't exist.
To fix that you have to add an id to the element.
<input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
And I've seen too you have added a value for the input, so it means the input is not empty and it will contain text. As result placeholder won't be displayed.
Finally there is a warning that W3Validator will say because of the "/" in the end. :
For the current document, the validator interprets strings like according to legacy rules that break the expectations of most authors and thus cause confusing warnings and error messages from the validator. This interpretation is triggered by HTML 4 documents or other SGML-based HTML documents. To avoid the messages, simply remove the "/" character in such contexts. NB: If you expect <FOO /> to be interpreted as an XML-compatible "self-closing" tag, then you need to use XHTML or HTML5.
In conclusion it says you have to remove the slash. Simply write this:
<input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item...">
I knew that i am too late for this answer, but i hope this will help to other who are facing and who will face.
As you have written h_url is global var like var = h_url; so you can use that variable anywhere in your file.
h_url=document.getElementById("u").value;
Here h_url contain value of your search box text value whatever user has typed.
document.getElementById("u");
This is the identifier of your form field with some specific ID.
Your Search Field without id
<input type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
Alter Search Field with id
<input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
When you click on submit that will try to fetch value from document.getElementById("u").value; which is syntactically right but you haven't define id so that will return null.
So, Just make sure while you use form fields first define that ID and do other task letter.
I hope this helps you and never get Cannot set property 'value' of null Error.
guys This error because of Element Id not Visible from js Try to inspect element from UI and paste it on javascript file:
before :
document.getElementById('form:salesoverviewform:ticketstatusid').value =topping;
After :
document.getElementById('form:salesoverviewform:j_idt190:ticketstatusid').value =topping;
Credits to Divya Akka .... :)
It seems to be this function
h_url=document.getElementById("u").value;
You can help yourself using some 'console.log' to see what object is Null.
h_url=document.getElementById("u") is null here
There is no element exist with id as u
Add defer to your script tag, if it's in header. It will allow your script to execute after the DOM is loaded.
<script src="script.js type="text/javascript"></script>
It should look like this:
<script src="script.js type="text/javascript" defer></script>

jquery before() is out of order?

I have a page where you can click a link that says "add a keyword" and an input will appear and you can enter the keyword, and then convert it into a span tag on blur or the "return" key. However, I've been adding onto it to allow for an "autocomplete" feature, so I'm trying to insert a
<ul></ul>
after my input in order to do a .load inside the list.
The relevant code I have is:
var addKeywordId = 0;
$('a.add_keyword').live('click', function(){
$(this).before('<input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" /><ul><li>hi</li></ul>');
$('.add_keyword').focus();
addKeywordId++;
});
The problem is, that my HTML structure ends up looking like this:
<ul><li>hi</li></ul>
<a class="add_keyword">+ add keyword</a>
<input id="addKeyword0" class="add_keyword" type="text />
INSTEAD OF
<input id="addKeyword0" class="add_keyword" type="text />
<ul><li>hi</li></ul>
<a class="add_keyword">+ add keyword</a>
Anybody know why my HTML is added out of the order I specified??
Thanks
EDIT: This seems to be working fine in Google Chrome, but not in Mozilla Firefox.. :(
This is likely due to the weird rejiggering of code Firefox does to try to display things even when there are errors. I've seen it where I miss a closing div, IE freaks out (as it should) and Firefox looks fine, as it ignores that you missed adding the ending div and guesses.
You could try a 2 stage thing. I would add an id to the ul tag, then add the input before it.
$(this).before('<ul id="ulid"><li>hi</li></ul>');
$('#ulid').before('<input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" />');
Happy haxin.
_wryteowl

Categories

Resources