Как перенаправить пользователей на основе флажков, которые они отметили в форме HTML, используя JavaScript в WordPress? - PullRequest
0 голосов
/ 31 августа 2018

У меня есть форма с тремя флажками. Пользователи могут выбрать их комбинацию, а затем я бы хотел, чтобы они перенаправлялись на определенные страницы в зависимости от их выбора, когда они нажимают кнопку отправки в форме.

Это делается в WordPress с помощью простого HTML-редактора страниц.

Я провел тонну исследований на этом сайте с другими подобными вопросами, но ни один из этих ответов не работает для меня. Пожалуйста, ознакомьтесь с HTML, который я создал сам, и с окончательной версией javascript, на которой я остановился на результатах своего исследования на этом сайте.

Что я делаю не так? Я новичок в Javascript.

HTML:

<form id="selections" method="post">
<table class="ss" border="0" cellpadding="0" cellspacing="0">
<tr style="background-color:#ffffff;">
    <td class="ss2" width="150"></td>
    <td class="ss2" width="100"><center><strong><p style="font-family: arial, sans-serif; color:#009639;" >PDF</p></strong></center></td>
    <td class="ss2" width="100"><center><p style="font-family: arial, sans-serif; color:#009639;" ><strong>POSTCARD</strong></p></center></td>
    <td class="ss2" width="100"><center><p style="font-family: arial, sans-serif; color:#009639;" ><strong>HTML</strong></p></center></td>
    <td class="ss2" width="100"></td>
    <td class="ss2" width="150"></td>
</tr>
<tr style="background-color:#DDDDDD; height: 1px;">
    <td class="ss"><strong><p style="font-family: arial, sans-serif">Social Security</p></strong></td>
<td class="ss2"><center><input type="checkbox" id="ssPDF" value="1"></center></td>
<td class="ss2"><center><input type="checkbox" id="ssPOSTCARD" value="2"></center></td>
<td class="ss2"><center><input type="checkbox" id="ssHTML" value="3"></center></td>
<td class="ss2"><input class="ss" type="submit" value="SUBMIT" id=SUBMIT></td>
    <td class="ss2"><a class="ss" href="http://google.com"><p style="font-family: arial, sans-serif;">PAST ENTRIES</p></a></td>
</tr> 
</form> 
</table>

Javascript код:

<script type="text/javascript">
var ssPDF = $('input[name="ssPDF"]');
var ssPOSTCARD = $('input[name="ssPOSTCARD"]');
var ssHTML = $('input[name="ssHTML"]');
if ( ssPDF.is(':checked') ){
    window.location.href="http://www.stackoverflow.com";
}
if ( ssPDF.is(':checked') && ssPOSTCARD.is(':checked') ){
    window.location.href="http://www.bing.com";
}
if ( ssPDF.is(':checked') && ssHTML.is(':checked') ){
    window.location.href="http://www.google.com";
}
if (ssPDF.is(':checked') && ssHTML.is(':checked') && ssPOSTCARD.is(':checked') ){
    window.location.href="http://www.yahoo.com";
}
</script>

Ответы [ 2 ]

0 голосов
/ 31 августа 2018

В дополнение к правильной отправке вашей формы, как подробно описано в других ответах, было бы также неплохо использовать здесь else заявления и инвертировать ваши условия, чтобы начать с самых конкретных. Вот почему.

Когда вы его настроите, все ваши операторы if с условиями, которые оцениваются как true, будут выполняться один за другим. Итак, предположим, что все три ваших варианта проверены. Логично, что все четыре условия выполнены, так что вы будете переходить ко всем четырем страницам по очереди, приземляясь на ту, которую вы хотите, только благодаря счастливой случайности его нахождения внизу.

Вы бы предпочли просто перейти на страницу, которая фактически выбрана в результате того, какие флажки установлены, и оставаться там, где вы есть, если ни один из них не установлен. Это то, что else выполнит, не проверяя другие условия, если они выполнены. Итак:

if (ssPDF.is(':checked') && ssHTML.is(':checked') && ssPOSTCARD.is(':checked') ){
    window.location.href="http://www.yahoo.com";
}
else if ( ssPDF.is(':checked') && ssPOSTCARD.is(':checked') ){
    window.location.href="http://www.bing.com";
}
else if ( ssPDF.is(':checked') && ssHTML.is(':checked') ){
    window.location.href="http://www.google.com";
}
else if ( ssPDF.is(':checked') ){
    window.location.href="http://www.stackoverflow.com";
}

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

Вот простой пример такого рода неприятностей. Этот код будет перемещаться к stackoverflow.com, как и предполагалось:

var a = true;
var b = true;
if (a && b) window.location.href = 'https://www.stackoverflow.com';
else if (a) window.location.href = 'https://www.ibm.com';

Но этот код переместится на stackoverflow.com, а затем сразу на ibm.com, как предполагалось , а не :

var a = true;
if (a && b) window.location.href = 'https://www.stackoverflow.com';
if (a) window.location.href = 'https://www.ibm.com';

