CODEWITHSUNDEEP
javascripthtmlformsgoogle-chrome-extensionpopup
Yashvardhan Khaitan
Yashvardhan Khaitan

Reputation: 143

Popup refreshing on form submit in chrome extension

I am trying to build a chrome extension popup window that once clicked, will display a form for the user to submit his or her name and the college they attend. I want to then store this information in chrome storage, and once done, it will replace the popup window with a different window that will display a "hello" + (user retreived from chrome storage) + "!" as a header. If the user doesn't enter anything and submits the form, then it won't submit the form and ask them to fill out the form again. I am trying to achieve this, but for some reason, it is not working. The page is just reloading on submit when the information entered, and not proceeding or something like that. What am I doing wrong? My code is down below

Manifest.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'"
  }

index.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/[email protected]/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");
        });
    }
}

Upvotes: 1

Views: 589

Answers (1)

yegorchik
yegorchik

Reputation: 159

The fast and simple solution in your case:

function myFunction(e) {

    e.preventDefault()

I would recommend you getting rid of the <form> and <button ... type="submit">. These are normally used to pass the data using action attribute of the form. Simplify your html structure and handle everything in JS. If you'll get rid of the form and type="submit" attribute you can leave your JS like it is. It will work with form and without type="submit" but there's no sense in using the form element anyway.

Upvotes: 2

Related Questions