jQuery .val() vs .attr(“value”)-第2页回答

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?

标签： jquery forms

14条回答

孤独寂梦人

2楼-- · 2019-01-01 09:32

jQuery('.changer').change(function () {
    var addressdata = jQuery('option:selected', this).attr('address');
    jQuery("#showadd").text(addressdata);
});

0人赞添加讨论(0) 举报

人间绝色

3楼-- · 2019-01-01 09:34

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>

0人赞添加讨论(0) 举报

ら面具成の殇う

4楼-- · 2019-01-01 09:36

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.

0人赞添加讨论(0) 举报

一个人的天荒地老

5楼-- · 2019-01-01 09:39

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.

0人赞添加讨论(0) 举报

浮光初槿花落

6楼-- · 2019-01-01 09:39

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()

0人赞添加讨论(0) 举报

刘海飞了

7楼-- · 2019-01-01 09:40

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.

0人赞添加讨论(0) 举报

jQuery .val() vs .attr(“value”)

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间