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-26T16:55:52.460

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 '12 at 16:55

answered Aug 25 '12 at 23:38

Musa

96,336
17
118
137

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 Aug 26 '12 at 16:25
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. – Matthew Ruddy Aug 28 '12 at 00:45

score 5 · Answer 2 · answered Oct 27 '14 at 10:32

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');

score 3 · Answer 3 · answered Aug 25 '12 at 23:37

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.

score 3 · Answer 4 · answered Aug 25 '12 at 23:38

3

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

answered Aug 25 '12 at 23:38

orhanhenrik

1,407
8
11

score 0 · Answer 5 · answered Jun 08 '20 at 12:53

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 08 '20 at 12:53

Stephie

1
1

Inner HTML with input values

5 Answers5

Linked

Related