Ajax modal form error handling

[franko75]

Hi, i'm setting up a couple of forms on the admin section of a CMS i'm developing. I want to use (unobtrusive) modal forms using JQuery, but I'm not sure how to return error messages/feedback from the server and display them within the modal window.

So this is where i've got to. On my main page (containing all the JS), I am loading a form from an external page and this is being displayed in the modal window. So the external code which is being loaded in the modal window contains an html form as well as the php script for processing the form and sending a JSON response based on validation/success etc. I want to be able to access the response from the php script and display it in the modal window, however, at the moment all that is happening is i click submit and form inside the modal window is duplicated.
Here is the code which is causing the problem - hope someone can help!

$(document).ready(function(){
            $("table")
            .tablesorter({widthFixed: true})
            .tablesorterPager({container: $("#pager")});
            
            $("a.user_admin").colorbox({transition:"elastic"}, function() { // onload...do
                    $('#edit_user').submit(function() {
                
                var inputs = [];
                $(':input', this).each(function() {
                        inputs.push(this.name + '=' + escape(this.value));
                })
          
                jQuery.ajax({
                    data: inputs.join('&'),
                    url: this.action,
                    timeout: 2000,
                    error: function() {
                    console.log("Failed to submit");
                    },
                    success: function(r) { 
                    $("#message").before(r);
                    }
                }) 
          
                return false;
                    })
          })
            
        });

[Airshow]

Franko75,

I've not been through yout javascript in detail because from the symptoms you describe, I think the (main?) problem lies in the php not javascript.

If the same php script is serving up the form and a response to some user event (submission or whatever), then the php must contain two (or more) main branches - one to serve the form and one to perform an action and serve a response.

From the symptoms it appears that the form is being re-served when an action/response was demanded.

This situation can be handled by including an "action=xxx" value in the post/get data. For example, initially, action=blank would cause the php to serve the form; action=1 would branch to eg. a form checking block (or whatever) with appropriate responses; and similarly action=2, 3 etc. would branch to further other actions/responses. I normally handle such branching in a switch/case structure.

Alternatively, of course, you can have each action in a separtate script, but I find that a bit untidy. Some will disagree - it's really a question of preference.

Of course, it may be something else, but that's what first comes to mind.

Airshow