Display form output in popup overlay

Question

TL;DR - I'd like to display the end result of a form submission in a popup overlay instead of a new tab.

I have a form that writes text on top of an image. I hit submit and it generates the image with the text embedded to it to a new page.

I am using this jQuery plugin for my popup overlay: http://dev.vast.com/jquery-popup-overlay/

To trigger the popup overlay, you have to assign a class to where you want the trigger. So I'll assign it to the form's submit button:

<input type="submit" value="Submit" class="my_popup_open">

I create a div with an id to show where I'd like the popup overlay to be at:

<div id="my_popup">CONTENT GOES HERE</div>

$(document).ready(function() {

    $(".submit").click(function() {
        var imageFile = $("input#imgInp").val();
        var topLine= $("input#toptextbox").val();
        var bottomLine = $("input#bottomtextbox").val();
        var dataString = 'file-to-upload='+imageFile+'&firstname='+topLine+'&lastname='+bottomLine;
        $.ajax({
          type: "POST",
          url: "action.php",
          data: dataString,
          success: function() {
            // Initialize the plugin
            $('#my_popup').popup(); 
          }
        });
        return false;
     });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.13/jquery.popupoverlay.js"></script>

<form action="">
  First name:<br>
  <input type='file' name="file-to-upload" id="imgInp">
  <input type="text" name="firstname" id="toptextbox"><br> Last name:<br>
  <input type="text" name="lastname" id="bottomtextbox><br><br>
  <input type="submit" value="Submit" class="my_popup_open">
</form>

Recap question: So instead of opening a new page to action_page.php, how am I able to display the final result of the form within the popup overlay?

score 0 · Answer 1 · answered Oct 25 '17 at 07:44

0

You can use the beforeopen callback function for that.

$(function(){
  $('#my_popup').popup({
    beforeopen: function() {
      var text = 'First name: '+$('[name=firstname]').val()+'<br />';
      text += 'Last name: '+$('[name=lastname]').val();
      this.html(text);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.13/jquery.popupoverlay.js"></script>
<form action="/action_page.php" method="POST">
  First name:<br>
  <input type="text" name="firstname" value="John"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Doe"><br><br>
  <input type="submit" value="Submit" class="my_popup_open">
</form>

<div id="my_popup">asdf</div>

answered Oct 25 '17 at 07:44

GreyRoofPigeon

17,833
4
36
59

Sweetness! Now how will I be able to get the final output (the image with merged text) in the popup? – the_fez Oct 26 '17 at 07:05
What do you mean with "final output" and "image with merged text"?? Please clarify – GreyRoofPigeon Oct 27 '17 at 06:15
I have a form that writes text on top of an image that the user chooses. I hit submit and it generates said image with the text embedded to it to a new page. Instead of opening a new webpage, I would like to display the final output(image with embedded text) to the popup overlay. Let me know if I need to clarify more. Thanks! – the_fez Oct 28 '17 at 21:29
How is that image created? – GreyRoofPigeon Oct 29 '17 at 22:52
Magic and the wonderful world of PHP. The user uploads a picture of their choosing. When they hit submit, the image and text get processed in the second PHP file which uses the PHP function, [imagettftext](http://php.net/manual/en/function.imagettftext.php) to fuse the text and image together. I then place that picture in a folder using [imagejpeg](http://php.net/manual/en/function.imagejpeg.php). – the_fez Oct 31 '17 at 04:29
Then you should get that image URL somehow and add it to the modal. You can change the `text=....` inside the jQuery functio – GreyRoofPigeon Oct 31 '17 at 07:18
And that brings us back full circle to my initial question: How am I able to display the final result of the PHP action form within the popup overlay? The URL is created in PHP while the popup overlay is being used in a JS file. – the_fez Nov 01 '17 at 05:59
With JS you can communicate with a PHP file. By using [`ajax()`](http://api.jquery.com/jquery.ajax/) you can send info to the PHP file. There you create and save your image. Return the url of the saved image back to the JS script and insert that in your modal – GreyRoofPigeon Nov 01 '17 at 07:15
Cool. I updated the code above to reflect the ajax() call. I am having trouble returning the image URL in the action.php file. First, should I set the image URL in the PHP file as a variable and return that variable? Secondly, what would I place into the success function parentheses and the .popup parentheses? – the_fez Nov 01 '17 at 07:37
Add your `action.php` please. – GreyRoofPigeon Nov 01 '17 at 07:42
Dude, there's so much code in that file. What exactly are you looking for? – the_fez Nov 01 '17 at 07:56
For a solution for you :). If you end the PHP file with echoing the URL, that can be accessed in the success function `.success( function(data) { // data is the PHP echo } );`. In this short example, `data` is the returned data from the AJAX call – GreyRoofPigeon Nov 01 '17 at 09:08
As soon as you mentioned echoing the data, I started troubleshooting line by line to see what was and what wasn't working. That troubleshooting led me to find out that the uploaded images weren't processing. I found a Stack Overflow regarding passing all the form data and got it to work! :D – the_fez Nov 07 '17 at 06:53

score 0 · Answer 2 · answered Nov 07 '17 at 06:50

Many thanks to @LinkinTED for the patience and ajax recommendation in outputting the end result to the webpage.

THE SOLUTION:

I used this webpage's solution in passing all the form data at one time.

        $.ajax({
            type: "POST",
            url: "action.php",
            data : new FormData($('#myform')[0]),
            processData: false,
            contentType: false,
            dataType: "html",
            success: function(data) {
                // Initialize the plugin
                $('#herewego').html(data);
                $('#my_popup').popup({
                    opacity: 0.1,
                    transition: 'all 0.3s',
                });
                $('#my_popup').popup("show");
            }
        });
        return false;

Once I was able to make sure that data was not going in NULL in the action.php file, I was able to echo the image URL and display the image in the popup overlay. Eureka!

Display form output in popup overlay

2 Answers2