如何獲取表單提交的值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擴展

回答

相關問題