Disable html form submit button until only fields with required attribute entered

Question

I would like to hide the submit button of a html form until the required fields are entered, could anyone tell me how to do so? here are my codes:

<form name="signup" action="mailto:chowhiuyu@gmail.com" method="post" enctype="text/plain">
    Enter Student ID:
    <input type="text" name="student_ID" size="30%" required >
    <br>Gender: <input type="radio" name="gender" value="male" required>Male <input type="radio" name="gender" value="Female" required>Female
    <br>Form:<select name="Form" required>
                <option value="F1">F1</option>
                <option Value="F2">F2</option>
                <option value="F3">F3</option>
                <option value="F4">F4</option>
                <option value="F5">F5</option>
                <option value="F6">F6</option>
            </select>
    <br>Electives chosen:
        <input type="checkbox" name="Elective" value="Physics">Physics
        <input type="checkbox" name="Elective" value="Chemistry">Chemistry
        <input type="checkbox" name="Elective" value="Biology">Biology
        <br>
        <input type="checkbox" name="Elective" value="History">History
        <input type="checkbox" name="Elective" value="Chinese History">Chinese History
        <input type="checkbox" name="Elective" value="Music">Music
        <input type="checkbox" name="Elective" value="Englit">English Literature
        <br>
        <input type="checkbox" name="Elective" value="Physical Education">Physical Education
        <input type="checkbox" name="Elective" value="Visual Arts">Visual Arts
        <input type="checkbox" name="Elective" value="business">Business Management
        <input type="checkbox" name="Elective" value="Accounting">Accounting
    <br>
        Password:
    <input type="password" name="password" placeholder="Password" id="password" size="30%" required>
    <br>Re-enter Password: 
    <input type="password" name="password_check" placeholder="Confirm Password" id="confirm_password" size="30%" required>
    <p>
        <input type="submit" name="submit" value="Submit" onclick="window.alert('Your Request will be processed soon!');">
        <input type="reset" name="Reset" Value="Reset">
    </p>

Possible duplicate of [Disable/Enable Submit Button until all forms have been filled](https://stackoverflow.com/questions/13931688/disable-enable-submit-button-until-all-forms-have-been-filled) — Obsidian Age, Apr 19 '18 at 02:11
What if I would like to disable submit button only when the fields with required attribute is inputted — Hiuyu2001, Apr 20 '18 at 04:48
@Hiuyu2001 Form can be submitted even on pressing 'Enter'. No plans to deal with that use case? — vibs2006, Apr 20 '18 at 07:40
IMO, hiding the submit button would be bad UI/UX design. Since you tagged this HTML5, you could use the [required attribute](https://html5tutorial.info/html5-required.php) to prevent submission until all of the fields are filled out. You might want to add some JS as a fallback in case someone is using a browser that doesn't support it. — Useless Code, Apr 25 '18 at 00:36
@UselessCode i know but I would like to show a window alert when the submit button to be clicked so i would like to disable it — Hiuyu2001, Apr 26 '18 at 02:28

score 0 · Answer 1 · answered Apr 19 '18 at 05:41

Check out this http://jsfiddle.net/qKG5F/641/

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

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

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

It will keep the button disabled if there is at least one field is empty.

Disable html form submit button until only fields with required attribute entered

1 Answers1