Javascript 按Enter键重新加载页面，而不是提交表单_Javascript_Jquery_Html

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

javascript jquery html

Javascript 按Enter键重新加载页面，而不是提交表单,javascript,jquery,html,Javascript,Jquery,Html,我有一个表单，它接受邮政编码输入，并根据输入将用户转发到两个URL之一。当你点击submit按钮时，一切都很好，但是，按enter重新加载页面，我已经浏览了大约30个类似的论坛，但都没有用。我尝试了多种方法，包括将submit按钮类型从button更改为submit。我尝试了几个片段来强制enter键执行我想要的操作，但都没有成功。它只是不断地重新加载页面。以下是我目前在网站上的代码： <div align="center"> <script type="text/java

我有一个表单，它接受邮政编码输入，并根据输入将用户转发到两个URL之一。当你点击submit按钮时，一切都很好，但是，按enter重新加载页面，我已经浏览了大约30个类似的论坛，但都没有用。我尝试了多种方法，包括将submit按钮类型从button更改为submit。我尝试了几个片段来强制enter键执行我想要的操作，但都没有成功。它只是不断地重新加载页面。以下是我目前在网站上的代码：

<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>

//

要防止表单提交，您需要在

onclick中返回false
。为此，您可以将其更改为：
onclick="zipValidate() && return false;"

或者，您可以修改函数以返回false，然后将onclick
更改为：
onclick="return zipValidate();"

要防止表单提交，您需要在onclick中返回false
。为此，您可以将其更改为：
onclick="zipValidate() && return false;"

或者，您可以修改函数以返回false，然后将onclick
更改为：
onclick="return zipValidate();"

默认值为”
，这意味着提交表单时，数据将发布到当前页面
您的
元素使用type=“button”
而不是type=“submit”
，并且您已经将onclick
事件处理程序绑定到它
单击#zipButton
元素实际上不会提交表单，这就是zipValidate
回调有效的原因
在关注#zip
字段的同时按Enter键将触发表单的行为，这将触发表单
元素上的提交
事件，并完全忽略拉链按钮
单击回调

那么你如何修复它呢
让我们从修复HTML开始：
<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>

不要使用[type=“text/javascript”]
，它已经很久没有必要了
不要使用CDATA，它已经很久没有必要了
声明变量
不要按ID使用隐式全局引用，而是使用以下DOM搜索方法之一查询DOM：getElementById
，getElementsByTagName
，getElementsByClassName
，querySelector
或querySelectorAll
存储要将表单提交到的URL。一个if
语句或三元运算符就足够了，但我离开了开关，因为它对这种情况几乎不重要
设置表单的[action]
属性，告知表单将提交到的位置。您不需要在事件上调用preventDefault
，因为提交行为将处理您所关注的重定向
从JavaScript将事件处理程序绑定到表单。您可能需要重新安排脚本在DOM中的执行位置，或者等待document.onreadystatechange
，以便在尝试将事件绑定到#zipForm
元素时存在该元素
默认值为”
，这意味着提交表单时，数据将发布到当前页面
您的
元素使用type=“button”
而不是type=“submit”
，并且您已经将onclick
事件处理程序绑定到它
单击#zipButton
元素实际上不会提交表单，这就是zipValidate
回调有效的原因
在关注#zip
字段的同时按Enter键将触发表单的行为，这将触发表单
元素上的提交
事件，并完全忽略拉链按钮
单击回调

那么你如何修复它呢
让我们从修复HTML开始：
<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>

不要使用[type=“text/javascript”]
，它已经很久没有必要了
不要使用CDATA，它已经很久没有必要了
声明变量
不要按ID使用隐式全局引用，而是使用以下DOM搜索方法之一查询DOM：getElementById
，getElementsByTagName
，getElementsByClassName
，querySelector
或querySelectorAll
存储要将表单提交到的URL。一个if
语句或三元运算符就足够了，但我离开了开关，因为它对这种情况几乎不重要
设置表单的[action]
属性，告知表单将提交到的位置。您不需要在事件上调用preventDefault
，因为提交行为将处理您所关注的重定向
从JavaScript将事件处理程序绑定到表单。您可能需要重新安排脚本在DOM中的执行位置，或者等待document.onreadystatechange
，以便在尝试将事件绑定到#zipForm
元素时存在该元素