Load page to Modal Window from form with jQuery

Question

Hi, I´m working on a website with a purchase process. I have a form generated by some PHP that looks like this:

<form name="order_form" action="'.$thePayreadApi->get_server_url().'" method="post" id="payer-form">
'.$thePayreadApi->generate_form().'
<input type="submit" value="Klicka för betalning" />
</form>';

When the form is submitted it will go to a new page (located on another server) where the purchase is performed.

Basically what I want is the form to be submitted through AJAX and then load the new page in a Modal Window. I use jQuery throughout the website so I´d like a solution based on that lib.

I´ve found these sites that might be a hint:

http://pixeline.be/blog/2008/javascript-loading-external-urls-in-jqmodal-jquery-plugin/ http://dev.iceburg.net/jquery/jqModal/

Any help is really appreciated!

Answer 1

I haven't tried this exactly, but the theory is what I would go for:

$("form[name='order_form']").submit(function() {

    //Validate in here
    var validate = false;
    if($("input[form='element1']").val()!="") {
        validate = true;
    }
    if(validate) {
        this.submit();
    } else {
        return false;
    }
});

<form action="shopping.php" target="targetIframe" method="post">
    <input type="submit" value="Click Me" />
</form>

<iframe name="targetIframe" src=""></iframe>