JQuery dialog form behavior issues_问答_开发者

I'm using JQuery for the first time and I've been working with the JQuery UI dialog example. I've extended it with a few extra inputs.

I'm experiencing odd behaviors in different browsers.

When I try IE, the append works as expected.

When I try Chrome, the append works but it appends twice.

When I try FireFox, the form is visible on the page. When the dialog loads, only the text before the form shows. Clicking the add dimensions button adds an empty row.

It's only my second day experimenting so I'm probably doing a number of things wrong.

How can I create a dialog to append an entry from the form correctly using the three browsers?

Any suggestions would be greatly appreciated.

Here is the code I am working with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

$(function(){

    var     dClass = $("#dClass"),
        dWeight = $("#dWeight"),
        dLength = $("#dLength"),
        dWidth = $("#dWidth"),
        dHeight = $("#dHeight"),
        WeightMetric = $("#WeightMetric"),
        LxWxHMetric = $("#LxWxHMetric");

    $("#dialogExample").dialog({
        autoOpen:false,
        modal:  true,
        buttons: {
              'Add dimensions': function(){
                        $('#dimensions tbody').append('<tr>' +
                            '<td>' + dClass.val() + '</td>' +
                            '<td>' + dWeight.val() + '</td>' +
                            '<td>' + WeightMetric.val() + '</td>' +
                            '<td>' + dLength.val() + '</td>' +
                            '<td>' + dWidth.val() + '</td>' +
                            '<td>' + dHeight.val() + '</td>' +
                            '<td>' + LxWxHMetric.val() + '</td>' +
                            '</tr>');
                        $(this).dialog('close');
                        }
             },
             Cancel:  function(){
                    $(this).dialog('close');
             }
    });

    $('#add-dimensions')
            .button()
            .click(function(){
                $('#dialogExample').dialog('open');
            });
});
</script>

Class: Weight: L: W: H:

    <div>
    <button id='add-dimensions'>Add</button>
    </div>
</div>

<div style="display: none;" id="dialogExample" title="Add Dimensions">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Integer vitae 

felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est.

<form>
<fieldset>
    <label for="dClass">Class:  </label>
    <input type="text" name="dClass" id="dClass" class="text ui-widget-content ui-corne开发者_JAVA百科r-all" />

    <label for="dWeight">Weight:  </label>
    <input type="text" name="dWeight" id="dWeight" class="text ui-widget-content ui-corner-all" />

    <select id="WeightMetric">
                <option value="Metric1">metric 1</option>
                <option value="Metric2">metric 2</option>
                <option value="Metric3">metric 3</option>
        </select>

    <label for="dLength">L:  </label>
    <input type="text" name="dLength" id="dLength" class="text ui-widget-content ui-corner-all" />

    <label for="dWidth">W:  </label>
    <input type="text" name="dWidth" id="dWidth" class="text ui-widget-content ui-corner-all" />

    <label for="dHeight">H:  </label>
    <input type="text" name="dHeight" id="dHeight" class="text ui-widget-content ui-corner-all" />

    <select id="LxWxHMetric">
            <option value="Metric1">metric 1</option>
            <option value="Metric2">metric 2</option>
            <option value="Metric3">metric 3</option>
    </select>
</fieldset>
</form>
</div>
</body>

The problem was the malformed html. I missed several key closing tags in the html. That's what I get for using plain old notepad without caffeine.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

$(document).ready(function () {

        var dClass = $("#dClass"),
        dWeight = $("#dWeight"),
        dLength = $("#dLength"),
        dWidth = $("#dWidth"),
        dHeight = $("#dHeight"),
        WeightMetric = $("#WeightMetric"),
        LxWxHMetric = $("#LxWxHMetric");

        $("#dialogExample").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                'Add dimensions': function () {
                    $('#dimensions tbody').append('<tr>' +
                            '<td>' + dClass.val() + '</td>' +
                            '<td>' + dWeight.val() + '</td>' +
                            '<td>' + WeightMetric.val() + '</td>' +
                            '<td>' + dLength.val() + '</td>' +
                            '<td>' + dWidth.val() + '</td>' +
                            '<td>' + dHeight.val() + '</td>' +
                            '<td>' + LxWxHMetric.val() + '</td>' +
                            '</tr>');
                    $(this).dialog('close');
                }
            },
            Cancel: function () {
                $(this).dialog('close');
            }
        });

        $('#add-dimensions')
            .button()
            .click(function () {
                $('#dialogExample').dialog('open');
            });
    });
</script>

Class: Weight: L: W: H: Add Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Class: Weight: metric 1 metric 2 metric 3 L: W: H: metric 1 metric 2 metric 3