如何根据用户在 WordPress 中使用 javascript 在 HTML 表单中选中的框重定向用户？

Question

我有一个带有三个复选框的表单。用户可以选择这些组合，然后我希望他们在点击表单上的提交按钮后根据他们的选择被重定向到特定页面。

这是在 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>

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

Answer 2

除了按照其他答案的详细说明正确提交您的表单外，在此处使用else 语句并反转您的条件以从最具体的开始也是一个好主意。原因如下。

按照您的设置，所有条件为真的if 语句将一个接一个地执行。因此，假设您的所有三个选项都被选中。从逻辑上讲，所有四个条件都满足了，因此您将依次导航到所有四个页面，只因它位于底部而幸运地到达您想要的页面。

您宁愿只导航到由于选中了哪些框而实际选择的页面，如果它们都没有，则留在原处。这就是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 中的工作方式。您可能听说过的“异步执行模型”只是意味着所有函数从头到尾执行，而无需停下来等待它们调用的任何函数完成运行，然后再继续执行。这意味着当您的代码正在查找某个函数时，您不能总是直接依赖该函数的返回值，这也意味着某些事情（例如导航到另一个页面）似乎会在实际终止函数时不要。

如果你习惯于编写函数 a 调用函数 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 and jQuery: the Missing Manual。