外部提交时的Javascript函数？

我想为新的标签页创建一个Chrome扩展。我已经写了这个页面，但是我在将Javascript从内联移动到外部时遇到了问题

当前index.html如下所示：

<script>
function process()
{
var url="https://www.google.co.uk/search?q=" + document.getElementById("goog").value;
location.href=url;
return false;
}
</script>

<div class="container">
    <form onSubmit="return process();">
        <input type="text" class="form-control" id="goog" placeholder="Google Search">
        <input type="submit" style="display:none"/>
    </form>

修订后的html：

<form id="search">
    <input type="text" class="form-control" id="goog" placeholder="Google Search">
    <input type="submit" style="display:none"/>
</form>

---

但是没有用。有人能帮忙吗？

您正在将“提交”事件附加到文本输入元素。 您应该将其附加到表单，因为提交的是表单，而不仅仅是特定的输入。（您已经在当前index.html文档中正确执行了此操作）

可以通过向表单元素添加id来执行此操作：

 <form id="your-form-id">

另外，请注意，除非您在将JS代码移动到外部文件时更改了html，否则在“提交”事件回调中，您试图从id=“url”的元素中获取搜索字符串，而您的文本输入元素具有id=“goog”，因此您将无法检索该字符串

编辑：

问题似乎是表单提交被执行，在代码运行之前，您被重定向到同一个页面，并使用新的空白输入。 您可以避免在接收事件时调用preventDefault（），这样表单就不会提交，代码也会运行，而不会在最后返回false

form.addEventListener("submit", function(event) {
   event.preventDefault();
   ... your code ...

---

我注意到，不使用任何Javascript就可以实现。我可以使用GET方法制作表单，并将表单内容传递到GET请求中，如下所示：

<form method="GET" action="https://google.co.uk/search">
    <input type="text" name="q" class="form-control" placeholder="Google Search">
    <input type="Submit" style="display:none">
</form>

---

上述解决方案是正确的，但使用它可以避免任何Javascript。

输入类型text id=goog上没有提交事件。改为在窗体上添加事件。将侦听器放在窗体上，而不是输入元素上。隐藏的提交按钮是多余的。我已经做了这些更改，但仍然看不到任何事情发生。引用Javascript如下：

我也修改了search.js的内容，我在原始帖子中编辑了它。有什么想法吗？你只是在浏览器上测试这个opening index.html吗？您是否正确地将带有路径的标记添加到您的.js文件中？我只是在浏览器中进行测试。在标签内的index.html中引用。这是一个好主意，我没有考虑到它可以在页面加载时运行。现在已经很晚了，所以我会在早上试试这个。感谢您的帮助，并将保持您的postedIt不会在页面加载时运行。问题是，默认情况下，如果未指定“action”属性，表单将向其相同的url发送HTTP请求，因此在提交时，在执行提交回调中的代码之前，您将被重定向到当前的同一页面。

form.addEventListener("submit", function(event) {
   event.preventDefault();
   ... your code ...

<form method="GET" action="https://google.co.uk/search">
    <input type="text" name="q" class="form-control" placeholder="Google Search">
    <input type="Submit" style="display:none">
</form>