表格方法和灯箱（或替代）

Question

I've been looking over an older post trying to work out a solution for showing the confirmation PHP in a lightbox.

As my knowledge on javascript and ajax is close to zero - well, it IS zero - I'm hoping someone might elaborate.

<form method="post" action="contact.php">

Is the basic form method. Would I be able to use something like Tinybox2 and simply add

TINY.box.show({url:'submit.php',post:'id=16',width:200,height:100,opacity:20,topsplit:3})

to the action, rather than a php?

Cheers, Trin

Answer 1

If you want to use TinyBox, you need to serialize your form before you post it. One of the fastest and nonpainful way to do this to use jQuery (Just add reference if you haven't done this.)

TINY.box.show({url: $("form").prop("action"), post:$('form').serialize(),width:200,height:100,opacity:20,topsplit:3})

First one grabs the "action" url from your form, and the second method makes your form to be posted with TinyBox.

This code should display a tinybox when user submits the form:

$("form").submit(function( event ) {
    event.preventDefault();
    TINY.box.show({
        url: $("form").prop("action"), 
        post: $('form').serialize(),
        width:200,
        height:100,
        opacity:20,
        topsplit:3
    });
    return;
});

Just put this inside

<script type="text/javascript">
$(document).ready(function () {
   // Here.
}
</script>

block.