jQuery: Get HTML as well as input values

Question

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.

Sampson · Accepted Answer · 2011-06-28 18:52:50Z

29

You could $.clone() the element.

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

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

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

answered Jun 28, 2011 at 18:52

Sampson

269k76 gold badges546 silver badges570 bronze badges

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

5 Comments

Ivan Over a year ago

Thanks! I completely forgot about .clone(). Just tested it, works great.

Ivan Over a year ago

The selected option in the <select> tag doesn't get cloned.

Sampson Over a year ago

@Ivan Are you saying the <option/> no longer exists, or is not selected?

Ivan Over a year ago

Not selected (Sorry for the confusion).

Sampson Over a year ago

@Ivan You'll have to set the $.val() of the clone based upon the $.val() of the original. $clone = $orig.clone().val($orig.val()).appendTo("body");

Azfar Niaz · Accepted Answer · 2012-11-22 11:43:08Z

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

answered Nov 22, 2012 at 11:43

Azfar Niaz

1,5664 gold badges13 silver badges21 bronze badges

1 Comment

twicejr Over a year ago

For using select as well: if($(this).is('select')) { $(this).find('option:selected').attr('selected', 'selected'); } else { $(this).attr('value', $(this).val()); }

SpritsDracula · Accepted Answer · 2020-12-30 04:44:45Z

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.

answered Dec 30, 2020 at 4:44

SpritsDracula

1,0909 silver badges16 bronze badges

Collectives™ on Stack Overflow

jQuery: Get HTML as well as input values

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related