PHP Post to Simple Modal then Update the page

Question

So what I'm attempting to do is this:

User clicks a radio html form button.
User clicks a submit button to confirm his choice.
SimpleModal pops up and displays the value of the button chosen.
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

score 0 · Answer 1 · answered Jul 08 '12 at 23:23

0

$('form').submit(function(e){
  e.preventDefault();
  var ourVal = $('input:radio').val();

  $.modal('<div id="ourModal"><div id="modalText"></div></div>');
  $('#modalText').text(ourVal);
});

answered Jul 08 '12 at 23:23

Ohgodwhy

49,779
11
80
110

Okan Kocyigit · Accepted Answer · 2012-07-09T11:09:29.070

0

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,

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

edited Jul 09 '12 at 11:09

answered Jul 09 '12 at 00:10

Okan Kocyigit

13,203
18
70
129

I attempted your method but I still can't get info to show up. Here is my code: – Chad Fisher Jul 09 '12 at 03:00
I added my code to my main post. So index.php generators a bunch of radio buttons based on the users first input. He clicks a radio button, then clicks the "Demo" button. The modal the pops up, and I would like to use the radio PHP post if I can in that modal. – Chad Fisher Jul 09 '12 at 03:12
Still no luck unfortunately. I've tried both $_GET['test'] and $_POST['test']. Maybe test: $("input[name='test']:checked").val() is not returning anything? – Chad Fisher Jul 09 '12 at 21:19
Well thanks for all your help. I decided to go with FancyBox. I'm having a lot more success with that, along with help from this thread: http://stackoverflow.com/questions/2916247/posting-a-form-to-popup-form-using-jquery-and-fancybox – Chad Fisher Jul 11 '12 at 17:48

PHP Post to Simple Modal then Update the page

2 Answers2

cantact.js

contact.php