Submitting a form through a modal box without leaving the page/modal

Question

I am using the project 'ModalBox' from http://okonet.ru/projects/modalbox/index.html in order to generate my modal.

I am also using this overall script that persists e-mails submitted via form into a basic text file as a simple/quick solution. http://www.knowledgesutra.com/forums/topic/25586-php-simple-newsletter-script/

I have a dilemma though. In order to keep the modal and display my 'mailing_thankyou.php' my form has to have 'onsubmit="return false"' but in order for my php script to work, I have to remove that return false, but then it changes to a new page in order to persist that information.

Does anyone have any ideas?

This is the main part in question:

myModal.html

<div id="signUp">
<form action="mailer/mailing.php" id="myForm" method="post" class="style16">
    <input type="text" name="email" size="30" value="your email here!">
    <input type="submit" value="Send link" name="submit" onclick="Modalbox.show('mailer/mailing_thankyou.php', {title: 'Form sending status', width: 500, params:Form.serialize('myForm') }); return false;">
    &nbsp;or&nbsp;<a href="#" title="Cancel &amp; close dialog" onclick="Modalbox.hide(); return false;">Cancel &amp; close</a>
    <!-- ><input type="submit" value="GO!" name="submit"> -->
    </form>
</div>

You may pull my files from my git repo: https://github.com/jwmann/Modal-Sign-up

Try an ajax post onsubmit to your mailing.php file, then on success you can call Modalbox.show. Can you use jQuery? It's very simple, e.g.: $.post('mailer/mailing.php', function(data) { Modalbox.show(...); }); — squidbe, Jun 01 '11 at 07:20

mkilmanas · Answer 1 · 2011-06-01T18:54:53.780

I'm not good at Mootools, so I will give you an example in jQuery - if you get the idea, I'm pretty sure you will find the right syntax for Mootools too.

The idea is to use AJAX call for form submission (and keep the onsubmit="return false;" so that browser window isn't reloaded):

var $form = $('#myForm');
$.post($form.attr('action'), $form.serialize(), function(response) {
    $('div#signUp').html(response);
});

What this does is:

Stores jQuery wrapped form element into $form
Uses form's action attribute value as a request target address
Serializes and transfers all form elements' values
Executes callback function, which takes returned HTML code and replaces contents of <div id='signUp'>...</div> with this HTML.

Note: make sure that the script at forms action only returns html for the contents of the sign up box (meaning no <head>, <body>, etc. - only what should be in the box afterwards)

EDIT/AMENDMENT

This is what I've just found out on MooTools Docs page for Ajax/Request:

The equivalent of my jQuery snippet in MooTools would be

new Request.HTML({                     // Creates an AJAX request
    'url': $('myForm').get('action'),  // Sets request address to the form's action
    'update': $('signUp')              // Indicates that results should be auto-loaded into element with id='signUp'
}).post($('myForm'));                  // Indicates that this form has to be serialized and transferred; also starts the request process

This requires that the form's action returns the result to display (a thank you message). One could achieve that by making redirect from the server-side after form data has been successfully processed, e.g. in PHP header('Location: mailer/mailing_thankyou.php'); exit;

After looking longer at your code I realized, that this is not entirely what you want (as I see you don't want the form replaced with the thank-you message - you want it to be shown in the modal). Hence the updated solution for your case:

new Request.HTML({                     // Creates an AJAX request
    'url': $('myForm').get('action'),  // Sets request address to the form's action
    'onSuccess': function() {          // Defines what to do when request is successful (similarly you should take care of error cases with onFailure declaration
        Modalbox.show('mailer/mailing_thankyou.php', {
            title: 'Form sending status', 
            width: 500
            // I have removed params from here, because they are handled in the .post() below
        });
    }
}).post($('myForm'));                  // Indicates that this form has to be serialized and transferred; also starts the request process

Pardon me if any of this doesn't work (as I said, I'm more of a jQuery guy - just trying to help here)

I'd rather not use 2 javascript libs, would you know how to do this with mootools? — jwmann, Jun 01 '11 at 17:54
Or how would I integrate this into what I already have? I added what you said (with jQuery included) and it just broke the modal (it didn't grab the myModal.html file) — jwmann, Jun 01 '11 at 18:22
I agree with you that mixing different frameworks isn't a good idea (although possible by taking precautions, like `jQuery.noConflict()`). Plese find the added solution in MooTools code — mkilmanas, Jun 01 '11 at 18:57
I'm not sure how to invoke this request. I tried it via function call but apparently 'Request' undefined. I've updated my git repo in order show these changes. (thanks for the update btw, truly appreciate it.) — jwmann, Jun 02 '11 at 14:29
`Request.HTML` should be a class provided to you by MooTools (at least docs say that it's in the core, so I don't see how it could be undefined - maybe you have some modified/stripped version?) — mkilmanas, Jun 02 '11 at 14:33
I see, I think 'Modal box' is using a stripped down version of mootools. When I include the mootools library, I think there are some conflicts. How should I approach this? should I attempt to use jQuery along with my ModalBox? Assuming I use this 'noconflict' function? I'm more of a jQuery guy myself. — jwmann, Jun 02 '11 at 20:23

score 0 · Answer 2 · edited May 23 '17 at 12:04

0

Have the form submit to a hidden iframe on the page. Give the iframe a name value and then set a target propery on the form. You can make the iframe 1x1 pixel and set the visibility to hidden (if you hide via display: none it might not work in all browsers.)

See this question for details: How do you post to an iframe?

edited May 23 '17 at 12:04

Community

1
1

answered Jun 01 '11 at 19:05

Mauvis Ledford

35,240
13
77
84

Why use a hack when there is a solution? – mkilmanas Jun 01 '11 at 19:07
This is shorter and has the added benefit of working cross-domain. It's what most cross-domain solutions do internally. – Mauvis Ledford Jun 02 '11 at 05:41

score 0 · Accepted Answer · answered Jun 02 '11 at 22:15

I removed the 'return false' from the input submit's 'onsubmit' (duhhh facepalm) because it was trying to serialize it in the first palce with prototype.js

Then I changed the php script so it would grab with $_GET instead of $_POST

no added functionality or hacks needed. Thank you for all the help though.

Submitting a form through a modal box without leaving the page/modal

3 Answers3