I have come across a strange thing which I didn't find any reference for.
In JavaScript we use document.getElementById("elem").value to get the value of the element with the id="elem"
But I have seen some material which use elem.value straightway to get the value of the element with the id="elem". Previously I thought its a mistake, but when I use the code it works!!
Is it a valid code? How it works??
Please clarify.
when you using a html form element it like this <input type="text" id="name">
then js collects this input type value usingdocument.getElementById("elem").value
Related
I have a javascript that I am trying to write to do a comparison with a list of objects. But first I need to pull the value from the below HTML.
<div class="no_icon" style="width:100%;display:-moz-deck;">
<input title="model1" onfocus="thtmlbSaveKeyboardFocus('product_type');" class="class1"
style="width:100%;" dir="ltr" name="product_type" id="product_type" maxlength="40"
onkeydown="if(htmlbEnterKey(event)==true){return
htmlbSL(this,2,'product_type:submitonenter','0')};" value="model1" disabled="disabled"></div>
my issue happens when I try to pull the information I need from the page. I have tried several versions of the "document.getElement" commands,(TagName,ID,Class) but I cannot seem to pull the information i need.
When I tried to see if i could even access the input I received either a null or undefined return. but when I do a
var test=document.getElementsByTagName(product_type.class1");
console.log(test);
I get a return of object# nodelist
After doing some digging into nodelists I have discovered that "product_type.class1" has an attribute of namedNodeMap. But nothing i seem to do can pull the value section from within the HTML.
What I need is a way to get the value of the "value="field.
I think you will have more success using querySelector instead of getElementsByTagName:
var input = document.querySelector("[name='product_type']");
console.log(input.value);
Problem
I use popup calendar, which is launched via href. I need to pass 'document.tstest.timestamp' (date input field) parameter into javascript function. And all worked well, BUT:
I want to include this tag-file into another form, so I can't use form
<form name="tstest">
in my tag file. As a result, without form I can't find document.timestamp input-field (as I understand due window.object hierarchy)
My tag file:
<form name="tstest">
<input type="Text" id="time_stamp" name="timestamp">
<a href="javascript:show_calendar('document.tstest.timestamp',
document.tstest.timestamp.value);"> showCalendar</a>
</form>
<script>
function show_calendar(target, value) {
............
}
</script>
Help me, please, to find out solution.
Your element has an id attribute on it so you can just use document.getElementById() to get a reference to it. I'd suggest modifying your show_calendar function to either take the id or a reference to the element directly, though, since you'll likely need to reference it again inside of that function.
You should be able to do the following anywhere on the page and get the element:
var elem = document.getElementById("time_stamp");
var myVal = elem.value;
This would work too
<a href="javascript:show_calendar('document.tstest.timestamp',
document.getElementById('time_stamp').value);"> showCalendar</a>
Don't use document.tstest as syntax instead use document.getElementById("time_stamp")
Also remember an id is unique so don't put 2 elements with a same I'd on a same page
In an HTML file I have the following:
<input type="..." name="myInput1" />
In a corresponding JS file I have the following variable which will hold the string value of that input after blur:
var myInput1;
Is there any problem in having these two identical names? I'm guessing that the namespaces are separate so it is ok.
Short answer, no problem whatsoever.
A short answer is, indeed, no. However, it also greatly depends on how you use the variable. Let's consider that you use javascript for validating that the variable is set as follows:
if(myInput1) {do something}
If you also decide to set the id to be the same as the name is as follows (cause you didn't specify that, it can be anything):
<input type="myInput1" name="myInput1" />
your variable myInput1 will be set to contain the DOM element and won't be empty anymore.
This link between JS and HTML is not only interesting but can be used to create an exploit as described in the section 3.1.2 of Postcards from the post-XSS world (that's where I have the idea from - and yes, it still works even though the article is from 2011).
I seem to be having trouble with passing the value of an input box to anything else in my javascript.
It's not producing any errors - and I remember reading somewhere that you can have issues if the document hasn't finished loading - but I'm pretty sure it has!
The code in question is as follows in the javascript:
var address = getElementById(addyInput).value;
document.getElementById('add').innerHTML = address;
And in the HTML
<form>
<input name="addyInput" placeholder="Don't forget postcode!">
</form>
<button id="start" onclick="initialize()">Start!</button>
<p>Address Test
<div id="add"></div>
</p>
I know that the button itself is working as it fires the rest of my code fine without the offending code - however the moment I uncomment that little block at the top, it just does nothing. (no errors etc)
Any help on that one would be hot! Thanks :)
Update:
I now have it working! Thanks muchly for all the help!!
Your form needs to look like this (add an id attribute):
<form>
<input id="addyInput" name="addyInput" placeholder="Don't forget postcode!">
</form>
And the first line of Javascript needs to look like this (since getElementById is expecting an ID rather than a name).
var address = getElementById('addyInput').value;
Additionally, getElementById expects the id argument to be a string (hence the quotes). If you pass it addyInput without quotes, it'll try to interpret addyInput as a variable which has a value of undefined and you won't get back the DOM element you want.
Or, if you were using jQuery, you could leave the form markup as-is and change the Javascript to this:
var address = $('input[name=addyInput]').val();
Make sure to specify and id on the input. You only have a name.
You need to add the id "addyInput" to your form input rather than just the name.
getElementById expects a string.
var address = getElementById('addyInput').value;
If you put this directly into a script section in the head, then you will have a problem because the page is not loaded completely but the code is executed already.
And of course you should define an id for the input element as the others already said.
what you are getting is an array, you need to fetch your array into some readable data. Try something like:
$value = array_shift( $yourarray );
or if it's a multi value array you can just loop it to fetch out the values.
I have an asp.net mvc application and i am trying to assign value to my textbox dynamically, but it seems to be not working (I am only testing on IE right now). This is what I have right now..
document.getElementsByName('Tue').Value = tue; (by the way tue is a variable)
I have also tried this variation but it didnt work either.
document.getElementsById('Tue').Value = tue; (by the way tue is a variable)
Can someone where please tell me where I am going wrong with this?
How to address your textbox depends on the HTML-code:
<!-- 1 --><input type="textbox" id="Tue" />
<!-- 2 --><input type="textbox" name="Tue" />
If you use the 'id' attribute:
var textbox = document.getElementById('Tue');
for 'name':
var textbox = document.getElementsByName('Tue')[0]
(Note that getElementsByName() returns all elements with the name as array, therefore we use [0] to access the first one)
Then, use the 'value' attribute:
textbox.value = 'Foobar';
It's document.getElementById, not document.getElementsByID
I'm assuming you have <input id="Tue" ...> somewhere in your markup.
There are two issues in your code.
Use getElementByName instead of getElement**s**ByName
use the value in lowercase instead of Value.
If you are using Chrome, then debug with the console. Press SHIFT+CTRL+j to get the console on screen.
Trust me, it helps a lot.
Sounds like we need to assume that your textbox name and ID are both set to "Tue." If that's the case, try using a lower-case V on .value.
As the plural in getElementsByName() implies, does it always return list of elements that have this name. So when you have an input element with that name:
<input type="text" name="Tue">
And it is the first one with that name, you have to use document.getElementsByName('Tue')[0] to get the first element of the list of elements with this name.
Beside that are properties case sensitive and the correct spelling of the value property is .value.
You can use
formname.textboxname.value="delete";