如何使用WordPress中的javascript基于他们在HTML表单中检查的框重定向用户？

问题描述 投票：0回答：2

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

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

我在这个网站上做了大量的研究和其他类似的问题，但这些答案都没有对我有用。请参阅我自己创建的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
2个回答
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中，函数调用函数b然后愉快地继续执行而不等待结果。如果它得到一个时间，很好;如果没有，那也没关系。如果要等待结果，则必须使用为此设置的编程构造，例如回调或promise（或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。

2
投票

您的代码在页面加载时立即运行，只需运行一次。您需要将代码绑定到一个操作，就像提交表单时一样。这样，它将在用户进行选择并提交表单后运行。

$(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";
    }
  });
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.