disable all other inputs if command/specific input not filled in

Question

I am trying to disable all other inputs within a specific form "<form id="join">" if the user has not first filled out the <input type="text" id="userkey" name="userkey" /> input and all other inputs will remain disabled until the "<form id="join">" input has been filled out.

The reason for this is to model user behavior so they will join our site discord first for various reasons that I won't be going into. I understand that this is not a secure method. All user data will be sanitized and validated on the server side to protect the site/database. I understand that it is possible to bypass this and still submit data, again user data will be sanitized and validated on the server side to protect the site/database. I am doing thise because even with a huge note on the membership form to do so, they still try to submit data and bypass joining the discord making it difficult to communicate with them. this is an attempt at idiot proofing a site - also it blocks a lot of spam as spambots generally can't join a discord.

here is a very simple example from which I will extrapolate to our actual membership form.

here is the htmt

<form id="join-membership">
    user key
    <br />
    <input type="text" id="userkey" name="userkey" />
    <br />
    <p>If you do not have a user key, please <a href="#">join our discord</a> to get one</p>
    Email
    <br />
    <input type="email" id="email" disabled="disabled" />
    <br />
    Username
    <br />
    <input type="text" id="username" name="username" disabled="disabled" />
    <br />
    Password
    <br />
    <input type="password" id="pass" name="password" disabled="disabled" />
    <br />
    Confirm Password
    <br />
    <input type="password" id="pass2" name="password2" disabled="disabled" />
    <br />
    About You
    <br />
    <textarea id="about" name="about" disabled="disabled"></textarea>
    <br />
    <input type="submit" id="submit" value="Register" disabled="disabled" />
</form>
<div id="test"></div>

    

here is the JavaScript

<script>

(function() {
    $('form > input').keyup(function() {

        var email = true;
        var empty = false;
        $('form > input').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (email == empty) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });
})()

</script>

Please note that I am super new to JavaScript and the web and have researched and found script to disable the submit button, but our form is a bit complex and I don't want users to try to fill it out as to find out the can't submit it even if they failed to read the instruction. This is model user behavior to provide what I hope is a better user experience in the long term.

Thank you for any help given.

Answer 1

Hi you can try something like this

 (function() {
    $("#userkey").keyup(function() {
      const userkey = this.value;
        if (userkey) {
          $('.other-inputs input, .other-inputs textarea').removeAttr('disabled');
            } else {
             $('.other-inputs input, .other-inputs textarea').attr('disabled', 'disabled');
         }
    });
})()

on user key input change, the function is checking if there is value in userkey input if exist It will remove disabled attribute from the inputs that are in div other-input

Check here for an example: https://jsfiddle.net/t4ub0xs3/