Setting Input value in jquery variable

Question

How would you change or set the value of an input in a jquery variable object. For example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
htmlString = '<div><input name="hello" value="AAAAAAAA" /> </div>';
$htmlString = $(htmlString);
$htmlString.find('[name="hello"]').val('world')
console.log( $htmlString.find('[name="hello"]').val() );
console.log( $htmlString.prop('outerHTML') );
</script>

The value of [name="hello"] shows to be 'world' in the first console.log, but in the second it shows that it is still 'AAAAAAAA'. I am needing it to stay as 'world'.

Mamdouh Saeed · Accepted Answer · 2016-11-10 02:49:46Z

1

Use jQuery's .attr() to set new attribute value, witch call .setAttribute() in pure js and both of them make changes in DOM structure.

Why first console displays "world" as well ?

e.g. if you set value of input like

inputID.value = "world";
//value changed but if you try to view HTML source you see no changes
inputID.setAttribute("value","world");
//here your source code changed

Also in jQuery

inputID.val("world");
//value changed but if you try to view source HTML you see no changes
inputID.attr("value","world");
//here your source code changed

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
htmlString = '<div><input name="hello" value="AAAAAAAA" /> </div>';
$htmlString = $(htmlString);
$htmlString.find('[name="hello"]').attr("value",'world');
console.log( $htmlString.find('[name="hello"]').val() );
console.log( $htmlString.prop('outerHTML') );
</script>

edited Nov 10, 2016 at 2:49

answered Nov 10, 2016 at 0:32

Mamdouh Saeed

2,3251 gold badge12 silver badges11 bronze badges

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

4 Comments

Robbie Over a year ago

While that code does work, the other should work as well, right? I mean it is obviously being set, otherwise the first console log wouldn't show 'world'.

Mamdouh Saeed Over a year ago

What's the other ? first console displays world because .attr() updated the attribute value.

Robbie Over a year ago

Sorry, I meant my OG code. The OG first console displays world as well.

Robbie Over a year ago

Ah, makes sense. Completely forgot input wasn't part of the DOM.

Collectives™ on Stack Overflow

Setting Input value in jquery variable

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related