Это может показаться немного нелогичным. Легко представить, что если вы перейдете на другую страницу, вы перестанете выполнять код на той странице, на которой находитесь. Но в JS все не так. «Модель асинхронного выполнения», о которой вы, вероятно, слышали, просто означает, что все функции выполняются от начала до конца, не останавливаясь, чтобы дождаться завершения работы всех вызванных функций и продолжения. Это означает, что вы не всегда можете напрямую зависеть от возвращаемого значения функции, находящейся там, когда ваш код ищет ее, и это также означает, что некоторые вещи (например, переход на другую страницу), кажется, завершают функцию, когда они на самом деле нет.

Если вы привыкли писать код, где функция вызывает функцию b, получает возвращаемое значение и затем решает, что делать на основе результата, вы найдете это странным. Потому что в JS функция a вызывает функцию b, а затем с радостью продолжает выполняться, не дожидаясь результата. Если это происходит вовремя, хорошо; если это не так, это тоже хорошо. Если вы хотите дождаться результата, вы должны использовать программную конструкцию, настроенную для этого, такую ​​как обратные вызовы или обещания (или значения setTimeout, которых следует по возможности избегать).

Итак, в вашем случае, да, вы переходите на какую-то страницу. А затем ваша функция продолжает работать, переходит к следующему назначению href, которое соответствует вашим условиям, и переходит к этому. И так далее.

РЕДАКТИРОВАТЬ: некоторые сведения о том, как обрабатывать нажатия кнопок

Нажатие кнопки - это «событие». Я дам вам общее представление о событиях.

Вы должны не только писать свой код, но и сообщать окружению, когда он вызывается. Итак, вам нужно заключить свой код в функцию, а затем сделать что-то, что говорит: «когда происходит то-то и то-то, вызывайте эту функцию». Это называется «обработкой события». Вы указываете, какое событие обрабатывать для какого элемента и что делать, когда событие происходит.

Это немного сбивает с толку, потому что HTML упреждает некоторые из них с помощью кнопки "отправить". Кнопка отправки действительно предназначена для отправки значений всех входных данных в форме на сервер, и это то, что она делает. Вы не делаете ничего подобного. То, что вы делаете, говорит: «когда пользователь нажимает эту кнопку отправки, я хочу выполнить код в своем теге сценария». Так что я бы не стал использовать type=submit вообще.

Вместо этого я бы использовал кнопку и «обработчик щелчков». Есть несколько способов сделать это. Один заключается в том, чтобы заключить ваш код в функцию:

<script type="text/javascript">
function myFunction() {
    var ssPDF = $('input[name="ssPDF"]');
    // etc. etc.
}
</script>

А затем измените кнопку отправки следующим образом:

<input type="button" value="Submit" onclick="myFunction();">

Это очень простой способ сделать это, но мне это не совсем нравится. Требуется, чтобы я вставил код в тег HTML, что означает, что он плохо масштабируется (то есть, чем больше становится мой сайт, тем громоздче становится решение). Я хочу, чтобы код, который обрабатывает кнопки, был в одном месте, особенно если у меня много страниц и много кнопок.

Итак, я бы предпочел использовать HTML только для структурных элементов, а затем использовать JavaScript и / или jQuery для обработки поведения. Один из способов сделать это - использовать элемент button, а затем установить событие click в качестве функции в моем скрипте.

Для этого измените input на button, например:

<button id="mySubmitButton">Submit</button>

А затем измените ваш код следующим образом:

<script type="text/javascript">
$(document).ready(function() {
    $('#mySubmitButton').on('click', function(event) {
        var ssPDF = $('input[name="ssPDF"]');
        // etc. etc.
    });
});
</script>

Для получения дополнительной информации о том, почему вы должны заключить свой код в обработчик событий ready, см. this . Для книги, которая охватывает все, что вам нужно знать, чтобы начать работать с JavaScript и jQuery, рассмотрите возможность инвестирования в JavaScript и jQuery: отсутствующее руководство .

0 голосов
/ 31 августа 2018

Ваш код запускается сразу после загрузки страницы, только один раз. Вам нужно привязать свой код к действию, как при отправке формы. Таким образом, он будет работать после того, как пользователь сделал выбор и отправил форму.

$(document).ready(function () { // jQuery wrapper to only run after load 
  $('form').submit(function(e) { // Pass the event object
    e.preventDefault(); // Prevent the form's default action of submitting

    var ssPDF = $('input[name="ssPDF"]');
    var ssPOSTCARD = $('input[name="ssPOSTCARD"]');
    var ssHTML = $('input[name="ssHTML"]');
    if ( ssPDF.is(':checked') ){
        window.location.href="http://www.stackoverflow.com";
    }
    if ( ssPDF.is(':checked') && ssPOSTCARD.is(':checked') ){
        window.location.href="http://www.bing.com";
    }
    if ( ssPDF.is(':checked') && ssHTML.is(':checked') ){
        window.location.href="http://www.google.com";
    }
    if (ssPDF.is(':checked') && ssHTML.is(':checked') && ssPOSTCARD.is(':checked') ){
        window.location.href="http://www.yahoo.com";
    }
  });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...