chrome 扩展 - 提交值不起作用答案

【问题标题】：chrome extension - submit values not workingchrome 扩展 - 提交值不起作用
【发布时间】：2013-04-13 03:22:50
【问题描述】：

Chrome 扩展程序不起作用，这是我的代码...

//manifest.json

{
    "manifest_version": 2,
    "name": "auto login",
    "description": "With this extension you can auto login.",
    "version": "1.0",
    "permissions": [ "http://*/*" ],

    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    }
}

// popup.html

<!DOCTYPE HTML>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#submit').click(function(){
                var data = document.getElementById("username").value;
                localStorage["username"] = data;
            });
        });
</script>
    <title>Hello World!</title>
</head>
    <body>
        <form name="login">
            <fieldset>
                <legend>Log In</legend>
                <table>
                    <tr>
                        <td><label for="username">Username</label></td>
                        <td><input type="text" name="username" id="username"/></td>
                    </tr>
                    <tr>
                        <td><label for="password">Password</label></td>
                        <td><input type="password" name="password" id="password"/></td>
                    </tr>
                    <tr>
                        <td><input type="submit" value="verzenden" name="submit" id="submit"/></td>
                    </tr>
                </table>
            </fieldset>
        </form>
    </body>
</html>

为什么这段代码不起作用？无法使用此脚本保存用户名和密码的值。有人可以帮帮我吗？

【问题讨论】：

永远不要在表单中调用某些东西来提交
那我该如何解决呢？
只是添加到其他答案中，您不能在 popup.html 文件中使用任何内联代码。将其全部移动到外部文件并包含它。
@BeardFist 这是解决方案的关键部分。您应该将其发布为答案。

标签： jquery html google-chrome google-chrome-extension

【解决方案1】：

切勿在提交表单中调用任何内容
返回 false 或调用 preventDefault 以不提交表单

给表单一个 ID 并从提交按钮中删除名称和 ID

$(document).ready(function(){
    $('#login').on("submit",function(e){
        var data = document.getElementById("username").value;
        localStorage["username"] = data;
        e.preventDefault();
    });
});

【讨论】：

我将
id 命名为“login”并删除了的名称和 id 并添加了您的代码.. 仍然没有检索到任何值..

【解决方案2】：

您必须从那里删除 form 标记。当您单击按钮时，表单会自动提交并且您的函数没有机会运行

【讨论】：