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
JavaScript
x
37
37
1
function get_discord_id(callback) {2
chrome.storage.sync.get(["discord_id"], (result) => {3
callback(result.discord_id);4
});5
}6
7
function set_discord_id(discord_id) {8
chrome.storage.sync.set({ discord_id: discord_id }, () => {});9
}10
11
window.addEventListener("DOMContentLoaded", () => {12
// console.log(`Testing: ${input.placeholder}`)13
// check if discord ID is already stored14
get_discord_id((discord_id) => {15
console.log(`Console test:`);16
if (discord_id != null) {17
let input = document.getElementById("discord-id-input");18
input.value = "";19
input.placeholder = discord_id;20
}21
});22
23
document.getElementById("discord-id-button").addEventListener("click", () => {24
let input = document.getElementById("discord-id-input");25
let value = input.value;26
input.value = "";27
input.placeholder = value;28
29
chrome.runtime.sendMessage({ discord_id: value }, function(response) {30
// console.log(response.discord_id);31
});32
33
set_discord_id(value);34
e.target.disabled = "true";35
});36
});37
HTML
JavaScript
1
17
17
1
<!DOCTYPE html>2
3
<head>4
<link rel="stylesheet" href="../css/style.css">5
<script src="../js/popup.js"></script>6
</head>7
8
<body>9
<div class="text-center">10
<div class="form-control mt10">11
<input type="text" id="discord-id-input" name="discord-id-input" placeholder="Discord ID">12
<button id="discord-id-button" type="submit" class="submit"></button>13
<a class="help-text">ENTER DISCORD USER ID AND SUBMIT</a>14
</div>15
</div>16
</body>17
CSS
JavaScript
1
82
82
1
#discord-id-button {2
box-shadow: 0 0 10px 0 #251431;3
border-radius: 8px;4
transition: 0.3s;5
}6
7
#discord-id-button:hover {8
box-shadow: 0 0 10px 6px #251431;9
}10
11
#discord-id-input {12
box-shadow: 0 2px 1px 0 #251431;13
border-radius: 8px;14
}15
16
body {17
background-image: url('../images/bg2.jpg');18
background-position: center center;19
background-repeat: no-repeat;20
background-size: cover;21
height: 250px;22
padding: 5px 15px 30px 15px;23
width: 500px;24
}25
26
.text-center {27
text-align: center;28
}29
30
*:focus {31
outline: none;32
}33
34
.form-control {35
align-items: center;36
display: flex;37
justify-content: center;38
}39
40
label {41
display: block;42
}43
44
select,45
input {46
background: #582e79;47
border-radius: 8px;48
border: 1px #582e79;49
color: #999;50
margin-left: 60px;51
margin-top: 135px;52
padding: 5px 10px;53
text-align: center;54
width: 150px;55
}56
57
.mt10 {58
margin-top: 20px;59
}60
61
.submit {62
background-color: transparent;63
background-image: url("../images/arrow.png");64
background-position: center center;65
background-repeat: no-repeat;66
border: none;67
height: 15px;68
width: 50px;69
margin-left: 15px;70
margin-top: 135px;71
outline: none;72
padding-bottom: 25px;73
}74
75
.help-text {76
position: fixed;77
color: #FFFF;78
font-size: 9px;79
color: #999;80
margin-top: 190px;81
}82
Advertisement
Answer
You can use
JavaScript
1
2
1
document.getElementById('button').disabled="true";2