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

我一直在试图获取用户输入的值在表单中传递给Chrome扩展中的JavaScript函数。问题是我不知道如何获得用户输入。
这是我的manifest.json文件的一部分：如何获取表单提交的值popup.html Chrome扩展

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

我知道我不能做内嵌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 
    }); 
}

来源

2015-12-27 stickler

当你这样做：
.addEventListener("submit", handleClick(), false)
通过把括号后，您呼叫的功能，并将其结果传递给addEventListener（这在由于您的函数没有return语句，因此此案例为undefined）。

你想要做的是直接通过功能addEventListener，那么这将需要与event对象为你调用它的护理（这被称为callback）：
.addEventListener("submit", handleClick, false)

来源

2015-12-27 22:58:26 lleaff

我试过，但什么奇怪的是，它似乎不再调用该函数，我在handleClick（）中添加了一个console.log语句，并且按照您所说的方式执行时没有任何内容被打印 – stickler

这意味着'submit'事件不会被触发一些原因。仔细检查你连接监听器的元素是否真正存在'document.getElementById（“form”）'，并且它有一个'' – lleaff

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

回答

相关问题