Cross browser alternative to document.body.innerHTML

Question

Given an input element...

<input type="text" />

and this javascript...

    var x = document.body.innerHTML;

the user enters a value, say "myValue", and causes x to be set

IE will set x =

<input type="text" value="myValue" />

Whereas Chrome will set x =

<input type="text" />

So, are there any cross browser alternatives to document.body.innerHTML?

possible duplicate of [Cross domain iframe issue](http://stackoverflow.com/questions/9393532/cross-domain-iframe-issue) — DevlshOne, Nov 25 '13 at 17:06
Chrome is on latest version. Similar too but different from the Cross domain iframe issue. The code is contained in a function that is called upon press of a button i.e. after the page is fully loaded. — cymorg, Nov 25 '13 at 17:31
possible duplicate of [Inner HTML with input values](http://stackoverflow.com/questions/12126497/inner-html-with-input-values) — Felix Kling, Nov 25 '13 at 17:44

score 1 · Answer 1 · answered Nov 25 '13 at 17:06

1

Chrome should support it - http://www.quirksmode.org/dom/w3c_html.html - are you sure you're using the most recent version?

answered Nov 25 '13 at 17:06

Sinister Beard

3,570
12
59
95

It's working for me too. Perhaps cymorg is trying to do it while the page is still loading? – joeytwiddle Nov 25 '13 at 17:07

cymorg · Answer 2 · 2013-11-26T01:18:53.950

This looks like it works cross browser. The javascript function does this…

sets the value/selected/html attribute of each form input/select/textarea with the value entered by the user
creates a new input element named “formContent”
sets the value of “formContent” to the encoded value of the form’s elements (incl. values entered by the user)
adds the “formContent” element to the form
submits the form including values entered by the user to

This is the source of my example…

<html>
<head>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
    function submitFormWithValues() {
        $('form input').each(function() {
            this.setAttribute('value', this.value);
            if (this.checked)
                this.setAttribute('checked', 'checked');
            else
                this.removeAttribute('checked');
        });

        $('form select').each(function() {
            var index = this.selectedIndex;
            var i = 0;
            $(this).children('option').each(function() {
                if (i++ != index)
                    this.removeAttribute('selected');
                else
                    this.setAttribute('selected', 'selected');
            });
        });

        $('form textarea').each(function() {
            $(this).html($(this).val());
        });

        alert(encodeURI($("form").html()));

        var myInput = document.createElement("input"); 
        myInput.type = "text";
        myInput.setAttribute("name", "myInput");
        myInput.setAttribute("value",encodeURI($("form").html()));

        var myForm = document.getElementById("form1");
        myForm.appendChild(myInput);
        myForm.submit;            
    }
</script>
</head>
<body id="body">
<form id="form1" action="test.aspx" method="post">
<input type="text" id="input1" /><br />
<input type="text" id="input2" /><br />
<input type="submit" onclick="this.style.visibility='hidden', submitFormWithValues()" id="submit" value=" Submit " />
</form></body></html>

When the page is submitted the form will look similar to this…

<form id="form1" action="test.aspx" method="post">
<input type="text" id="input1" /><br />
<input type="text" id="input2" /><br />
<input type="text" name="formContent" value=" %3CINPUT%20id=input1%20value=%22first%20value%22%20jQuery1385425785747=%222%22%3E%3CBR%3E%3CINPUT%20id=input2%20value=%22second%20value%22%20jQuery1385425785747=%223%22%3E%3CBR%3E%3CINPUT%20style=%22VISIBILITY:%20hidden%22%20id=submit%20onclick=%22this.style.visibility='hidden',%20submitFormContent()%22%20value=%22%20Submit%20%22%20type=submit%20jQuery1385425785747=%224%22%3E%20" />
</form>

The receiving page (C# example below) reconstructs the HTML form elements by decoding the value of formContent.

using System;

public partial class test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {   
        Response.Write(Server.UrlDecode(Request.Form.Get("formcontent")));
    }
}

The receiving page will output the original form elements including the values entered by the user. In this manner the form and any values entered can be passed from one page to another independently of browser capabilities.

Cross browser alternative to document.body.innerHTML

2 Answers2