Question

I have a jQuery popup box made with a div. When the user clicks a button, this popup will open. This popup contains a form, populated dynamically based on a key sent via POST/GET with jQuery.

1. How to I generate this form dynamically using these POST/GET variables?
2. How do I include a form within this popup, without using an iframe?

Answer 1

Well you can use the $.ajax() function of jQuery that upon a click event will send a request to a – sort of – a web-service script which will grab that variable and then respond with the HTML content of the dynamic form.

Using the returned data along with $.html() function you can set the wrapper’s innerHTML with the returned HTML and you will have your form.

Small example:

jQuery Code

$("#button").click(function() {
    formID = 'form1';

    $.ajax({
        url: "formGenerator.php",
        type: "POST",
        data: formID,
        success: function(data) {
            if (data.length > 0)
                $("#popupWrap").html(data);
        }
     });
});

PHP Code

<?php
    // PHP Code 
    if (isset($_POST['data']) && !empty($_POST['data']))
    {
        switch($_POST['data'])
            case 'form1':
                echo '<form name="FormName" action="" method="POST"><input type="text" /><input type="submit" value="Submit" /></form>';
            break;
            case 'form2':
                echo '<form name="FormName2" action="" method="POST"><input type="text" /><input type="submit" value="Submit" /></form>';
            break;
    }
?>

Notice: this code hasn’t been tested, I wrote it from the top of my head, but it should get you going.

http://api.jquery.com/jQuery.ajax/