I have a div, its called tab1. Inside the tab1 div are many inputs (fields and radio buttons). I am getting the innerHTML like this:

document.getElementById("tab1").innerHTML;

Example code:

<div id="tab1">
    <input type="text" id="text1" />
</div>

That works, but if I entered any value into a text1 input for example, its not in the innerHTML. How would I get the innerHTML including the entered values? Is that possible at all?

Thanks!

I have a div, its called tab1. Inside the tab1 div are many inputs (fields and radio buttons). I am getting the innerHTML like this:

document.getElementById("tab1").innerHTML;

Example code:

<div id="tab1">
    <input type="text" id="text1" />
</div>

That works, but if I entered any value into a text1 input for example, its not in the innerHTML. How would I get the innerHTML including the entered values? Is that possible at all?

Thanks!

• javascript
• innerhtml

• You would refer to those inputs directly. If you posted more code (Everything inside <div id="tab1"></div>) it would be a whole lot easier to explain. – George Commented Jan 16, 2013 at 11:23
• The text input is not part of the html code. So it won't show up with innerHtml. – Aditi Commented Jan 16, 2013 at 11:24
• How could I get the values without refering the inputs directly? – user1856596 Commented Jan 16, 2013 at 11:25
• 2 Why not just hide/show the divs, rather than copying content from one element to another? The standard solution to this is to hide/show a different element per tab, rather than to move HTML elements around. Have I misunderstood the problem? – Richard Marr Commented Jan 16, 2013 at 11:37
• 1 If you just need tabs - simply hide all divs that should not be visible and show one you need. div.style.display = "none" - to hide an element and div.style.display = "block" to show. And no need to copy a content. – Viktor S. Commented Jan 16, 2013 at 11:38

3 Answers 3

<div id="tab1">
    <input type="text" id="text1"
    onkeyup="javascript:this.setAttribute("value", this.value);"/>
</div>

This will gives the values with div's innerHTML.

document.getElementById("tab1").innerHTML;

You can change the event accordingly, I set it onKeyUp.

If you want to get the values of inputs/radios, you can do it with jQuery:
var Inputs = $("div#tab1 input, div#tab1 radio");
You now have an array of all input and radios in the variable Inputs. You can then access the values like this: Inputs[0].value
If you want to use plain JavaScript that could look like this:
var Inputs = document.getElementById("tab1").getElementsByTagName('input'); You can now access them like:Inputs[0].valueandRadios[0].value`
@edit
Thanks, I corrected these mistakes.

If you type something in the textbox, what does the innerHTML look like? Does it look like

    <input type="text" id="text1" value="your_value" />?

If so, here is a simple function that returns what you want:

    function getInnerHtml() {
        var div = document.getElementById("tab1");
        var childNodes = div.childNodes;
        var innerHtml = "";
        for (var i = 0; i < childNodes.length; i++) {
            var node = childNodes[i];
            if (node.nodeType == 1) {
                if (node.getAttribute("type") == "text") {
                    if (node.value != "") {  
                        //! This will change the original outerHTML of the textbox
                        //If you don't want to change it, you can get outerHTML first, and replace it with "value='your_value'" 
                        node.setAttribute("value", node.value);
                    }
                    innerHtml += node.outerHTML;
                } else if (node.getAttribute("type") == "radio") {
                    innerHtml += node.outerHTML;
                }
            }
        }
    }  

Hope it's helpful.