Как перенаправить пользователей на основе флажков, которые они установили в HTML-форме, с помощью javascript в WordPress?

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

Это делается в 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>

javascript html wordpress forms

31.08.2018 21:57

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

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

$(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";
    }
  });
});

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

— 04.09.2018 18:05

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

— 05.09.2018 09:02

В настоящее время я просто вызываю библиотеку jQuery как часть своего встроенного тега script, например: <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquer‌y.min.js">, это правильно или есть другой способ сделать это?

— 05.09.2018 21:29

31.08.2018 22:03