131

I have an HTML input with a link in the value.

<input type = 'text' value = 'http://www.link.com' id = 'link' />

I am using jQuery to change the value on a certain event.

$('#link').val('new value');

The above code changes the value of the text box but doesn't change the value in the code (value = 'http://www.link.com' stays unchanged). I need the value = '' to change as well.

Improve this question
7
  • What do you mean by in the code? Are you looking at the original (thus, unmodified) source of the page? Commented Aug 8, 2012 at 21:51
  • Using Chrome's inspect element. Commented Aug 8, 2012 at 21:53
  • 3
    @Luke The value will change, but the HTML element's visible value in Chrome's inspector will not. Try then alerting the value or outputting it to the console and you'll see it has changed. See, it has changed: jsfiddle.net/a8SxF Commented Aug 8, 2012 at 21:54
  • Yes I see that now. I'm using zClip to copy the value to the clipboard but it's copying the old value after it has changed. I think I can fix it with a little messing around. Commented Aug 8, 2012 at 21:56
  • 1
    possible duplicate of html() method wrong when input value has changed Commented Aug 8, 2012 at 21:56

9 Answers 9

Reset to default
239

Use attr instead.
$('#link').attr('value', 'new value');

demo

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

This is totally correct, by using setAttribute or jQuery's attr you will also affect the DOM element's value: jsfiddle.net/a8SxF/1
@TheZ that's because the input's dirty value flag is false. Try interacting with the input (the value is dirty after user input) and then setAttribute
But when you want to get html with .html(), then there will be still the same old value, doesnt matter, if you use .val('new value') or attr('value', 'new value')... :(
Coded a massive and complicated bunch of functions using .val (as suggested by everything I read previously) and had this exact same problem. Bloody annoying! This answer should be the first point of call for any jQuery newbies looking to update form elements dynamically. Would have saved me a good few hours if I'd read this first!
This is why it's so hard to hit the ground running with JavaScript/JQuery, so many caveats like this. This helped me a lot. Thank you!
|
20

Changing the value property does not change the defaultValue. In the code (retrieved with .html() or innerHTML) the value attribute will contain the defaultValue, not the value property.

Improve this answer

3 Comments

That explains it. Typing also doesn't change the <input id='a' value> but does affect the result of $("#a").val(). A question just to be sure: Is $("#a").val(value) really the correct way how to change the value of an input element, so that the right value will be submitted?
Yes, that is correct. changing the attribute will not change what is being submitted.
It should be the explanation in the accepted answer.
10

to expand a bit on Ricardo's answer: https://stackoverflow.com/a/11873775/7672426

http://api.jquery.com/val/#val2

about val()

Setting values using this method (or using the native value property) does not cause the dispatch of the change event. For this reason, the relevant event handlers will not be executed. If you want to execute them, you should call .trigger( "change" ) after setting the value.

Improve this answer

Comments

8 
$('#link').prop('value', 'new value');

Explanation: Attr will work on jQuery 1.6 but as of jQuery 1.6.1 things have changed. In the majority of cases, prop() does what attr() used to do. Replacing calls to attr() with prop() in your code will generally work. Attr will give you the value of element as it was defined in the html on page load and prop gives the updated values of elements which are modified via jQuery.

Improve this answer

1 Comment

Try explaining your answer as well
5

For me the problem was that changing the value for this field didn`t work:

$('#cardNumber').val(maskNumber);

None of the solutions above worked for me so I investigated further and found:

According to DOM Level 2 Event Specification: The change event occurs when a control loses the input focus and its value has been modified since gaining focus. That means that change event is designed to fire on change by user interaction. Programmatic changes do not cause this event to be fired.

The solution was to add the trigger function and cause it to trigger change event like this:

$('#cardNumber').val(maskNumber).trigger('change');
Improve this answer

Comments

1

This is just a possible scenario which happened to me. Well if it helps someone then great: I wrote a complicated app which somewhere along the code I used a function to clear all textboxes values before showing them. Sometime later I tried to set a textbox value using jquery val('value') but I did'nt notice that right after that I invoked the ClearAllInputs method.. so, this could also happen.

Improve this answer

Comments

0

Note that the browser parses the HTML tag element and creates a corresponding DOM node object.

  • "Initial/starting/default value" of input:
    • Equals:
      • ONLY the initial value of value attribute of input's HTML tag element.
      • defaultValue property of input's DOM node object.
    • Is set in jQuery via:
      • $(input).attr("value", "42")
  • "Current value" of input:
    • Equals:
      • value attribute of input's HTML tag element
      • value property of input's DOM node object.
    • Is set in jQuery via:
      • $(input).val("42")
      • $(input).prop("value", "42")

See also: What is the difference between properties and attributes in HTML?

Improve this answer

Comments

-1

My similar issue was caused by having special characters (e.g. periods) in the selector.

The fix was to escape the special characters:

$("#dots\\.er\\.bad").val("mmmk");
Improve this answer

2 Comments

Agreed, very bad, you shouldn't escape, you should rename your element's id.
Dots are valid selectors though if you're referring to a class ('.class-name'), but having a dot nested inside a name is a bad idea as that will attempt to find additional classes/id's. E.g $('.div.name') will look for a div which has both .div and .name as classes
-3 
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
function changes() {
$('#link').val('new value');
}
</script>
<button onclick="changes()">a</button>
<input type='text' value='http://www.link.com' id='link'>
Improve this answer

1 Comment

Yeah this doesn't update the actual value though. It updates the on screen text box, but when you try to submit a form the value is whatever it was when the page was originally loaded.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.