CODEWITHSUNDEEP
javascripthtml
cymorg
cymorg

Reputation: 554

Cross browser alternative to document.body.innerHTML

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?

Upvotes: 0

Views: 1784

Answers (2)

cymorg
cymorg

Reputation: 554

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.

Upvotes: 0

Sinister Beard
Sinister Beard

Reputation: 3680

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

Upvotes: 1

Related Questions