CODEWITHSUNDEEP
javascriptjqueryuser-inputinnerhtml
Matthew Ruddy
Matthew Ruddy

Reputation: 925

Inner HTML with input values

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?

Upvotes: 6

Views: 26948

Answers (5)

Stephie
Stephie

Reputation: 1

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;

Upvotes: 0

DanCZ
DanCZ

Reputation: 313

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

Upvotes: 5

Musa
Musa

Reputation: 97672

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/

Upvotes: 9

orhanhenrik
orhanhenrik

Reputation: 1415

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

Upvotes: 4

jAndy
jAndy

Reputation: 236022

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.

Upvotes: 3

Related Questions