Question

我想为Chrome扩展程序设置一个设置页面，但保存按钮不起作用。 .click（）甚至根本不激活。我将所有代码放在下面。另外，我是否使用注释掉的按钮（见下文）？

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Y.A.Y | Options</title>
        <script type="text/javascript" src="/js/jquery-3.1.1.js"></script>
        <script type="text/javascript" src="/js/caps.js"></script>
    </head>

    <body>
        <h1>Settings</h1>
        <form>

            <label>Enabled: </label>
            <select id="on">
                <option value="on">Yes</option>
                <option value="off">No</option>
            </select>

            </br>

            <label>First Letter:</label>
            <select id="first">
                <option value="on">Capital</option>
                <option value="off">Lowercase</option>
            </select>

            </br>

            <label>Change First Letter of Each </label>
            <select id="per">
                <option value="on">Word</option>
                <option value="off">Sentence</option>
            </select>
            <!--<input id="save" type = "submit" value = "Save"/>!-->
            <button id="yayay" type="submit">Save</button>
        </form>
    </body>
</html>

的Javascript

var pretty_fied = false;

var isOn;
var isCapFirst;
var firstLetterPerWord;

getData()

function getData() {
    chrome.storage.local.get(function (data) {
        isOn = data.isOn;
        isCapFirst = data.isCapFirst;
        firstLetterPerWord = data.firstLetterPerWord;
    })
}

$('form').on('submit', function () {
    alert("HI!");
    isOn = ($("#on").value == "on");
    isCapFirst = ($("#first").value == "on");
    firstLetterPerWord = ($("#per").value == "on");
    console.log(isOn);
    chrome.storage.local.set({
        isOn: isOn,
        isCapFirst: isCapFirst,
        firstLetterPerWord: firstLetterPerWord
    });
    console.log("Saved");
});

Answer 1

在表单字段中，您应指定操作，换句话说，您正在使用表单执行的操作例如

{{1}}

来源：http://www.w3schools.com/jquery/event_submit.asp

请注意，操作部分留空，因为您不希望将请求发送到其他文档。

HTML表单提交按钮不起作用，只重新加载页面

1 个答案: