Question

I have a modal form that is pretty much same as this one: http://jqueryui.com/demos/dialog/modal-form.html

The form already has a submit button there. I can manage to use this button to submit the form, but the callback function won’t work. Is there a way to use my own submit button and make the callback function working?

buttons: {
    "Create an account": function () {            
        $("#dialog-form").html("thank you for <b>submit</a>");
    },
    Cancel: function () {
        $(this).dialog("close");
    }
}

you can test my code on jsFiddle

http://jsfiddle.net/QSJpS/3/

Answer 1

Here’s a working jsFiddle demo:

The part I changed was inside of the “Create an account” section:

if ( bValid ) {
    $( "#users tbody" ).append( "<tr>" +
        "<td>" + name.val() + "</td>" + 
        "<td>" + email.val() + "</td>" + 
        "<td>" + password.val() + "</td>" +
        "</tr>" ); 
    $( this ).html("Thank you!");
}

Output:

---

EDIT for Ajax Solution:

What you need to do is post your form via ajax so that you don’t have a page refresh screwing up your message. You can do something like this:

$("#submit-button-id").click(function(e) {

    var data = 'name='+ $("#name").val() + 
               '&email=' + $("#email").val() + 
               '&password=' + $("#password").val() ;  

    $.ajax({  
        type: "POST",  
        url: "some-processing-page.html",  
        data: data,  
        success: function() {  
            $('#dialog-form').html("Thank you for your submission!");  
            $(".ui-dialog-buttonpane").hide();
        }  
    });  

    e.preventDefault();  

});