Question

I have a form on a webpage. When the user enters input into form, and hits Submit, I would like colorbox to pop-up with the results page.

Any ideas on how to go about this?

I’m thinking that I have to convert the form data into a get string, put that on the end of the url to open, and then send that to colorbox. Is that the right way to go about it, or is there an easier way?

Thanks 🙂

Answer 1

To this, I would:

1. Manually submit the form by serializing the form as an array
2. Then, submit the data using get, post, or ajax.
3. Write the response to an invisible div and then use colorbox on this div.

Example:

$("#myForm").submit(function(){
    var formData = $(this).serializeArray();
    $.get("mypage", formData, function(r){
        $("body").append("<div id='response'></div>");
        $("#response").hide().html(r).colorbox();
    });
    return false; // To override non-ajax submitting
});

Modifications you might have to make:

• Change get to post or ajax
• Change the div that the response gets dumped to (perhaps generate a div with a random ID instead of using a constant, response, as the ID)

Also:

I’m thinking that I have to convert
the form data into a get string, put
that on the end of the url to open,
and then send that to colorbox.

This would work, but only if your form works with get. I wouldn’t recommend using get for forms in general, as this can lead to nasty CSRF and XSS attacks.