disable "submit" buttons unless theres a value in textbox to prevent annoying misclicks

files/assets/js/core.js

@@ -66,6 +66,18 @@ function postToast(t, url, data, extraActionsOnSuccess, extraActionsOnFailure) {
 	xhr[0].send(xhr[1]);
 }
 
+function handle_disabled(t) {
+	btn = t.parentElement.getElementsByClassName('handle_disabled')[0]
+	if (t.value) {
+		btn.disabled = false;
+		btn.classList.remove('disabled')
+	}
+	else {
+		btn.disabled = true;
+		btn.classList.add('disabled')
+	}
+}
+
 function postToastReload(t, url) {
 	postToast(t, url, {}, reload);
 }
@@ -434,6 +446,8 @@ function insertText(input, text) {
 		input.setSelectionRange(newPos, newPos);
 
 	input.selectionStart = newPos;
+
+	handle_disabled(input)
 }
 
 

files/assets/js/gif_modal.js

@@ -11,6 +11,7 @@ function insertGIF(url) {
 	if (old) commentBox.value = `${old}\n${url}`;
 	else commentBox.value = url
 
+	handle_disabled(commentBox)
 	if (typeof checkForRequired === "function") checkForRequired();
 }
 

files/templates/comments.html

@@ -249,7 +249,7 @@
 				{% if v and (v.id == c.author_id or v.admin_level >= PERMS['POST_COMMENT_EDITING']) %}
 					<div id="comment-edit-{{c.id}}" class="d-none comment-write collapsed child">
 						<input hidden name="formkey" value="{{v|formkey}}">
-						<textarea autocomplete="off" {% if v.longpost %}minlength="280"{% endif %} maxlength="{% if v.bird %}140{% else %}10000{% endif %}" data-preview="preview-edit-{{c.id}}" data-nonce="{{g.nonce}}" data-oninput="markdown(this);charLimit('comment-edit-body-{{c.id}}','charcount-edit-{{c.id}}')" id="comment-edit-body-{{c.id}}" data-id="{{c.id}}" name="body" form="comment-edit-form-{{c.id}}" class="file-ta comment-box form-control rounded" placeholder="Add your comment..." rows="3">{{c.body}}</textarea>
+						<textarea autocomplete="off" {% if v.longpost %}minlength="280"{% endif %} maxlength="{% if v.bird %}140{% else %}10000{% endif %}" data-preview="preview-edit-{{c.id}}" data-nonce="{{g.nonce}}" data-oninput="markdown(this);charLimit('comment-edit-body-{{c.id}}','charcount-edit-{{c.id}}');handle_disabled(this)" id="comment-edit-body-{{c.id}}" data-id="{{c.id}}" name="body" form="comment-edit-form-{{c.id}}" class="file-ta comment-box form-control rounded" placeholder="Add your comment..." rows="3">{{c.body}}</textarea>
 
 						<div class="text-small font-weight-bold mt-1" id="charcount-edit-{{c.id}}" style="right: 1rem; bottom: 0.5rem; z-index: 3"></div>
 
@@ -257,7 +257,7 @@
 
 						<a class="text-small mt-3 d-inline-block" href="/formatting" {% if v and v.newtab %}data-target="t" target="_blank"{% endif %}>Formatting help</a>
 
-						<button type="button" id="edit-btn-{{c.id}}" form="comment-edit-form-{{c.id}}" class="btn btn-primary ml-2 fl-r commentmob" data-nonce="{{g.nonce}}" data-onclick="comment_edit('{{c.id}}')">Save Edit</button>
+						<button type="button" id="edit-btn-{{c.id}}" form="comment-edit-form-{{c.id}}" class="btn btn-primary ml-2 fl-r commentmob handle_disabled" data-nonce="{{g.nonce}}" data-onclick="comment_edit('{{c.id}}')">Save Edit</button>
 
 						<button type="button" id="cancel-edit-{{c.id}}" data-nonce="{{g.nonce}}" data-onclick="toggleEdit('{{c.id}}');remove_dialog()" class="btn btn-link text-muted ml-auto fl-r commentmob">Cancel</button>
 
