15

I'm trying to have a variable store the HTML in a div tag, but simply using var a = $('div').html() doesn't store the values of the input tags that lie within the div.

So, my question is, how should I go about saving the HTML and the selected options and values of input tags to a variable using jQuery?

Here is some example code:

HTML:

<div>
  <p>Some Text</p>
  <select name="word">
    <option value="1">Placeholder 1</option>
    <option value="2">Placeholder 2</option>
  </select>
  <input type="text" />
</div>

Javascript:

/* "a" should also have the user values, such that when I use $('body').append(a), 
it has the same user input as the div. */

var a = $('div').html();

Thanks in advance.

Ivan
  • 10,052
  • 12
  • 47
  • 78

3 Answers3

28

You could $.clone() the element.

var $a = $("div:first").clone();

$a.appendTo("body"); // Clone invades your body

Online Demo: http://jsbin.com/obebov/edit

Sampson
  • 265,109
  • 74
  • 539
  • 565
7

You may also achieve this by first changing the value of input fields uding DOM like this:

$('div input').each(function(){
    $(this).keyup(function(){
        $(this).attr('value',$(this).val());
    });
});

after which you can extract the HTML by using this:

$('div').html();
Azfar Niaz
  • 1,516
  • 4
  • 13
  • 21
  • 2
    For using select as well: if($(this).is('select')) { $(this).find('option:selected').attr('selected', 'selected'); } else { $(this).attr('value', $(this).val()); } – twicejr May 04 '15 at 09:09
0

If the document having Ajax content, the best solution would be:

$(document).on("keyup change", "input", function () {
    $(this).attr("value", $(this).val());
});

You must use both change and keyup event.

SpritsDracula
  • 1,080
  • 9
  • 16