Submit form after confirmation Dialog with to be submitted values

Submit form after confirmation Dialog with to be submitted values

Hello,
I have been working on submit forms in combination with a confirmation
dialog.
I would like to have the confirmation dialog pull up the information
to be submitted, so that I can check if what's being submitted is
correct before hitting the "Confirm" button to submit the information.
I'm new with jquery but if I'm not mistaken with the setup I have
right now it would not work because the jquery code halts the submit
until I click "Confirm". So I was thinking it would be impossible to
get the submitted values before clicking "Confirm".
Is there any other way I might be able to do this?
This is what I have at the moment:
$(function(){
    $('#confirmation').dialog({
        autoOpen: false,
        modal: true,
        minHeight: 300,
        width: 400,
        buttons: {
            "Confirm": function() {
                document.new_roles.submit();
            },
            "Cancel": function() {
                $(this).dialog('close');
            }
        }
    });
    $('form#new_roles').submit(function(){
        $('#confirmation').dialog('open');
        return false;
    });
});
The HTML Form:
<form action="http://localhost/index.php/member/roles/1" method="post"
id="new_roles" name="new_roles">
    <label for="fname">First Name * </label>
    <input type="text" name="fname" value="" id="fname" />
    <label for="lname">Last Name * </label>
    <input type="text" name="lname" value="" id="lname" />
    <label for="dob">Date of Birth (yyyy-mm-dd) * </label>
    <input type="text" name="dob" value="" id="dob" class="datepicker" /