@@ -544,7 +544,7 @@
 				<div id="comment-form-space-{{c.id}}" class="comment-write collapsed child">
 					<div class="input-group">
 						<input hidden name="formkey" value="{{v|formkey}}">
-						<textarea data-fullname="{{c.fullname}}" required autocomplete="off" minlength="1" maxlength="10000" name="body" form="reply-to-c_{{c.id}}" data-id="{{c.id}}" class="file-ta comment-box form-control rounded" id="reply-form-body-{{c.id}}" rows="3" data-preview="message-reply-{{c.id}}" data-nonce="{{g.nonce}}" data-oninput="markdown(this)"></textarea>
+						<textarea data-fullname="{{c.fullname}}" required autocomplete="off" minlength="1" maxlength="10000" name="body" form="reply-to-c_{{c.id}}" data-id="{{c.id}}" class="file-ta comment-box form-control rounded" id="reply-form-body-{{c.id}}" rows="3" data-preview="message-reply-{{c.id}}" data-nonce="{{g.nonce}}" data-oninput="markdown(this);handle_disabled(this)"></textarea>
 
 						{{macros.file_input('file-upload-reply-' ~ c.fullname, 'reply-form-body-' ~ c.id, not get_setting('dm_media'))}}
 
@@ -556,7 +556,7 @@
 
 							<button type="button" data-nonce="{{g.nonce}}" data-onclick="cancel('{{c.fullname}}')" class="btn btn-link text-muted ml-auto">Cancel</button>
 
-							<button type="button" id="save-reply-to-{{c.id}}" class="btn btn-primary ml-2" data-nonce="{{g.nonce}}" data-onclick="post_reply('{{c.id}}')">Reply</button>
+							<button type="button" id="save-reply-to-{{c.id}}" class="btn btn-primary ml-2 handle_disabled disabled" disabled data-nonce="{{g.nonce}}" data-onclick="post_reply('{{c.id}}')">Reply</button>
 						</div>
 					</div>
 					<div id="message-reply-{{c.id}}" class="preview mt-2"></div>

files/templates/userpage/banner.html

@@ -190,12 +190,12 @@
 						</div>
 						<form class="d-none toggleable" id="message" action="/@{{u.username}}/message" method="post" data-nonce="{{g.nonce}}" data-onsubmit="sendMessage(this)">
 							<input hidden name="formkey" value="{{v|formkey}}">
-							<textarea autocomplete="off" id="input-message" form="message" name="message" rows="3" minlength="1" maxlength="10000" class="file-ta form-control b2 mt-1" data-preview="message-preview" data-nonce="{{g.nonce}}" data-oninput="markdown(this)"></textarea>
+							<textarea autocomplete="off" id="input-message" form="message" name="message" rows="3" minlength="1" maxlength="10000" class="file-ta form-control b2 mt-1" data-preview="message-preview" data-nonce="{{g.nonce}}" data-oninput="markdown(this);handle_disabled(this)"></textarea>
 
 							{{macros.file_input('file-upload-macro', 'input-message', not get_setting('dm_media'))}}
 
 							<div class="d-flex">
-								<input type="submit" data-nonce="{{g.nonce}}" data-onclick="remove_dialog()" value="Submit" class="btn btn-primary ml-auto">
+								<input type="submit" data-nonce="{{g.nonce}}" data-onclick="remove_dialog()" value="Submit" class="btn btn-primary ml-auto handle_disabled disabled" disabled>
 							</div>
 						</form>
 
@@ -491,12 +491,12 @@
 				{% if v and v.id != u.id %}
 					<form class="d-none toggleable text-left" id='message-mobile' action="/@{{u.username}}/message" method="post" data-nonce="{{g.nonce}}" data-onsubmit="sendMessage(this)">
 						<input class="mt-1" hidden name="formkey" value="{{v|formkey}}">
