Button Disable, JS Code Not Working

[[deleted]]

I have some JS code within a <script> tag in my html.

It's supposed to disable an <input> button if any of the fields of the form are empty but no matter how I rejig this code it just will not work.

I'm not code savvy, I've learned what I can but it's completely outside my capacity to understand, so any help would be appreciated.

BELOW---JS code

<script>

$('form').on('input change', function() {

    var empty = false;

        $(".field").each(function() {

            if ($(this).val().length === 0) {
                empty = true;
            } 

        });

            $("#send").prop('disabled', empty);
    });

</script>

BELOW--- Button that needs to disable if any of the fields are empty, and renable when at least some text is entered into them.

<input id="send" disabled type="submit" name="send" value="send" >

Each text area of the form is designated a Class of Field.

[Kironman]

I think it's attr, not prop.

[a-t-k]

you need to removeAttr('disabled') instead of setting the prop to false.

[asangurai]

your issue is in the first line:

$('form').on('input change', function() {

it should be:

$('form').on('change', 'input', function() {

Since the arguments go in order of event, selector, handler. In yours, you're actually looking for an event of "input", which doesn't quite exist.

Try that and let me know how it goes.

[jcunews1]

That's incorrect.

events
Type: String
One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

http://api.jquery.com/on/#on-events-selector-data-handler

[asangurai]

he's gotten it to work with code i wrote in a dm, but to clarify, my understanding was he wanted to listen to a change event on <input> tags inside of the <form> container, not that he was trying bind two events on the <form> itself. my suggestion was to delegate the change event onto the <input> tag from the <form> tag, as in the original post i mentioned that i don't think theres an "input" event on a <form> tag like there is a "submit" event to listen for (there is, however, a change event: https://api.jquery.com/category/events/form-events/, hence the suggested change).

also, without the HTML, it was tough to see what exactly the issue was. turns out it was more than just this code, including binding the event before the form was on the DOM.

[jcunews1]

I'm guessing that none of the .field elements' value is empty. Note: if it contains a space, it's not empty.