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

master
Aevann 2023-09-15 16:55:27 +03:00
parent 42385ea60f
commit 8f4f0b8cb3
5 changed files with 25 additions and 10 deletions

View File

@ -66,6 +66,18 @@ function postToast(t, url, data, extraActionsOnSuccess, extraActionsOnFailure) {
xhr[0].send(xhr[1]); 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) { function postToastReload(t, url) {
postToast(t, url, {}, reload); postToast(t, url, {}, reload);
} }
@ -434,6 +446,8 @@ function insertText(input, text) {
input.setSelectionRange(newPos, newPos); input.setSelectionRange(newPos, newPos);
input.selectionStart = newPos; input.selectionStart = newPos;
handle_disabled(input)
} }

View File

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

View File

@ -249,7 +249,7 @@
{% if v and (v.id == c.author_id or v.admin_level >= PERMS['POST_COMMENT_EDITING']) %} {% 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"> <div id="comment-edit-{{c.id}}" class="d-none comment-write collapsed child">
<input hidden name="formkey" value="{{v|formkey}}"> <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> <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> <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> <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 id="comment-form-space-{{c.id}}" class="comment-write collapsed child">
<div class="input-group"> <div class="input-group">
<input hidden name="formkey" value="{{v|formkey}}"> <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'))}} {{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" 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> </div>
<div id="message-reply-{{c.id}}" class="preview mt-2"></div> <div id="message-reply-{{c.id}}" class="preview mt-2"></div>

View File

@ -190,12 +190,12 @@
</div> </div>
<form class="d-none toggleable" id="message" action="/@{{u.username}}/message" method="post" data-nonce="{{g.nonce}}" data-onsubmit="sendMessage(this)"> <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}}"> <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'))}} {{macros.file_input('file-upload-macro', 'input-message', not get_setting('dm_media'))}}
<div class="d-flex"> <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> </div>
</form> </form>
@ -491,12 +491,12 @@
{% if v and v.id != u.id %} {% 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)"> <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}}"> <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')}} {{macros.file_input('file-upload-mobile', 'input-message-mobile')}}
<div class="d-flex"> <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> </div>
</form> </form>

View File

@ -122,13 +122,13 @@
<div id="comment-form-space-{{target_fullname}}" class="comment-write {{subwrapper_css_classes}}"> <div id="comment-form-space-{{target_fullname}}" class="comment-write {{subwrapper_css_classes}}">
<input hidden name="formkey" value="{{v|formkey}}"> <input hidden name="formkey" value="{{v|formkey}}">
<input hidden name="parent_fullname" value="{target_fullname}}"> <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> <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)}} {{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 %} {% 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> <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>