Question

So what I’m attempting to do is this:

1. User clicks a radio html form button.
2. User clicks a submit button to confirm his choice.
3. SimpleModal pops up and displays the value of the button chosen.
4. User clicks ‘Accept’ in the SimpleModal and the parent page updates accordingly.

I’m not so worried about step 4, but I’m not sure how to transfer the post information into the SimpleModal.

For reference I’m using the SimpleModal Contact Form demo that Eric Martin has provided.

I’m new to Ajax as well as jQuery.

I saw this post: Passing a Value from PHP to the SimpleModal Contact Form

They had a similar problem, however they are not retrieving post information from their index page.

Is there a way to retrieve this post information and pass it to the contact.php that is called for the SimpleModal window?

Any help is greatly appreciated.

My index (where radio buttons are generated.):

<div id='contact-form'>
<form action="index.php" method="get">
                    <?
                    echo "<h3>Degrees (double click a degree to add a generator):</h3><br />";

                    for($deg = $_SESSION['degmin']; $deg <= $_SESSION['degmax']; $deg++)
                    {
                        ?>
                        <table>
                        <tr>
                        <th>
                        <?
                        echo $deg;
                        for($gen = 0; $gen < $_SESSION['degree_gens'][$deg]; $gen++)
                        {
                            echo "<input type='radio' name='test' value='deg' />";
                        }
                        ?>
                        </th>
                        </tr>
                        </table>
                        <?
                        echo "<br /><br />";
                    }
                    ?>
                    <input type='submit' name='contact' value='Demo' class='contact demo'/>
                    </form>
                    </div>

My contact.js (this is called from index when user clicks “Demo):

$.get("data/contact.php", { r: $("input[name='test']:checked").val()}, function(data){
                // create a modal dialog with the data
                $(data).modal({
                    closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
                    position: ["15%",],
                    overlayId: 'contact-overlay',
                    containerId: 'contact-container',
                    onOpen: contact.open,
                    onShow: contact.show,
                    onClose: contact.close
                });
            });

My contact.php (The modal displays this page, trying to output post info):

<h1 class='contact-title'>Edit Generator(" . $_POST['test'] . "):</h1>

-Chad

Answer 1

As I understand, you want to load modal from external php file, so you should pass the variable with GET or POST paramater, here is an example how you can do that,

cantact.js

$.get("data/contact.php", { test: $("input[name='test']:checked").val()}, function(data){
    // create a modal dialog with the data
    $(data).modal({
        closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
        position: ["15%",],
        overlayId: 'contact-overlay',
        containerId: 'contact-container',
        onOpen: contact.open,
        onShow: contact.show,
        onClose: contact.close
    });
});

contact.php

<h1 class='contact-title'>Edit Generator(" . $_GET['test'] . "):</h1>

---

POST and GET are different types of HTTP request method.

In jQuery,

1. if you use $.get(), you can get parameters with $_GET in PHP.
2. if you use $.post(), you can get parameters with $_POST in
   PHP.