How to disable submit button after click-CodePudding

Im currently working on an extension where I currently have a submit button and input. When a user is clicking on the submit button, the user should not be able to click on the submit button anymore and should be disabled and if the user has already entered a user ID then it should also not be able to click on submit again.

How can I be able to disable the submit button when a user has clicked it or has already clicked it before using my code below?

popup.js

function get_discord_id(callback) {
    chrome.storage.sync.get(["discord_id"], (result) => {
        callback(result.discord_id);
    });
}

function set_discord_id(discord_id) {
    chrome.storage.sync.set({ discord_id: discord_id }, () => {});
}

window.addEventListener("DOMContentLoaded", () => {
    // check if discord ID is already stored
    get_discord_id((discord_id) => {
        if (discord_id != null) {
            let input = document.getElementById("discord-id-input");
            input.value = "";
            input.placeholder = discord_id;
        }
    });

    document.getElementById("discord-id-button").addEventListener("click", () => {
        let input = document.getElementById("discord-id-input");
        let value = input.value;
        input.value = "";
        input.placeholder = value;

        chrome.runtime.sendMessage({ discord_id: value }, function(response) {
        });

        set_discord_id(value);
    });
});

HTML

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/popup.js"></script>
</head>

<body>
    <div >
        <div >
            <input type="text" id="discord-id-input" name="discord-id-input" placeholder="Discord ID">
            <button id="discord-id-button" type="submit"  onclick="this.disabled=true;"></button>
            <a >ENTER DISCORD USER ID AND SUBMIT</a>
        </div>
    </div>
</body>

CSS

#discord-id-button {
    box-shadow: 0 0 10px 0 #251431;
    border-radius: 8px;
    transition: 0.3s;
}

#discord-id-button:hover {
    box-shadow: 0 0 10px 6px #251431;
}

#discord-id-input {
    box-shadow: 0 2px 1px 0 #251431;
    border-radius: 8px;
}

body {
    background-image: url('../images/bg2.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 250px;
    padding: 5px 15px 30px 15px;
    width: 500px;
}

.text-center {
    text-align: center;
}

*:focus {
    outline: none;
}

.form-control {
    align-items: center;
    display: flex;
    justify-content: center;
}

label {
    display: block;
}

select,
input {
    background: #582e79;
    border-radius: 8px;
    border: 1px #582e79;
    color: #999;
    margin-left: 60px;
    margin-top: 135px;
    padding: 5px 10px;
    text-align: center;
    width: 150px;
}

.mt10 {
    margin-top: 20px;
}

.submit {
    background-color: transparent;
    background-image: url("../images/arrow.png");
    background-position: center center;
    background-repeat: no-repeat;
    border: none;
    height: 15px;
    width: 50px;
    margin-left: 15px;
    margin-top: 135px;
    outline: none;
    padding-bottom: 25px;
}

.help-text {
    position: fixed;
    color: #FFFF;
    font-size: 9px;
    color: #999;
    margin-top: 190px;
}

CodePudding user response：

You can use

document.getElementById('button').disabled="true";

CodePudding user response：

If you want some extra styling for your disabled button you could do this:

add two classes to your html button: enabled and disabled. Then, on click, replace the "disabled" class with the class "enabled" and remove event listener.

If you just want to disable it, ignore the part with the classes and just disable it on click.

Simple fiddle:

const button = document.querySelector("button");
const classes = button.classList;

button.addEventListener('click', handleClick)


function handleClick() {
  //classes.replace('enabled', 'disabled');
  button.disabled = true;
  button.removeEventListener('click', handleClick)
}

.disabled {
  background: #ccc;
}

<button > submit</button>