Question

我有一个表单，它接受邮政编码输入，并根据输入将用户转发到两个URL之一。当你点击提交按钮时，一切都很好，然而，按回车重新加载页面，我已经通过大约30个类似的论坛无济于事。我尝试过多种方法，包括从提交按钮更改提交按钮类型。我已经尝试了几个片段来强制输入键做我想要的但是没有一个有效。它只是不断重新加载页面。以下是我目前在网站上的代码：

<div align="center">
  <script type="text/javascript">
    //<![CDATA[
    function zipValidate() {

        val = document.zipForm.zip.value;

        switch (val) {
          case '94005':
            document.location = 'http://www.crossborderscheduling.com/home/calendar/';
            break;

          default:
            document.location = 'http://crossborder.fedex.com/us/';
            break;

        }
      }
      //]]>
  </script>
  <form name="zipForm" id="zipForm" method="post">
    <input name="zip" type="text" id="zip" maxlength="5" size="10%" placeholder="Zip Code" />
    <input name="zipButton" type="button" id="zipButton" value="Submit" onclick="zipValidate()" />
  </form>
</div>

Answer 1

MAP_FAILED默认[action]为<form>，这意味着在提交表单时，数据会发布到当前页面。

您的""元素使用<input name="zipButton"...>代替type="button"，并且您已将type="submit"事件处理程序绑定到它。

点击onclick元素并未实际提交表单，这就是#zipButton回调有效的原因。

在关注zipValidate字段时按 Enter 将触发表单的implicit submission行为，从而触发#zip上的submit事件} element，并完全忽略form点击回调。

那么你如何解决它？

让我们从修复HTML开始：

#zipButton

[size]属性的值应为非负整数
因为您未使用<form name="zipForm" id="zipForm" method="post"> <input name="zip" type="text" id="zip" maxlength="5" size="10" placeholder="Zip Code" aria-label="Zip Code" /> 1: ^^^^^^^^^ 2: ^^^^^^^^^^^^^^^^^^^^^ <input name="zipButton" type="submit" id="zipButton" value="Submit" /> 3: ^^^^^^^^^^^^^ 4: ^ </form>元素it's important to provide a label for accessibility。 <label>属性不是一个充分的替代品。
该按钮应使用submit type
保持您的JavaScript不受HTML

现在已经清理了HTML，让我们看一下JavaScript：

[placeholder]

不要使用<script> // 1 ^^^, // 2 function zipValidate() { // 3 var val, action; // 4 val = document.getElementById('zip').value; switch (val) { case '94005': // 5 action = 'http://www.crossborderscheduling.com/home/calendar/'; break; default: action = 'http://crossborder.fedex.com/us/'; break; } // 6 this.setAttribute('action', action); } // 7 document.getElementById('zipForm').addEventListener('submit', zipValidate, false); </script>，很长一段时间没有必要
不使用CDATA，很长一段时间也没有必要
声明您的变量
不要使用ID隐式全局引用，而是使用DOM搜索方法之一查询DOM：[type="text/javascript"]，getElementById，getElementsByTagName，getElementsByClassName ，或querySelector
存储您要提交表单的网址。一个querySelectorAll语句或三元运算符已经足够了，但我离开了开关，因为这对于这种情况几乎不重要。
设置表单的if属性，以告知表单要提交的位置。您不需要在活动中致电[action]，因为提交行为会处理您之后的重定向。
将事件处理程序绑定到JavaScript中的表单。您可能需要重新排列脚本在DOM中的执行位置，或等待preventDefault，以便在尝试将事件绑定到document.onreadystatechange时存在#zipForm元素。

Answer 2

要阻止表单提交，您需要在return false代码中onclick。为此，您可以将其更改为：

onclick="zipValidate() && return false;"

或者，您可以修改函数以返回false，然后将onclick更改为：

onclick="return zipValidate();"

按Enter重新加载页面而不是提交表单

2 个答案: