Inner HTML with input values

Question

have a brief question regarding innerHTML and input values that have been entered. See the brief example below (using jQuery for convenience):

http://jsfiddle.net/F7urT/2/

jQuery:

jQuery(document).ready(function($) {
    $('.send').click(function() {
        alert( $('.content').html() );
        return false;
    });
});

html:

<div class="content">
    <input type="text" name="input" value="Old Value" />
    <input type="button" class="send" value="Send" />
</div>

If you edit the input value, then click the 'Send' button, the alert shows that the innerHTML gotten contains the input with the "Old Value", rather than the value the user has entered. Why is this? And how can we get the HTML as a string with user entered input values?

Musa · Accepted Answer · 2012-08-26 16:55:52Z

9

The new value is stored as a property not an attribute, the value can be obtained by inputelement.value, modifying the value does not affect the attribute. If you want the html with the new value just set the attribute to the new value.

For check boxes and radio buttons set the checked attribute, set the innerHTML for text areas, for selects set the selected attribute on the option

http://jsfiddle.net/mowglisanu/F7urT/5/

edited Aug 26, 2012 at 16:55

answered Aug 25, 2012 at 23:38

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

2 Comments

Matthew Ruddy Over a year ago

Thanks, simple but for one reason or another hadn't occurred to me. What about other kinds of form fields; select boxes, textareas, etc? Question should mentioned this rather than strictly inputs; my apologies.

Matthew Ruddy Over a year ago

Thanks. Very simple, and really should have copped this myself. Stubbornness lead me to waste time trying to figure out what was going on with InnerHTML, rather than implementing a simple solution. Thanks again. Believed that it actually got the current HTML, including any changed input values, etc, rather than literally reading the source.

DanCZ · Accepted Answer · 2014-10-27 10:32:53Z

5

this solution is better. works for more inputs.

  $('input[type=text]').attr('value', function (i, val) { return val; });
  $('input[type=checkbox],input[type=radio]').attr('checked', function () { return this.checked; });
  $('textarea').html(function () { return this.value; });
  $('select').find(':selected').attr('selected', 'selected');

answered Oct 27, 2014 at 10:32

DanCZ

3235 silver badges10 bronze badges

Comments

orhanhenrik · Accepted Answer · 2012-08-25 23:38:15Z

4

$('#input_id').attr('value',$('#input_id').val());
will put the value into the html

answered Aug 25, 2012 at 23:38

orhanhenrik

1,4158 silver badges11 bronze badges

Comments

jAndy · Accepted Answer · 2012-08-25 23:37:36Z

3

You can't get it with .innerHTML (.html()). Writing into an element doesn't modify the html markup, nor will it change the value attribute in actual markup.

You can only access the current content by directly asking the element for its .value - value. Using jQuery, you can do that via .val() too.

answered Aug 25, 2012 at 23:37

jAndy

237k57 gold badges313 silver badges363 bronze badges

Comments

Stephie · Accepted Answer · 2020-06-08 12:53:02Z

0

DanCZ & Musa solutions works pretty good, but I had trouble with the textarea.

I have to implement this in a Typescript project and the only way I've found to make the textarea show the value is this :

textarea.innerHTML = textarea.value;

answered Jun 8, 2020 at 12:53

Stephie

11 bronze badge

Collectives™ on Stack Overflow

Inner HTML with input values

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related