Question

I have this table where I can generate dynamic rows (which has input <type="text" /> as content) through jquery’s .append() and I’m storing the generated html into a <input type="hidden" /> by getting the html through jquery’s .html() and adding the value to the hidden with .val().

In Internet Explorer, if I enter values into the textboxes the values are also included in the hidden field, but in Firefox everything except the values are stored in the field.

Edit:

So, my question is: What method should I use to get the values to show even in Firefox?

Edit:

Here are more details on my question:

The table is constructed as such:

<table id="tblTest" class="testTable">
    <thead>
        <tr>
            <td>Product</td>
            <td>Quantity</td>
            <td>Remove TR</td>
        </tr>
    </thead>
    <tbody id="tblTestTR">
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>
<input type="button" id="btnTest" value="Add Table Row" />&nbsp;<input type="submit" id="btnSubmit" value="Submit Form" />
<input type="hidden" id="txtHTML" name="txtHTML" />

With the function to add the table row being:

function AddTR()
        {
            var txtBox = "<tr id='dynTR'><td><input type='text' class='textBoxes' value='' /></td><td><input type='text' class='textBoxes' value='0' /></td><td><input type='button' value='remove' /></td></tr>";
            x++;
            var oRow = $(txtBox);
            $(this).append(oRow);

            oRow.find("input[type=\"button\"]").click(function ()
            {
                $(this).closest("tr").remove();
            });
        }

And to get the HTML of the <tbody> being:

function GetInnerHTML(node)
        {
            alert(node.html());
            $("#txtHTML").val(node.html());
        }

Answer 1

The proper way to read values of input elements is by reading their actual values, not the markup that renders them. You cannot assume that a browser will change the markup to store the values of input elements.

The fact that IE seems to be doing that is really bad. Always keep in mind that IE is notorious (even with IE9) for breaking standards.

A similar case where IE stores state by manipulating the original markup: Reading the href attribute of a relative link will give you the resolved absolute URL. Just to give you an idea about how abundant these quirks are…

Don’t base your algorithm on browser quirks, but seek out the proper way. Try the val() method that jQuery provides.