0

I am trying to find out how can I disable the submit button until all form fields are filled. I have seen there are many solutions online in jQuery and JS.

But what I am looking for is, instead of checking all fields every time when there is a change in the field value, isn't there a way that checks the all the fields altogether at once at the end just like 'required' attribute?

For example, if you see the below solution provided here here.

$("input[type='text'], textarea").on("keyup", function(){

    // checking for all fields on "keyup"

    if (
        $(this).val() != ""
        && $("textarea").val() != ""
        && $("input[name='category']").is(":checked") == true 
    ) {
        $("input[type='submit']").removeAttr("disabled");
    } else {
        $("input[type='submit']").attr("disabled", "disabled");
    }
});

$("input[name='category']").on("change", function () {
    if (
        $(this).val() != ""
        && $("textarea").val() != ""
        && $("input[name='category']").is(":checked") == true
    ) {
        $("input[type='submit']").removeAttr("disabled");
    } else {
        $("input[type='submit']").attr("disabled", "disabled");
    }
});

We can see it's checking for all fields every time on keyup or on change is called. But I need to know if there is any other efficient way rather than checking all fields every time on keyup or on change is called?

Aziza Kasenova
  • 1,501
  • 2
  • 10
  • 22
KSK
  • 103
  • 2

0 Answers0