jQuery write value into the input field's "value" attribute

Question

I have an input field, input type text:

<input type="text" id="show-val" value="">
<button id="get-val">Val</button>

On button click it's taking a URL from somewhere else, I need to place the value into the text field's value attribute.

What I could is:

$('#get-val').on('click', function(){
    var url = 'http://example.com/'; //suppose this is our grabbed URL
    $('#show-val').val( url );
});

But if you inspect the input text then can see it's not writing the url into the value attribute, it's just pasting the value into the text field.

What I tried:

$('#get-val').on('click', function(){
    var url = 'http://example.com/'; //suppose this is our grabbed URL
    $('#show-val').prop( 'value', url ); //failed
    $('#show-val').prop( 'placeholder', url ); //passed
});

Output is:

<input type="text" id="show-val" value placeholder="http://example.com/">

Why am I failing writing text field's value attribute? How can I write actually?

value is a property so $('#show-val').val( url ); is correct, However if you want to modify the value attribute the use $('#show-val').attr( 'value', url ); — Satpal
– Satpal, Commented May 11, 2015 at 11:58

Jazi · Accepted Answer · 2015-05-11 12:04:41Z

2

The prop() function is used to set values for attributes like checked, disabled. You should use val() or attr() functions for setting values in HTML form fields.

Examples:

$('input#show-val').val(url);

or

$('input#show-val').attr('value', url);

edited May 11, 2015 at 12:04

answered May 11, 2015 at 11:58

Jazi

6,76215 gold badges64 silver badges94 bronze badges

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

Comments

Satpal · Accepted Answer · 2015-05-11 12:00:26Z

1

Value is a property so $('#show-val').val(url); is correct.

However if you want to modify the value attribute the use $.fn.attr( attributeName, value)

Set one or more attributes for the set of matched elements.

Code

$('#show-val').attr('value', url);

answered May 11, 2015 at 12:00

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Sougata Bose · Accepted Answer · 2015-05-11 12:01:29Z

0

You can set the value attribute by -

$('#show-val').attr('value', url );

But

$('#show-val').val( url );

also set the value but not the way you want.

answered May 11, 2015 at 12:01

Sougata Bose

31.8k8 gold badges52 silver badges89 bronze badges

Comments

Brijesh Bhatt · Accepted Answer · 2015-05-11 12:01:56Z

0

This will work:

$("#show-val").attr("value",url);

answered May 11, 2015 at 12:01

Brijesh Bhatt

3,8303 gold badges20 silver badges34 bronze badges

Collectives™ on Stack Overflow

jQuery write value into the input field's "value" attribute

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related