How to make a POST action work with jquery/ajax Colorbox? (fiddle inside)

Question

I've found this colorbox tutorial

and tried to make it work the same way with a POST action, but it doesn't work, it just keeps loading.

here's a fiddle

The button is the POST action that doesn't work well, and the text link is the original example that works ok.

I can't show this on the fiddle, but basically I'm posting the form to a simple PHP file with a switch/case.

How can I make this work?

Answer 1

Because you cannot use the form as trigger the plugin is not done this way the only way is if you use on click event on the submit button. In your form add id to the submit button:

<form action="ajax.html" method="POST" target="_blank" class="">
    <input id="111" name="a" type="hidden" value="something-else"  />
    <input type="submit" id="cboxFormButton" class="button" value="Test">
</form>

and in your script add this:

$("#cboxFormButton").click(function(e){

    e.preventDefault();

    // Call the colorbox link from here...
    $.colorbox({href:"/echo/html/"});

    // if you want to the form action url do this
    // $.colorbox({href: $(this).closest('form').attr('action') });

});