показать div в форме отправки без перенаправления

Question

Я использую виджет боковой панели WordPress для захвата адресов электронной почты. Дело в том, что он перенаправляет после отправки формы. Я хочу, чтобы посетитель оставался на странице, на которой он находился после отправки формы, просто скрытым дивом, сообщающим об успешной регистрации.

Я пробовал что-то с таким javascript -

<script type="text/javascript">
function showHide() {    
var div = document.getElementById("hidden_div");
if (div.style.display == 'none') {
div.style.display = '';
}
else {      
div.style.display = 'none';
}
} 
</script>

И это прекрасно работает для показа скрытого div при отправке, но тогда фактическая форма не работает: (

Форма (с тем, что я пытался сделать) такая:

<div id="wp_email_capture"><form name="wp_email_capture" method="post" onsubmit="showHide(); return false;" action="<?php echo $url; ?>">
<label class="wp-email-capture-name">Name:</label> <input name="wp-email-capture-name" type="text" class="wp-email-capture-name"><br/>
<label class="wp-email-capture-email">Email:</label> <input name="wp-email-capture-email" type="text" class="wp-email-capture-email"><br/>
<input type="hidden" name="wp_capture_action" value="1">
<input name="submit" type="submit" value="Submit" class="wp-email-capture-submit">
</form>

<div id="hidden_div" style="display:none"><p>Form successfully submitted.</p> 
</div>

Проблема заключается в том, что где-то между «return false» и действием формы (я думаю, кодер плагина сделал это перенаправлением). Если я удаляю «return false», он перенаправляет. С 'return false' форма не работает. Я не могу найти способ заставить форму работать, но не перенаправить, т.е. просто покажи скрытый div, работай, и все тут! Без перенаправления :) Буду признателен за вашу помощь.

Answer 1

Я покажу, как отправить форму с помощью jQuery, так как это то, что у вас есть:

Прежде всего, вы должны сделать одно небольшое изменение в форме HTML.А именно, измените showHide() на showHide(this), что даст showHide() доступ к элементу формы.HTML должен быть:

<div id="wp_email_capture"><form name="wp_email_capture" method="post" onsubmit="showHide(this); return false;" action="<?php echo $url; ?>">
<label class="wp-email-capture-name">Name:</label> <input name="wp-email-capture-name" type="text" class="wp-email-capture-name"><br/>
<label class="wp-email-capture-email">Email:</label> <input name="wp-email-capture-email" type="text" class="wp-email-capture-email"><br/>
<input type="hidden" name="wp_capture_action" value="1">
<input name="submit" type="submit" value="Submit" class="wp-email-capture-submit">
</form>

<div id="hidden_div" style="display:none"><p>Form successfully submitted.</p> 
</div> 

JavaScript для отправки формы и отображения div при успешной отправке:

function showHide(form) { 
    var serial = $(form).serialize();
    $.post(form.action, serial, function(){
        $('#hidden_div').show();
    });
}; 

Что это делает:

1. Сериализует данные формы, т.е. преобразует их в одну длинную строку, такую ​​как wp-email-capture-name=&wp-email-capture-email=&wp_capture_action=1, которая хранится в serial.
2. Передает сериализованные данные в URL действия формы (form.action)
3. Если отправка формы прошла успешно, она запускает обработчик success, который является третьим параметром $.post().Этот обработчик заботится о отображении скрытого div.Я изменил код, чтобы использовать функцию jQuery .show(), которая заботится о несоответствиях браузера.

Надеюсь, это полезно.