Im trying to create such element only with JS:
<input type="text" value="default">
To do so, I tried this code:
var mi = document.createElement("input");
mi.type= "text"
mi.value = "default"
But when I run it in Chrome Dev Tools, it only creates this element:
<input type="text">
What am I missing?
Setting a property of a HTMLElement isn't exactly the same as setting it's attribute to the same thing.
You most likely wanted to use element.setAttribute
var mi = document.createElement("input");
mi.setAttribute('type', 'text');
mi.setAttribute('value', 'default');
Now you can see
new XMLSerializer().serializeToString(mi);
// "<input type="text" value="default">"
In your example, the value displayed by the <input> will still be default, it just isn't set as the attribute.
Further note that if the user changes the value of <input>, e.g. types into it, setting the attribute will not change the value any longer, but setting the value property will still change it. Again, this is because an attribute is different to a property.
var i = document.createElement("input"); //input element, text
i.setAttribute('type',"text");
i.setAttribute('name',"username");
i.setAttribute('value',"default");
I think you are missing the ; after "text".
Related
How to find the value of text field using onblur() in next input field.
I tried:
function get_value() {
var inv_nrs;
inv_nrs = document.getElementsByTagName('text1').value;
alert(inv_nrs);
}
text1 is name of input which I am trying to get value.
text2 is name of input where onblur() is triggered.
Two problems:
To get elements by their name attribute, use document.getElementsByName(), not document.getElementsByTagName.
Since these functions return a collection, not a single element, you have to index them to get a specific element.
So the function should be:
function get_value() {
var inv_nrs;
inv_nrs = document.getElementsByName('text1')[0].value;
alert(inv_nrs);
}
Here's a simple snippet which illustrates a way to do this.
(You may wish to use alert in place of console.log)
document.getElementById("text2").onblur = function() {
console.log(document.getElementById("text1").value)
}
<input type="text" id="text1" value="123" />
<input type="text" id="text2" />
Are you looking for an element with id = "text1" or real name = "text1"?
At least if it's their id try getElementById("text1"), that returns one single element. If you talking about the name-attribute, take getElementByName("text1"), this may return more than one element (if there are more then one with the same name).
i think you want this???
function get_value()
{
var inv_nrs;
inv_nrs = document.getElementById('txt1').value;
document.getElementById('txt2').value=inv_nrs;
}
<input type="text" id="txt1" >
<input type="text" id="txt2" onblur="get_value()">
If you search with tagname then you need to insert a tagname:
document.getElementsByTagName('input')[whole_number].value which also
returns a live HTMLCollection
Eg. document.getElementsByTagName("input")[0].value; ,if this is the first textbox in your page.
You can get the value of an html element also on different ways:
document.getElementsByName('text1')[whole_number].value which also
returns a live NodeList
Eg. document.getElementsByName("searchTsxt")[0].value; if this is the
first textbox with name 'searchtext' in your page.
You can also get element by Id:
document.getElementById('IDHere').value to get the value of desired
box
You can also get it by way of Classname:
Use document.getElementsByClassName('class_name')[whole_number].value
which returns a Live HTMLCollection
Good luck
Assume you have input element:
<input id="aaa" type="text" value="unchanged" />
Then launch js script:
var e = document.getElementById("aaa");
e.value = "changed";
alert(e.defaultValue + "/" + e.value);
Result will be "unchanged/changed". Unfortunately, when your input element is hidden:
<input id="aaa" type="hidden" value="unchanged" />
...the same js script seem not to be working any more. Result is "changed/changed".
Is this a proper way? If so, why only hidden form elements act different?
The "defaultValue" property is only maintained in a way you apparently expect for "text", "file", and "password" fields.
Here is the relevant portion of the DOM spec.
I suspect the reason for this is that user activity on its own cannot change the value of hidden elements. If you want to preserve the initial values, run something at "load" or "ready" to stash the value somewhere.
For hidden input elements, defaultValue isn't actually implemented. The reason why you get the same result ast .value is because the browser your using is just defaulting.
See here for a discussion of this with Firefox.
I don't know if this question has been asked here on SO, i just don't know the right word.
I have this input tag:
<input type = "text" class="inputbox holdout-7"></input>
How do I get the holdout's value of 7 from the class using javascript?
This is because I wanted to add custom attributes but when the page is rendered, my custom attribute is not displayed. Some advised me to put them in a class instead.
For example:
<input type = "text" class = "inputbox" holdout="7"></input>
when the page is rendered, the holdout is not included, therefore I cannot get the value.
var inputBox = document.querySelector(".inputbox"),
classname = inputBox.className,
regEx = /holdout-(\d+)/,
holdoutValue = classname.match(regEx)[1];
It will return you 7
To set that as attribute in your input box:
inputBox.setAttribute("data-holdout",holdoutValue);
it's recommended to use data-holdout instead of holdout.
I use this piece of javascript to create an input field with some data (v and k are set):
element = document.createElement('input');
element.value = v;
element.name = k;
This works in Chrome, but in Internet Explorer (tested with v11), only the name attribute is set and not the value.
Strangely, when I use jQuery, this works:
element = document.createElement('input');
$(element).attr("value", v);
element.name = k;
Why isn't plain javascript working here? It should work, according to MSDN.
Update
I expected element.value to create a value attribute, but it doesn't. Indeed the value is set correctly, but it doesn't show that in a newly created value attribute or a change of the existing value attribute. It seems I tested this the wrong way.
element.value = v works, it just doesn't create an HTML attribute, but it does set the value. It will create <input name="myname"> only, but the value is still there (e.g visible in UI)
Demo 1: http://jsfiddle.net/rL2ta/
If you do want to create actual HTML attribute - use element.setAttribute('value', v); - will create <input value="value" name="myname">
Demo 2: http://jsfiddle.net/ygalanter/rL2ta/1/
I have this: <input type="button" value="hello"> I want to change the value with javascript so that it is value="goodbye". How do I do this?
Following #David's advice in the comments below here is the code I tried but could not get to work before posting this question:
var createBttn = document.getElementById('create');
createBttn.innerHTML = 'value="goodbye"';
First you need to get a reference to the object that you want to change the value on, then assign the value property of that element, like this:
Say your element had an id of "someButton":
var btn = document.getElementById('someButton');
btn.value = 'goodbye';