I have a panel consist of HTML form and a cript attached to it. The script should take the text input in text-field and pass it to the Addon to the console.log. I used addEventListener to sent the text once the user clicks the submit button but the script does not work (I get nothing in the console.log). Here are the scripts:
The HTML panel text-entry.html:
<html>
<head>
<style type="text/css" media="all">
textarea {
margin: 10px;
}
body {
background-color:white; <!--#b3dbfa-->
}
</style>
</head>
<body>
<form>
Enter URL: <br>
<input type="text" id="text-field">
<input type="submit" id="submit-button" value="Add">
</form>
<script src="get-text.js"></script>
</body>
</html>
Here is the script attached to the panel get-text.js
// When the user clicks submit, send the "text-entered"
// message to main.js.
// The message payload is the contents of the edit box.
var textArea = document.getElementById("edit-box");
var submitButton = document.getElementById("submit-button");
submitButton.addEventListener('submit',function onsubmit(event){
text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
addon.port.emit("text-entered", text);
textArea.value = '';
}//end function onsubmit
,false);
addon.port.on("show", function onShow() {
textArea.focus();
});
Here is the index.js:
var { ToggleButton } = require('sdk/ui/button/toggle');
var sdkPanels = require("sdk/panel");
var self = require("sdk/self");
var sdkstorage = require("sdk/simple-storage"); //to store info. presistant to the addon.
var sdktabs = require("sdk/tabs"); //for content script
var button = ToggleButton({
id: "my-button",
label: "my button",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onChange: handleChange
});
var myPanel = sdkPanels.Panel({
contentURL: "./text-entry.html",
onHide: handleHide
});
function handleChange(state) {
if (state.checked) {
myPanel.show({
position: button
});
} //end if
}//end function handleChange
function handleHide() {
button.state('window', {checked: false});
}
// When the panel is displayed it generated an event called
// "show": we will listen for that event and when it happens,
// send our own "show" event to the panel's script, so the
// script can prepare the panel for display.
myPanel.on("show", function() {
myPanel.port.emit("show");
});
// Listen for messages called "text-entered" coming from
// the content script. The message payload is the text the user
// entered.
// In this implementation we'll just log the text to the console.
myPanel.port.on("text-entered", function (text) {
console.log(text);
//self.alert(text);
myPanel.hide();
});