Я использую виджет боковой панели WordPress для захвата адресов электронной почты. Дело в том, что оно перенаправляется после подачи формы. Я хочу, чтобы посетитель остался на странице, на которой они были после отправки формы, только с скрытым div, дающим успешное сообщение регистрации.
Я пробовал что-то с 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 на submit, но фактическая форма тогда не работает 🙁
Форма (с тем, что я пыталась сделать) выглядит так:
<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, работа, и все! Нет перенаправления 🙂 Поблагодарили бы за вашу помощь.
Я покажу, как отправить форму с помощью 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(); }); };
Что это делает:
wp-email-capture-name=&wp-email-capture-email=&wp_capture_action=1 которая хранится в serial . form.action ) success , который является третьим параметром для $.post() . Этот обработчик позаботится о отображении скрытого div. Я изменил код, чтобы использовать .show() javascript .show() , которая заботится о несоответствиях браузера. Надеюсь, это полезно.