个人中心
gpt4 book ai didi

javascript - 表单 javascript 提交事件

转载 作者：行者123 更新时间：2023-12-03 06:07:27 25 4
gpt4 key购买 nike

我想仅使用 javascript 管理表单，但事件监听器对我不起作用。怎么了？

我的表格:

<script src="init.js"></script>
<div id="search_box">
    <form id="search_form">
        <input type="search" name="search" autofocus placeholder="Google search" id="searchbox">
        <input type="button" value=&#9679; id="searchsign">
    </form>
</div>
<script src="search.js"></script>

在 init.js 文件中:

"use strict";

function $(selector){
    return document.querySelector(selector);
}

function $$(selector){
    return document.querySelectorAll(selector);
}

在 search.js 文件中:

$('#searchsign').addEventListener('click', search);
$('#search_form').addEventListener('submit', search);

function search(){
    console.info('search function OK');
    var searchvalue = $("#searchbox").value;
    var google = "https://www.google.hu/search?site=&source=hp&q=";
    window.location = google + searchvalue;
}

最佳答案

表单的 submit 事件将转到表单的操作(无操作 = 当前 URL)并重新加载页面。

如果您使用 JavaScript 处理它，请接受事件参数并对其调用 preventDefault 以阻止默认行为:

function search(e) {
    e.preventDefault();
    // ...
}

我还建议不要将您的函数设置为全局函数，或者为 search 指定一个不同的名称，以避免全局命名空间中的冲突。

<小时/>

旁注:您需要对查询字符串参数进行 URI 编码，因此请更改您的 location 分配以使用 encodeURIComponent:

window.location = google + encodeURIComponent(searchvalue);
<小时/>

Working copy on JSBin (因为 Stack Snippets 在不允许我们转移到 Google 的框架中工作)

工作示例来源:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="search_box">
  <form id="search_form">
    <input type="search" name="search" autofocus placeholder="Google search" id="searchbox">
    <input type="button" value=&#9679; id="searchsign">
  </form>
</div>
<script>
"use strict";
(function() { // Scoping function to avoid globals
  function $(selector) {
    return document.querySelector(selector);
  }

  function $$(selector) {
    return document.querySelectorAll(selector);
  }

  $('#searchsign').addEventListener('click', search);
  $('#search_form').addEventListener('submit', search);

  function search(e) {
    e.preventDefault();
    console.info('search function OK');
    var searchvalue = $("#searchbox").value;
    var google = "https://www.google.hu/search?site=&source=hp&q=";
    window.location = google + encodeURIComponent(searchvalue);
  }
})();
</script>
</body>
</html>

关于javascript - 表单 javascript 提交事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39475970/

25 4 0
文章推荐： javascript - ng-click 即使在调用 $compile 之后也不会触发
文章推荐： javascript - 如何修改粘贴事件的结果？
文章推荐： javascript - 使用 Parsley 和模态窗口进行验证
文章推荐： javascript - 为什么我的 JavaScript float 被分割？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com