how to submit Jquery ui modal form into database?

Question

I'm working on a popup form for the registration of new users and admin. the user will go to the new.php. the site consists a list of existing user in the form of table and a 'create new user' button. click the 'create new user' button and it will show a popup form. after submitting the form, the page will refresh itself and update the existing user table.

to do all this, I'm using the jQuery ui modal form demo.

as a demo it works fine. but the demo didnt save the data. everyting the page refresh, the submitted data would dissapear. and it didnt go to database. how can I pass the data into the database?

new.php (the dialog)

 <script type="text/javascript">
$(function() {
    var name = $( "#name" ),
        tel = $( "#tel" ),
        email = $( "#email" ),
        username = $( "#username" ),
        password = $( "#password" ),
        allFields = $( [] ).add( name ) .add( tel ) .add( email ) .add( username ) .add( password ),
        tips = $( ".validateTips" );
    function updateTips( t ) { tips.text( t ).addClass( "ui-state-highlight" );
    setTimeout(function() { tips.removeClass( "ui-state-highlight", 1500 ); }, 500 );
}

function checkLength( o, n, min, max ) {
    if ( o.val().length > max || o.val().length < min ) { o.addClass( "ui-state-error" );
        updateTips( "Length of " + n + " must be between " + min + " and " + max + "." );
    return false;
    } 
    else 
    {
    return true;
    }
}

function checkRegexp( o, regexp, n ) {
    if ( !( regexp.test( o.val() ) ) ) { o.addClass( "ui-state-error" );
        updateTips( n );
    return false;
    } 
    else 
    {
    return true;
    }
}

$( "#dialog-form" ).dialog({
    autoOpen: false,
    height: 600,
    width: 450,
    modal: true,
    buttons: {
            "Create": function() {
            var bValid = true;
            allFields.removeClass( "ui-state-error" );
            bValid = bValid && checkLength( name, "name", 3, 80 );
            bValid = bValid && checkLength( tel, "tel", 10, 11 );
            bValid = bValid && checkLength( email, "email", 6, 80 );
            bValid = bValid && checkLength( username, "username", 4, 20 );
            bValid = bValid && checkLength( password, "password", 5, 16 );
            bValid = bValid && checkRegexp( name, /^([a-zA-Z ])+$/, "Name may consist of a-z, space only." );
            bValid = bValid && checkRegexp( tel, /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/, "eg. 012-976-9422" );
            bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
            bValid = bValid && checkRegexp( username, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
            bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
                if ( bValid ) {
                        $( "#users tbody" ).append( "<tr>" +
                        "<td>" + name.val() + "</td>" +
                        "<td>" + tel.val() + "</td>" +
                        "<td>" + email.val() + "</td>" +
                        "<td>" + username.val() + "</td>" +
                        "<td>" + password.val() + "</td>" +
                        "</tr>" );
                        $( this ).dialog( "close" );
                        }
            },

Cancel: function() { $( this ).dialog( "close" ); }

},

close: function() { allFields.val( "" ).removeClass( "ui-state-error" ); }

});

$( "#create-user" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});

});

</script>
</head>

new.php (form & table)

<!--BUTTON-->   
<button id="create-user">Create new user</button>

<!--DIALOG FORM-->
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
    <fieldset>
        <label for="name">Full Name</label>
        <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
        <label for="tel">Phone Number</label>
        <input type="tel" name="tel" id="tel" class="text ui-widget-content ui-corner-all"/>
        <label for="email">Email</label>
        <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
        <label for="name">Username</label>
        <input type="text" name="username" id="username" class="text ui-widget-content ui-corner-all">
        <label for="password">Password</label>
        <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all">
        Admin
        <input id="radio1" name="admin" type="radio" class="radio-btn" value="admin" />
        User
        <input id="radio2" name="user" type="radio" class="radio-btn" value="user" /> 
        <script type="text/javascript" defer="defer">
        <!-- 
            if(document.getElementById){
                if (option1 != ""){
                // Radiobutton "No" should be selected.
                document.getElementById('radio1').checked = false;
                document.getElementById('radio2').checked = true;
                }
                else if (option2 != ""){
                // Radiobutton "Yes" should be selected.
                document.getElementById('radio1').checked = false;
                document.getElementById('radio2').checked = true;
                }
                }
        // -->
</script>
    </fieldset>
</form>
</div>

<!--TABLE-->
<div id="users-contain" class="ui-widget">
<p style="float:left;">Existing Users:</p>
<br />
<table id="users" class="ui-widget ui-widget-content">
    <thead>
        <tr class="ui-widget-header ">
        <th width="26%">Nama</th>
        <th width="14%">No. Telefon</th>
        <th width="25%">Email</th>
        <th width="19%">Username</th>
        <th width="16%">Password</th>
        </tr>
    </thead>

<tbody>
    <tr>
    <td>John Doe</td>
    <td>0123456789</td>
    <td>john.doe@example.com</td>
    <td>john89</td>
    <td>johndoe1</td>
    </tr>
</tbody>
</table>
</div>

Answer 1

You have't posted your ajax code to submit form. Please post that too. On create you have just appended "tr" element, no ajax after or before this code

$( "#users tbody" ).append("<tr>"+.....+"</tr>")