Fatal编程技术网
  • javascript/
  • Javascript 如何获取表单提交popup.html chrome扩展的值

Javascript 如何获取表单提交popup.html chrome扩展的值

javascript forms google-chrome-extension

Javascript 如何获取表单提交popup.html chrome扩展的值,javascript,forms,google-chrome-extension,Javascript,Forms,Google Chrome Extension,我一直在尝试获取表单中用户输入的值，以传递给chrome扩展中的javascript函数。问题是我不知道如何获得用户输入。 这是我的manifest.json文件的一部分： ,"browser_action": { "default_icon": "./assets/icon16.png", "default_popup": "popup.html" }, popup.html，即我要提交的表单： ... <script src = "popup.js"><

我一直在尝试获取表单中用户输入的值，以传递给chrome扩展中的javascript函数。问题是我不知道如何获得用户输入。
这是我的manifest.json文件的一部分：

,"browser_action": {
    "default_icon": "./assets/icon16.png",
    "default_popup": "popup.html"

},
popup.html，即我要提交的表单：

...
<script src = "popup.js"></script>

</head>
    <body>
    <p>Enter here</p>

<div class="ui-widget">
    <form id = "form" >
        <input id = "shows"> </input>
        <input type = "submit" id = "submitButton">
    </form>

</div>
<br>
<br>
</body>
}))

我也试过这个，但也不起作用：

document.getElementById("form").addEventListener("submit", handleClick(), false);


function handleClick() {

    var show = form.elements[0].value;
    console.log(show); //prints blank
    chrome.runtime.sendMessage({
        from: "popup",
        subject: show
    });
}
当您这样做时：
.addEventListener（“提交”，handleClick（），false）

通过在
handleClick
后面加括号，调用函数并将其结果传递给
addEventListener
（在本例中，它是
未定义的
，因为函数没有
return
语句）

您要做的是直接将函数传递给
addEventListener
，然后它将负责为您使用
事件
对象调用函数（这称为
回调
）：
.addEventListener（“submit”，handleClick，false）

我尝试了这个方法，但奇怪的是它似乎不再调用函数了，我在handleClick（）中添加了一个console.log语句，当我按照您所说的方式执行时，不会打印任何内容，这意味着
submit
事件不会出于某种原因被触发。仔细检查您将侦听器附加到的元素是否确实存在
document.getElementById（“表单”）
，以及它是否具有
document.getElementById("form").addEventListener("submit", handleClick(), false);


function handleClick() {

    var show = form.elements[0].value;
    console.log(show); //prints blank
    chrome.runtime.sendMessage({
        from: "popup",
        subject: show
    });
}