Я не очень хорош в Mootools, поэтому приведу пример в jQuery - если вы поймете, я уверен, что вы найдете правильный синтаксис и для Mootools.
Идея состоит в том, чтобы использовать AJAX-вызов для отправки формы (и оставить onsubmit="return false;", чтобы окно браузера не перезагружалось):
var $form = $('#myForm');
$.post($form.attr('action'), $form.serialize(), function(response) {
$('div#signUp').html(response);
});
Что это делает:
- Сохраняет упакованный элемент формы jQuery в
$form
- Использует значение атрибута
action формы в качестве целевого адреса запроса
- Сериализует и передает значения всех элементов формы
- Выполняет функцию обратного вызова, которая принимает возвращенный HTML-код и заменяет содержимое
<div id='signUp'>...</div> этим HTML.
Примечание: убедитесь, что скрипт в формах action возвращает только html для содержимого поля регистрации (имеется в виду <head>, <body> и т. Д. - только то, что должно быть в поле впоследствии)
EDIT / ПОПРАВКИ
Это то, что я только что узнал на странице Документов MooTools для Ajax / Request :
Эквивалент моего фрагмента jQuery в MooTools будет
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
Для этого требуется, чтобы действие формы возвращало результат для отображения (сообщение с благодарностью). Это может быть достигнуто путем перенаправления со стороны сервера после успешной обработки данных формы, например, в PHP header('Location: mailer/mailing_thankyou.php'); exit;
После более продолжительного изучения вашего кода я понял, что это не совсем то, что вы хотите (поскольку я вижу, что вы не хотите, чтобы форма заменялась сообщением с благодарностью - вы хотите, чтобы она отображалась в модальном режиме). Отсюда и обновленное решение для вашего случая:
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
Простите, если что-то из этого не сработало (как я уже сказал, я скорее парень из jQuery - просто пытаюсь здесь помочь)