Question

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

这是使用简单的页面HTML编辑器在WordPress中完成的。

我在这个网站上做了很多其他类似问题的研究，但是这些答案对我来说都不起作用。请查看我自己创建的HTML，以及我在该网站上的研究中确定的javascript最终版本。

我在做什么错？我是Java语言的新手。

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语句并将条件从最具体的位置开始反转也是一个好主意。这就是为什么。

设置完成后，条件为true的所有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。

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

2 个答案: