css popup window incorporating session variables or php file

Question

I have recently installed Simple Mailing List 2 (currently in beta) and I have got everything to work so far. The main thing that was left for me to do was to make a custom php page which the signup form redirects to once submitted. The content that the page shows is based on what the user enters in the email field and returns one of three results:

an error message if the email syntax is incorrect.
a custom message if the user has subscribed telling them to check their email.
a custom message if the user has chosen to unsubscribe.

That's the background out of the way. Now what I intend to do is show a popup window that includes the contents of the redirected php page (ie. one of the three results) instead of going to a new page. Is it possible to do this a css popup box so I don't have to open up a new window?

Thankyou

Adam

Could you not use an ajax request to that script within this popup? — Steve Adams, Oct 26 '11 at 18:09

score 1 · Answer 1 · answered Oct 26 '11 at 18:14

1

You can use JavaScript to send an ajax request to the PHP page that will do the calculations, the result will then be sent to your "window" content and then you show the window to the user

answered Oct 26 '11 at 18:14

SparK

5,181
2
23
32

Visionary Software Solutions · Answer 2 · 2011-10-26T18:28:56.853

You're mixing metaphors. CSS is just a presentational technology that you use to determine the style of something. There is no such thing as a "css popup box".

What you want to do is have an HTML element (likely a div) that contains the information you intend to show, initially set to not be visible (you use CSS for this with the display:none; style). What you're describing is essentially an AJAX interaction that uses Javascript to parse the contents of the form, send data to the server to be evaluated, and return a message to be displayed (without triggering a postback/going to a new page). That Javascript would also handle the CSS part of setting the display of the HTML element to true.

This is a fairly common scenario, so you should be able to find snippets online.

...but here's a super dumb example

<html>
    <head>
        <title>AJAX Test</title>
    </head>
    <body>
        <form action="#">
           <input type="text" id="enterStuff" />
        </form>
        <div id="response" style="display:none;">
          <p id="message">Put stuff in me</p>
        </div>
        <script type="text/javascript">
             jQuery(document).ready(function(){
               registerEventListeners();  
             });

            function registerEventListeners(){
              jQuery("#enterStuff").change(getData);
            }

            function getData(){

            jQuery.ajax({
               type : 'POST',
               data : {
                  stuff : jQuery("#enterStuff").val(),
               },
               url : "http://localhost/myprocessor.php",
               success : showCool,
               complete : updateDisplay
            });
           }
           function showCool(data, textStatus, jqXHR){
              var selector = jQuery("#message");
              selector.val(data)
           }
           function updateDisplay() {
              jQuery("#response").show();
           }
       </script>
    </body>
</html>

Then your myProcessor.php would have to read the value of the variable, do some logic, and echo a response.

ah ok i think I get what you're saying, so instead of sending the form to process.php directly, instead send the data to an ajax interaction which will send the data to process.php itself, get the information back, and display the output in the hidden div? I just used "css popup window" in a slang context to refer to popups that don't open up a new window! — AdamBarry, Oct 26 '11 at 19:52
Correct. That's the most common implementation pattern for this type of interaction. The iframe may work, though they were generally frowned upon for a while (they seem to be coming back). — Visionary Software Solutions, Oct 26 '11 at 20:04
Cheers for the help! Does this method have a fallback if the user has JavaScript disabled? I noticed that the form action="#", the method and action attributes are called in the script. — AdamBarry, Oct 26 '11 at 20:33
No, AJAX doesn't work too well without the J. ;) In that scenario, you could use the — Visionary Software Solutions, Oct 28 '11 at 23:53

score 0 · Answer 3 · answered Oct 26 '11 at 18:11

0

You could use an <iframe> as an in-document 'pop-up', you just set the target of the form to the name/id of the iframe. (You can use some JavaScript to only show the iframe once the form is submitted.)

answered Oct 26 '11 at 18:11

Benjie

7,701
5
29
44

css popup window incorporating session variables or php file

3 Answers3