How to get value of form submission popup.html chrome extension
Question
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 ie 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>
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
});
}
1 answers
solution1
3 2015-12-27 22:58:26
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).
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)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.