如何获得表单提交的价值popup.html chrome扩展 [英] How to get value of form submission popup.html chrome extension
问题描述
我一直试图以表格的形式获取用户输入的值，以传递给chrome扩展程序中的javascript函数.问题是我不知道如何获得用户输入.
这是我的manifest.json文件的一部分:
I've been trying to get the value of user input in a form to pass to a javascript function in a chrome extension. The issue is I don't know how to get the user input.
This is part of my manifest.json file:
,"browser_action": {
"default_icon": "./assets/icon16.png",
"default_popup": "popup.html"
},
popup.html，即我要提交的表单:
popup.html i.e the form I want to submit:
...
<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文件:
I know I can't do inline javascript in chrome extension so I am using addEventListener to listen for a form submission. It is currently calling the function handleClick() but I need to pass in the value of the input, and I'm not sure what to put as the parameter. here is my popup.js file:
$(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
});
}
});
我也尝试了这种方法，但还是不起作用:
I also tried this which didn't work either:
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("submit", handleClick(), false)
通过在handleClick后面加上括号，可以调用该函数并将其结果传递给addEventListener(在本例中为undefined，因为您的函数没有return语句).
When you do:
.addEventListener("submit", handleClick(), false)
by putting parentheses after handleClick you are calling the function and passing its result to addEventListener (which in this case is undefined since your function has no return statement).
您要执行的操作是将函数直接传递给addEventListener，该函数随后将为您提供一个event对象(称为callback)调用它:
.addEventListener("submit", handleClick, false)
What you want to do is directly pass the function to addEventListener, which will then take care of calling it with an event object for you (this is called a callback):
.addEventListener("submit", handleClick, false)
这篇关于如何获得表单提交的价值popup.html chrome扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
