Question

I have a HTML form which submits the data to a cgi-bin script which in turns provides some output.

I have seen this example that show a modal box with jQuery. This would be perfect for showing the output of the cgi-bin! The problem is that this example works with a
<a href> and I can’t replace the submit button with a link. How should I do?

Answer 1

$('#your-form').submit(function(e){
    e.preventDefault(); // make sure form is NOT submitted by the browser as this would make us navigate away from the current page and therefor render our modal window useless
    $this = $(this); // cache $(this) for better performance
    $.post( // submit the form via POST ...
        $this.attr('action'), // ... to the action URL of our form
        $this.serialize(), // ... with all the form fields as data
        function(data) { // ... and with the server response ...
            $(data).appendTo('body').paulund_modal_box().click(); // ... open the modal.
            // note that the click() is only required for the rather quirky "plugin" that you linked to. I suggest using easybox or the like
        }
    );
});