This question already has answers here:
HTML - attributes vs properties [duplicate]
(2 answers)
Closed 8 years ago.
I have the below element:
<input type="text" value="" tabindex="1" size="15" onblur="UpCaseSearch(this)" name="name">
which is an empty text field.
I want to set text into that field and I can successfully do that using a command like that (when I say successfully I mean that I can see that field populated with text test:
window.frames[1].document.getElementsByName('name')[2].value = "test"
I have 2 questions however:
When I look at that element on the page I see that the value attribute is still empty "". Why is that? Where is the actual text that I can see in that field is coming from?
If I try the below command, it will actually set the value but then the field remains empty:
window.frames[1].document.getElementsByName('name')[2].setAttribute('value', 'test')
So it looks like that's not the same value in both cases. Is that right?
Try this:
window.frames[1].document.getElementsByName('srchsnam')[2].value = "Test"
Let me know if it worked!
In short, the value attribute in source-code (and dom) serves as 'defaultValue'.
For example, imagine this input-field (which is a common way to use this functionality):
<input type="text"
value="your name here"
onfocus="if (this.value===this.defaultValue) this.value='';"
onblur="if (this.value==='') this.value=this.defaultValue;" >
In other words, to set the default value in html-markup (<input value="your_value" type="text">) and from javascript you set the value-attribute (using the methods: var val=elm.getAttribute('value') and elm.setAttribute('value', val).
This is also why (as you have seen) these attributes propagate to the element's outerHTML (and thus the element's parent innerHTML).
However to get/set the element's current value property you use: var val=elm.value and elm.value=val.
Sidenote: Almost the same goes for a textarea: you can use .defaultValue on a textarea to retrieve it's textContent (but you'd override/change that by setting it's innerHTML) while you get/set the current value using elm.value.
Hope this helps!
Related
This question already has answers here:
What is the difference between properties and attributes in HTML?
(7 answers)
Closed 1 year ago.
I have found an <input type="text" ... element on a page, for which $('thatElement').val() and $('thatElement')[0].value return the value, the value is displayed in the rendered output, but there is no value="..." attribute on the element itself.
How can there be no value attribute in the HTML for an input element, but it still has a value and still displays its value?
Browser console:
> $('thatElement')[0].value
'The text that the page shows inside of the input'
> $('thatElement')[0].outerHTML
'<input autocomplete="off" type="text" readonly spellcheck="false">'
There's a difference between the source of a document and its DOM representation. The source file is static and won't change. The DOM might change. I think it depends on how you manipulate it.
In this example the input value is set but the DOM isn't updated: (run and inspect the result)
document.querySelector('input').value = 42;
<input />
In this example both the input and the DOM is updated:
document.querySelector('input').setAttribute('value', 'foobar');
<input />
I have over 50 text box elements in page. I am trying to append minus symbol in every text box after enter value (ng-blur) by using one common javascript function. but i am unable to pass ng-model name to javascript function from jsp element ng-blur call to append minus symbol after enter value. any solution.
JSP element:
<input type="text" maxlength="10"
ng-blur="appendMinusSymbol('buzz.model1.rate')" ng-model="buzz.model1.rate"/>
<input type="text" maxlength="10"
ng-blur="appendMinusSymbol('buzz.model2.rate')" ng-model="buzz.model2.rate"/>
JS Function:
$scope.appendMinusSymbol = function(model){
// append minus symbol as prefix to ng model value
};
Note : Edited my question (model1, model2, model3 like having 50 fields)
Check my solution on this fiddle. If you can, then pass only model name like in the fiddle, otherwise you will need additional parsing. Of course you need here additional check when to append minus sign if already exists.
<input type="text" maxlength="10" ng-blur="appendMinusSymbol('model1')" ng-model="buzz.model1.rate"/>
$scope.appendMinusSymbol = function(modelName){
$scope.buzz[modelName]['rate'] = '-'+$scope.buzz[modelName]['rate'];
};
I discovered a strange behavior of input text/hidden elements and I would like to know why this happens.
I have an input text box that has a value, let's say "test". I delete the input element value and I change the type of this element into "hidden". If now I switch it back to "text" the original value is there! If you don't fully delete the value of the text element but change it your changes are preserved. Why if you clear the element value this change is not preserved?
I created a fiddle that can show you what I mean.
function toggler() {
var iobj = document.getElementById('test');
if (iobj.type == 'text') {
iobj.type = 'hidden';
} else {
iobj.type = 'text';
}
}
<button name="toggle" type="button" onclick="toggler()">Toggle</button><br /><br />
<input type="text" name="test" id="test" value="sample" />
This has something to do with how different browsers handle defaultValue property of the inputs, whenever their type is changed. In this case, when the input type is changed and the .value is empty, Firefox uses the last non-empty value as .defaultValue property of the input. When the type is changed into text, Firefox uses the .defaultValue property for setting current .value property of the input. Chrome doesn't do this, i.e. it uses the last value, empty or non-empty, as the .defaultValue.
Here is a demo on jsfiddle. Comparing the logged values on Firefox and Chrome console, should demonstrate the different behaviors.
I should also mention that according to my experience/knowledge, Firefox is more standards-compliant than other browsers.
That being said, changing type of an input has never been a good idea. Form elements are very different and browsers handle the case in different ways.
This question already has answers here:
Get the value in an input text box
(13 answers)
Closed 8 years ago.
I am very new to programing so sorry if this question is to vague.
I have a simple html input field:
input class="draft" type="text"
and I have a javascript function (the function only accepts strings):
Message.send()
Using javascript/jQuery how do I take the string the user typed into the input field and place it into the Message.send() function (in string form)?
Thanks in advance for any help
jQuery:
Message.send($("input.draft").val());
javascript:
Message.send(document.querySelector("input.draft").value);
No jQuery needed. I'm not sure what you mean by place it into the Message.send() function (in string form), so I assume you get the value in the text input and use it as an argument in the Message.send() function.
Try this:
Message.send(document.getElementsByClassName("draft")[0].value);
Assuming your input field is something like this:
<input type="text" id="someInputField" name="someInputField" class="inputFields" />
You could do this
<script type="text/javascript">
//We use the field's id to refer to it and get to its value (the text in it):
var message = $('#someInputField').val();
//And then you might call the function like:
nameOfTheFuntion(message);
</script>
You would need to have jQuery libraries to make it work though, but you could do without them by replacing:
$('#someInputField').val();
with
document.getElementById('someInputField').val();
Give your <input> box an id for example
<input type="text" id="blah" />
In your javascript you are able to reference the <input> like so:
var strBlah = document.getElementById("blah").value;
Now you have the value typed into the <input> box so you would do the following:
Message.send(strBlah)
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.