-						<textarea autocomplete="off" id="input-message-mobile" form="message-mobile" name="message" rows="3" minlength="1" maxlength="10000" class="file-ta form-control" data-preview="message-preview-mobile" data-nonce="{{g.nonce}}" data-oninput="markdown(this)" required></textarea>
+						<textarea autocomplete="off" id="input-message-mobile" form="message-mobile" name="message" rows="3" minlength="1" maxlength="10000" class="file-ta form-control" data-preview="message-preview-mobile" data-nonce="{{g.nonce}}" data-oninput="markdown(this);handle_disabled(this)" required></textarea>
 
 						{{macros.file_input('file-upload-mobile', 'input-message-mobile')}}
 
 						<div class="d-flex">
-							<input type="submit" data-nonce="{{g.nonce}}" data-onclick="remove_dialog()" value="Submit" class="btn btn-primary ml-auto">
+							<input type="submit" data-nonce="{{g.nonce}}" data-onclick="remove_dialog()" value="Submit" class="btn btn-primary ml-auto handle_disabled disabled" disabled>
 						</div>
 					</form>
 

files/templates/util/macros.html

@@ -122,13 +122,13 @@
 		<div id="comment-form-space-{{target_fullname}}" class="comment-write {{subwrapper_css_classes}}">
 			<input hidden name="formkey" value="{{v|formkey}}">
 			<input hidden name="parent_fullname" value="{target_fullname}}">
-			<textarea required autocomplete="off" {% if not (p and p.id in ADMIGGER_THREADS) %}{% if v.longpost %}minlength="280"{% elif v.bird %}maxlength="140"{% endif %}{% endif %} minlength="1" maxlength="10000" data-preview="form-preview-{{target_fullname}}" data-nonce="{{g.nonce}}" data-oninput="markdown(this);charLimit('reply-form-body-{{target_fullname}}','charcount-{{target_fullname}}')" id="reply-form-body-{{target_fullname}}" data-fullname="{{target_fullname}}" class="file-ta comment-box form-control rounded" name="body" form="reply-to-{{target_fullname}}" placeholder="Add your comment..." rows="3"></textarea>
+			<textarea required autocomplete="off" {% if not (p and p.id in ADMIGGER_THREADS) %}{% if v.longpost %}minlength="280"{% elif v.bird %}maxlength="140"{% endif %}{% endif %} minlength="1" maxlength="10000" data-preview="form-preview-{{target_fullname}}" data-nonce="{{g.nonce}}" data-oninput="markdown(this);charLimit('reply-form-body-{{target_fullname}}','charcount-{{target_fullname}}');handle_disabled(this)" id="reply-form-body-{{target_fullname}}" data-fullname="{{target_fullname}}" class="file-ta comment-box form-control rounded" name="body" form="reply-to-{{target_fullname}}" placeholder="Add your comment..." rows="3"></textarea>
 
 			<div class="text-small font-weight-bold mt-1" id="charcount-{{target_fullname}}" style="right: 1rem; bottom: 0.5rem; z-index: 3"></div>
 
 			{{file_input('file-upload-reply-' ~ target_fullname, 'reply-form-body-' ~ target_fullname, False)}}
 
-			<button type="button" id="save-reply-to-{{target_fullname}}" form="reply-to-{{target_fullname}}" class="btn btn-primary text-whitebtn ml-auto fl-r" data-nonce="{{g.nonce}}" data-onclick="post_comment('{{target_fullname}}', '{{hide}}')">Comment</button>
+			<button type="button" id="save-reply-to-{{target_fullname}}" form="reply-to-{{target_fullname}}" class="btn btn-primary text-whitebtn ml-auto fl-r handle_disabled disabled" disabled data-nonce="{{g.nonce}}" data-onclick="post_comment('{{target_fullname}}', '{{hide}}')">Comment</button>
 
 			{% if enable_cancel_button %}
 				<button type="button" data-nonce="{{g.nonce}}" data-onclick="cancel('{{target_fullname}}')" class="btn btn-link text-muted ml-auto fl-r mr-3">Cancel</button>