How to get the innerHTML of an input control including the values?

Question

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!

You would refer to those inputs directly. If you posted more code (Everything inside `
`) it would be a whole lot easier to explain. — George, Jan 16 '13 at 11:23
The text input is not part of the html code. So it won't show up with innerHtml. — Aditi, Jan 16 '13 at 11:24
How could I get the values without refering the inputs directly? — user1856596, Jan 16 '13 at 11:25
Simply - innerHTML will not return you a values of input elements (values entered by user). According to this: http://stackoverflow.com/questions/12126497/inner-html-with-input-values you can get that result by using `input.setAttribute("value", input.value)` on each input before innerHTML is taken. But why do you need that? Maybe there is some better way to achieve what you need. — Viktor S., Jan 16 '13 at 11:30
Maybe there is. I have 3 divs with predefined content. When a tab is switched, it gets the one that should be shown and fills it with the predefined content from one of the tab divs. Witht his solution, the content is lost everytime a tab is switched. — user1856596, Jan 16 '13 at 11:35
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, Jan 16 '13 at 11:37
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., Jan 16 '13 at 11:38
please read this about innerHTML https://developer.mozilla.org/en/docs/DOM/element.innerHTML. — Saju, Jan 16 '13 at 11:39

score 3 · Answer 1 · answered Apr 02 '13 at 16:33

<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.

score 1 · Answer 2 · 2013-01-16T14:27:24.407

1

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.

edited Jan 16 '13 at 14:27

answered Jan 16 '13 at 11:31

2

Also, there is no tag "radio". – Viktor S. Jan 16 '13 at 11:33

score 0 · Answer 3 · answered Jan 16 '13 at 14:20

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.

How to get the innerHTML of an input control including the values?

3 Answers3

Linked