views:

88

answers:

0

I've got a form that uses a jQuery dialog window for verification of the form data. When the user clicks the submit button on the form, the dialog window displays (only if the form validates) and shows the data the user has entered in the form. If they verify that the data is correct, they click OK in the dialog window and the form gets submitted. This works in every browser but IE6. The form data does not show up at all. Here is my javascript code:

$(function() {
    initFormValidation();
    initVerificationDialog();
});

function initFormValidation() {
    $("#acctfrm").validate({
        meta: "validate",
        submitHandler: function() {
            fillVerificationDialog();
            $("#verification_dialog").dialog('open');
            return false;
        }
    });
}

function fillVerificationDialog() {
    $("#dialog-data").empty();
    $("<span class='label'>").text("First Name: ").appendTo("#dialog-data");
    $("<span class='value'>").text($("#firstname").val()).appendTo("#dialog-data");
    $("<br>").appendTo("#dialog-data");
    $("<span class='label'>").text("Last Name: ").appendTo("#dialog-data");
    $("<span class='value'>").text($("#lastname").val()).appendTo("#dialog-data");
    $("<br>").appendTo("#dialog-data");
}

function initVerificationDialog() {
    $("#verification_dialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "OK": function() {
                document.forms["acctfrm"].submit();
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });
}

Here's the HTML for the form:

<div id="appcontent">
    <form id="acctfrm" action="" method="post">
        <fieldset>
        <div>
            <label for="firstname">First Name:</label>
            <input id="firstname" type="text" name="firstname" placeholder="First Name" />
        </div>
        <div>
            <label for="lastname">Last Name:</label>
            <input id="lastname" type="text" name="lastname" placeholder="Last Name" />
        </div>
        </fieldset>
        <fieldset>
          <p><input type="submit" class="button" value="Submit"></p>
        </fieldset>
    </form>
    <div id="verification_dialog" title="Verify Account Data">
        <p id="dialog-data"></p>
        <p>If this information is correct, click 'OK'.</p>
        <p>To edit this information, click 'Cancel'.</p>
    </div>
</div>