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

【问题标题】：How to get value of form submission popup.html chrome extension如何获取表单提交 popup.html chrome 扩展的值
【发布时间】：2015-12-27 22:51:05
【问题描述】：

我一直试图在表单中获取用户输入的值，以传递给 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>

我知道我不能在 chrome 扩展中使用内联 javascript，所以我使用 addEventListener 来监听表单提交。它当前正在调用函数 handleClick() 但我需要传入输入的值，而且我不确定将什么作为参数。这是我的 popup.js 文件：

$(function() {
console.log("console logging works");


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


function handleClick(val) {
    console.log("calling handleClick"); //printing
    console.log(val); //prints undefined

    chrome.runtime.sendMessage({
        from: "popup",
        subject: val
    });
}

});

我也试过这个也没用：

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
    });
}

【问题讨论】：

标签： javascript forms google-chrome-extension

【解决方案1】：

当你这样做时：
.addEventListener("submit", handleClick(), false)
通过在handleClick 后面加上括号，您正在调用该函数并将其结果传递给addEventListener（在本例中为undefined，因为您的函数没有return 语句）。

您要做的是直接将函数传递给addEventListener，然后它会为您使用event 对象（这称为callback）调用它：
.addEventListener("submit", handleClick, false)

【讨论】：

我试过了，但奇怪的是它似乎不再调用该函数了，我在 handleClick() 中添加了一个 console.log 语句，当我按照你说的方式进行操作时没有打印任何内容
这意味着submit 事件由于某种原因没有被触发。仔细检查您要附加侦听器的元素是否确实存在 document.getElementById("form")，并且它具有 <input type="submit">