Submitting a form through a modal box without leaving the page/modal_问答_开发者

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/

开发者_JAVA技巧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

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)

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?

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.