I had thought these two were the same, but they appear to not be. I've generally been using $obj.attr("value") to work with form fields, but on the page I'm currently building, $obj.attr("value") does not return the text I enter in my field. However, $obj.val() does.
On a different page I've built, both $obj.attr("value") and $obj.val() return the text entered in the form field.
What could account for $obj.attr("value") working as expected in one case but not in another?
What is the proper way to set and retrieve a form field's value using jQuery?
There is a big difference between an objects properties and an objects attributes
See this questions (and its answers) for some of the differences: .prop() vs .attr()
The gist is that .attr(...) is only getting the objects value at the start (when the html is created). val() is getting the object's property value which can change many times.
Since jQuery 1.6, attr() will return the original value of an attribute (the one in the markup itself). You need to use prop() to get the current value:
var currentValue = $obj.prop("value");
However, using val() is not always the same. For instance, the value of <select> elements is actually the value of their selected option. val() takes that into account, but prop() does not. For this reason, val() is preferred.
PS: This is not an answer but just a supplement to the above answers.
Just for the future reference, I have included a good example that might help us to clear our doubt:
Try the following. In this example I shall create a file selector which can be used to select a file and then I shall try to retrieve the name of the file that I selected:
The HTML code is below:
<html>
<body>
<form action="#" method="post">
<input id ="myfile" type="file"/>
</form>
<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript" src="code.js"> </script>
</body>
</html>
The code.js file contains the following jQuery code. Try to use both
of the jQuery code snippets one by one and see the output.
jQuery code with attr('value'):
$('#myfile').change(function(){
alert($(this).attr('value'));
$('#mybutton').removeAttr('disabled');
});
jQuery code with val():
$('#myfile').change(function(){
alert($(this).val());
$('#mybutton').removeAttr('disabled');
});
Output:
The output of jQuery code with attr('value') will be 'undefined'.
The output of jQuery code with val() will the file name that you selected.
Explanation:
Now you may understand easily what the top answers wanted to convey. The output of jQuery code with attr('value') will be 'undefined' because initially there was no file selected so the value is undefined. It is better to use val() because it gets the current value.
In order to see why the undefined value is returned try this code in your HTML and you'll see that now the attr.('value') returns 'test' always, because the value is 'test' and previously it was undefined.
<input id ="myfile" type="file" value='test'/>
I hope it was useful to you.
Let's learn from an example.
Let there be a text input field with default value = "Enter your name"
var inp = $("input").attr("value");
var inp = $("input").val();
Both will return "Enter your name"
But suppose you change the default text to "Jose" in your browser.
var inp = $("input").attr("value");
will still give the default text i.e. "Enter your name".
var inp = $("input").val();
But .val() will return "Jose", i.e. the current value.
Hope it helps.
The proper way to set and get the value of a form field is using .val() method.
$('#field').val('test'); // Set
var value = $('#field').val(); // Get
With jQuery 1.6 there is a new method called .prop().
As of jQuery 1.6, the .attr() method returns undefined for attributes
that have not been set. In addition, .attr() should not be used on
plain objects, arrays, the window, or the document. To retrieve and
change DOM properties, use the .prop() method.
In order to get the value of any input field, you should always use $element.val() because jQuery handles to retrieve the correct value based on the browser of the element type.
jQuery('.changer').change(function () {
var addressdata = jQuery('option:selected', this).attr('address');
jQuery("#showadd").text(addressdata);
});
jQuery(".morepost").live("click", function() {
var loadID = jQuery(this).attr('id'); //get the id
alert(loadID);
});
you can also get the value of id using .attr()
this example may be useful:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>
<body>
<input id="test" type="text" />
<button onclick="testF()" >click</button>
<script>
function testF(){
alert($('#test').attr('value'));
alert( $('#test').prop('value'));
alert($('#test').val());
}
</script>
</body>
</html>
in above example, everything works perfectly. but if you change the version of jquery to 1.9.1 or newer in script tag you will see "undefined" in the first alert.
attr('value') doesn't work with jquery version 1.9.1 or newer.
Example more... attr() is various, val() is just one! Prop is boolean are different.
//EXAMPLE 1 - RESULT
$('div').append($('input.idone').attr('value')).append('<br>');
$('div').append($('input[name=nametwo]').attr('family')).append('<br>');
$('div').append($('input#idtwo').attr('name')).append('<br>');
$('div').append($('input[name=nameone]').attr('value'));
$('div').append('<hr>'); //EXAMPLE 2
$('div').append($('input.idone').val()).append('<br>');
$('div').append('<hr>'); //EXAMPLE 3 - MODIFY VAL
$('div').append($('input.idone').val('idonenew')).append('<br>');
$('input.idone').attr('type','initial');
$('div').append('<hr>'); //EXAMPLE 3 - MODIFY VALUE
$('div').append($('input[name=nametwo]').attr('value', 'new-jquery-pro')).append('<br>');
$('input#idtwo').attr('type','initial');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="hidden" class="idone" name="nameone" value="one-test" family="family-number-one">
<input type="hidden" id="idtwo" name="nametwo" value="two-test" family="family-number-two">
<br>
<div></div>
jquery - Get the value in an input text box
<script type="text/javascript">
jQuery(document).ready(function(){
var classValues = jQuery(".cart tr").find("td.product-name").text();
classValues = classValues.replace(/[_\W]+/g, " ")
jQuery('input[name=your-p-name]').val(classValues);
//alert(classValues);
});
</script>
If you get the same value for both property and attribute, but still sees it different on the HTML try this to get the HTML one:
$('#inputID').context.defaultValue;
In attr('value') you're specifically saying you're looking for the value of an attribute named vaule. It is preferable to use val() as this is jQuery's out of the box feature for extracting the value out of form elements.
I have always used .val() and to be honest I didnt even know you could get the value using .attr("value"). I set the value of a form field using .val() as well ex. $('#myfield').val('New Value');
This question already has answers here:
How to get value of a div using javascript
(7 answers)
Closed 3 years ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
I had this problem when I get the value from a div:
function sync(){
var n1 = document.getElementById('editor').value;
alert(n1);
var n2 = document.getElementById('news');
n2.value = n1;
}
div with id editor looks like this:
<div class='message' id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>
When I put something in that div it will alert me undefined and that will also come in the textarea i paste it in too. So the problem is obviously by this:
var n1 = document.getElementById('editor').value;
What am I doing wrong?
Try this
var n1 = document.getElementById('editor').innerHTML; // or innerText, or textContent
I think it's important to note that even if <div> was a HTMLInputElement you would still keep getting undefined because your div,
<div class='message' id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>
Has no value attribute, here is an example of a div with a value attribute:
<div class='message' id='editor' value='hello'></div>
However, as mentioned in other answers, even though you have entered a value it, .value will still return undefined because <div> is a HTML element and not a HTMLInputElement.
If you really need to store some information in the value of the div you can always do something like this:
<div id="mydiv"></div>
<script>document.getElementById('mydiv').value='hello';</script>
Right after the div loads, you force 'hello' as the value.
The only reason you'd do this is if you really want to store data within the div's value and can't store it within the innerHTML because the div is visible.
If you want to store the information within your div like this:
<div id="editor">all the information i want to store</div>
Then document.getElementById('editor').innerHTML; is the correct solution, but remember that users will be able to see the information on the webpage.
HTML Elements and HTMLInputElements are different things.
The value attribute is present in HTMLInputElement in HTMLInputElement Reference
div elements are HTMLElement
If you change your div to input your Javascript will work fine.
The option is to use innerHTML as said in another answer but be aware that this could be HTML fragment at times if you don't control the HTML or over time forget the Javascript and can lead to defects as things.
FYI plain elements attribute reference(there is no value)
This question already has answers here:
What is innerHTML on input elements?
(10 answers)
Closed 6 years ago.
I have a little problem by writing some text into this input-field.
<input type="text" data-pseudo-text="true" data-selector=".attribute-orderfield1--hidden" placeholder="some text" name="attribute_orderfield1_value" id="attribute_orderfield1_value" class="input--attribute-orderfield1" data-type-aof="input">
I tried it before in a test without the attribute data-type-aof and it worked.
document.getElementById("attribute_orderfield1_value").innerHTML = "some text";
Is this attribute preventing writing into the field via JS?
If I understand you correctly, you are just trying to set the value, just use:
document.getElementById("attribute_orderfield1_value").value = "some text";
innerHTML is used to add html elements to respective DOM elements. For input elements use value instead.
document.getElementById("attribute_orderfield1_value").value = "NEW Text";
<input type="text" data-pseudo-text="true" data-selector=".attribute-orderfield1--hidden" placeholder="some text" name="attribute_orderfield1_value" id="attribute_orderfield1_value" class="input--attribute-orderfield1" data-type-aof="input">
document.getElementById("attribute_orderfield1_value").value = "some text";
Try It InnerHTML not Equal to value
With input fields you're not supposed to use innerHTML to change the text inside. Technically what you're trying to change is the [value] attribute of the input field.
Try the following JS
document.getElementById("attribute_orderfield1_value").value = "New Text In Input Field";
I have an editable DataTabe and when edit mode, the generated html is exactly as shown below:
<td><form><input autocomplete="off" name="value" ></form></td>
There is s TextBox as input and I need t get the value of this input. However, I cannot give id as there is no configuration of DataTable and I decided to get the value using Javaascipt. I have tried many different methods like closest() as shown below, but cannot get the value. Is it possible to grab it?
var $row = $(this).closest("tr");
$tds = $row.find("td");
You might use document.querySelector:
var input = document.querySelector('[name="value"]`);
Or, using jQuery, you could also use the same selector:
var input = $('[name="value"]');
var currentInput=null;
$("input").focus(function(e)
{
currentInput=e.target or this;//here you can get currently editing textfeild or may be $(this) if this is wrong
});
then you can get currentInput.value()
I see you are using jQuery; you can target the name attribute directly and to get a value of the input use .val(), like so:
$("input[name='value']").val();
This question already has answers here:
How to get value of a div using javascript
(7 answers)
Closed 3 years ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
I had this problem when I get the value from a div:
function sync(){
var n1 = document.getElementById('editor').value;
alert(n1);
var n2 = document.getElementById('news');
n2.value = n1;
}
div with id editor looks like this:
<div class='message' id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>
When I put something in that div it will alert me undefined and that will also come in the textarea i paste it in too. So the problem is obviously by this:
var n1 = document.getElementById('editor').value;
What am I doing wrong?
Try this
var n1 = document.getElementById('editor').innerHTML; // or innerText, or textContent
I think it's important to note that even if <div> was a HTMLInputElement you would still keep getting undefined because your div,
<div class='message' id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>
Has no value attribute, here is an example of a div with a value attribute:
<div class='message' id='editor' value='hello'></div>
However, as mentioned in other answers, even though you have entered a value it, .value will still return undefined because <div> is a HTML element and not a HTMLInputElement.
If you really need to store some information in the value of the div you can always do something like this:
<div id="mydiv"></div>
<script>document.getElementById('mydiv').value='hello';</script>
Right after the div loads, you force 'hello' as the value.
The only reason you'd do this is if you really want to store data within the div's value and can't store it within the innerHTML because the div is visible.
If you want to store the information within your div like this:
<div id="editor">all the information i want to store</div>
Then document.getElementById('editor').innerHTML; is the correct solution, but remember that users will be able to see the information on the webpage.
HTML Elements and HTMLInputElements are different things.
The value attribute is present in HTMLInputElement in HTMLInputElement Reference
div elements are HTMLElement
If you change your div to input your Javascript will work fine.
The option is to use innerHTML as said in another answer but be aware that this could be HTML fragment at times if you don't control the HTML or over time forget the Javascript and can lead to defects as things.
FYI plain elements attribute reference(there is no value)