Get html elements (dynamically generated) with values using jQuery

Question

Is it possible using jQuery to get whole div content(dynamically generated elements) with values? For example, child element may be a div, span, select, or input?

I am trying to save whole div content(generated on fly) with values as .html file. I tried with one div which has form and input elements.

HTML:

<div id="inputs">
    <form class="mainForm">
        <div style="height: 100%;" id="div1">
                <label>Input1</label>
                <input type="text" id="input1" name="input1"/>
        </div>
    </form>
</div>
<input id="addform" type="button" value="Click to add Input"/>
<input id="getform" type="button" value="Click to get html"/>

jQuery:

$(document).ready(function(){
    $("input#addform").click(function(){
        $("div#inputs").append($('form.mainForm').clone().html());
    });

    $("input#getform").click(function(){
        alert($("div#inputs").clone().html());
    });
});

FIDDLE:

http://jsfiddle.net/UhJfn/

How to get whole div#inputs content with values (entered by user) On click of Click to get html button?

Help would be appreciated.

P.S: Here I used only one input in form. But in my real case, we do have select, span, image, etc.

wouldn't you just need values and types since you already know the html structure? A more real world demo would help — charlietfl
– charlietfl, Commented Nov 24, 2013 at 18:20
@charlietfl I just mentioned one div. But we have 10 divs with different html structure. I need to save whole html content as .html file. — Kiran
– Kiran, Commented Nov 24, 2013 at 18:23
seems to me that an array of objects with all the attributes/properties needed to replicate html output would make more sense than relying on browser to modify html and then copy that — charlietfl
– charlietfl, Commented Nov 24, 2013 at 18:30
@RajaprabhuAravindasamy How can we update values for select tag? And select tag options will be dynamic. — Kiran
– Kiran, Commented Nov 25, 2013 at 14:36

Rajaprabhu Aravindasamy · Accepted Answer · 2013-11-24 18:25:19Z

1

Try this,

You have to explicitly update the value attribute to achieve your need.

$(document).ready(function(){

    $(document).on('keyup','input[type="text"]',function(){
        $(this).attr('value',$(this).val());
    });

    $("input#addform").click(function(){
        $("div#inputs").append($('form.mainForm').clone().html());
    });

    $("input#getform").click(function(){
        alert($("div#inputs").clone().html());
    });
});

DEMO

answered Nov 24, 2013 at 18:25

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

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

Collectives™ on Stack Overflow

Get html elements (dynamically generated) with values using jQuery

1 Answer 1

DEMO

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related