在 chrome 擴展中提交表單時彈出刷新

Question

我正在嘗試構建一個 chrome 擴展彈出窗口 window，一旦單擊，它將顯示一個表單，供用戶提交他或她的姓名和他們就讀的大學。 然后我想將此信息存儲在 chrome 存儲中，一旦完成，它將用不同的 window 替換彈出窗口 window，該 window 將顯示“hello”+（用戶從 chrome 存儲中檢索）+“。” 作為 header，如果用戶沒有輸入任何內容並提交表單。 然后它不會提交表格並要求他們再次填寫表格，我正在努力實現這一點，但出於某種原因。 它不起作用，頁面只是在輸入信息時重新加載提交。 而沒有進行或類似的事情？ 我究竟做錯了什么？ 我的代碼在下面

清單.json

    {
    "name": "CXhrome Extemsopm",
    "description": "my extension",
    "version": "0.1.0",
    "manifest_version": 2,
    "background": {
        "scripts": [
            "jquery-3.5.1.min.js", 
            "background.js"
        ]
    },
    "browser_action": {
        "default_popup": "index.html"
    },
    "permissions": [
        "storage",
        "tabs",
        "identity",
        "notifications"
    ],
    "content_security_policy": "script-src 'self' https://cdn.firebase.com https://apis.google.com https://www.gstatic.com https://kit.fontawesome.com/; object-src 'self'"
  }

索引.html

    <!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <style>
        html {
            width: 370px;
            height: 500px;
        }

        .header {
            position: absolute;
            right: 0;
            top: 0;
            width: 370px;
            height: 60px;
            background-color: white;
        }

        .logo {
            position: absolute;
            top: 12px;
            right: 122px;
        }

        .form {
            position: absolute;
            right: 0;
            top: 63px;
            width: 370px;
            height: 437px;
            text-align: center;
            background-color: whitesmoke;
        }

        .questionaire {
            width: 336px;
            position: absolute;
            left: 17px;
            top: 35px;
            padding: 15px;
            background-color: white;
            border-radius: 25px;
        }
        
    </style>
    <body>
        <section class="header">
            <div>
                <h1 class="logo">Logo Here</h1>
            </div>
        </section>

        <section class="form">
            <form id="form" class="questionaire">
                <h1>What is your name?</h1>
                <input id="name" class="form-control" type="text" placeholder="Name" required>
                <br>
                <h2>What college do you attend?</h2>
                <select id="college" class="form-select" required>
                    <option selected>College</option>
                    <option value="college1">College 1</option>
                    <option value="college2">College 2</option>
                    <option value="college3">College 3</option>
                </select>
                <hr>
                <div class="d-grid gap-2">
                    <button id="link" class="btn btn-primary" type="submit" name="submit">Submit</button>
                </div>
            </form>
        </section>
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

index.js

    document.getElementById('link').addEventListener("click", myFunction);

function myFunction() {
    var name = document.getElementById('name').value;
    var college = document.getElementById('college').value;

    if ((name === "" || name == null) && (college === "" || college == null)) {
        window.location.replace("index.html");
    } else {
        chrome.storage.local.set({'name': name, 'college': college}, function () {
            window.location.replace("canvas.html");
        });
    }
}

Answer 1

適合您的快速簡單的解決方案：

function myFunction(e) {

    e.preventDefault()

我建議您擺脫<form>和<button... type="submit"> 。 這些通常用於使用表單的action屬性傳遞數據。 簡化您的 html 結構並在 JS 中處理所有內容。 如果您將擺脫 form 和type="submit"屬性，您可以讓您的 JS 保持原樣。 它可以與form一起使用，而無需type="submit"但無論如何使用form元素是沒有意義的。

在 chrome 擴展中提交表單時彈出刷新

問題描述

1 個解決方案

解決方案1
1 已采納 2021-01-03 14:54:17

在 chrome 擴展中提交表單時彈出刷新

問題描述

1 個解決方案

解決方案1 1 已采納 2021-01-03 14:54:17

解決方案1
1 已采納 2021-01-03 14:54:17