Disable/enable button depending on text input

Question

I have multiple input type="text", two input type="password" boxes with class="important" and one checkbox. When all input with class important is filed and checkbox is checked the button should be enabled,else disabled. I have this script,but when i enter text in only last input it enables button. Can someone help?

js

$(document).ready(function () {
    $(".important").on('keyup blur change', function () {
        $(".important").each(function () {
            if ($(this).val().trim() == "") {
                $('#form-right input[type="submit"]').addClass('inactive');
            } else {
                $('#form-right input[type="submit"]').removeClass('inactive');
            }
        });
    });
});

this is html:

<form>
    <fieldset>
        <ul>
            <li>
                <label class="mandatory">Naziv agencije</label>
                <input class="important" type="text" name="naziv_agencije" id="register_agency">
            </li>
            <li>
                <label class="mandatory">Adresa</label>
                <input class="important" type="text" name="adresa" id="register_address">
            </li>
            <li>
                <label class="mandatory">Telefon 1</label>
                <input class="important" type="text" name="telefon_1" id="register_phone">
            </li>
            <li>
                <label>Telefon 2</label>
                <input type="text" name="telefon_2" id="register_phone2">
            </li>
            <li>
                <label>Fax</label>
                <input type="text" name="fax" id="register_fax">
            </li>
            <li>
                <label class="mandatory">E-mail</label>
                <input class="important" type="text" name="email" id="register_email">
            </li>
            <li>
                <label>Web adresa</label>
                <input type="text" name="web_adresa" id="register_web">
            </li>
            <li>
                <label class="mandatory">Korisničko ime</label>
                <input class="important" type="text" name="korisnicko_ime" id="register_user">
            </li>
            <li>
                <label class="mandatory">Lozinka</label>
                <input class="important" type="password" name="lozinka" id="register_pass">
            </li>
            <li>
                <label class="mandatory">Potvrdi lozinku</label>
                <input class="important" type="password" name="pot_lozinku" id="register_passr">
            </li>
            <li>
                <label>Logo</label>
                <input type="hidden" name="max_file_size">
                <input type="file" name="logo" id="register_browse">
                <label class="browse-button" id="register_browse">Izaberi logo</label>
                <label class="file-label" id="register_browse">Logo još nije izabran</label>
            </li>
            <li>
                <div class="checkset">
                    <div class="custom-true">
                        <input type="checkbox" name="pravila" id="register_terms">
                        <label>Da,slažem se sa <a href="html and css.pdf">previlima i uslovima korišćenja</a>

                        </label>
                    </div>
                </div>
            </li>
            <li>
                <input type="submit" name="register" value="registruj se" disabled="disabled" class="inactive">
            </li>
            <li>
                <p class="catalog">Cenovnik usluga iternet sajta <a href="/" title="Last Minute Ponude">Last Minute Ponude</a>
pogledajte <a href="/">ovde</a>
.</p>
            </li>
        </ul>
    </fieldset>
</form>

why not put the checking on the check box if all the input have value and the checkbox is checked enable if not dont. — guradio
– guradio, Commented Sep 5, 2015 at 10:49
That whould be god,but that means if you only check check box it will andable button. — Dejan Jankov
– Dejan Jankov, Commented Sep 5, 2015 at 11:02

David · Accepted Answer · 2015-09-05 10:46:43Z

1

This:

$(".important").each(function(){
    //...
});

is going to execute the logic it contains for each element. Which basically translates to:

If the first element has a value, enable the button
If the second element has a value, enable the button
etc.

So as long as the last (and only last) element has a value, the button will be enabled. The check against any previous element is immediately overwritten by the next element.

The logic should be:

If any element does not have a value, disable the button

A simple loop can accomplish that:

var elements = $(".important");
for (var i = 0; i < elements.length; i++) {
    if($(elements[i]).val().trim() == "") {
        $('#form-right input[type="submit"]').addClass('inactive');
        return;
    }
}
$('#form-right input[type="submit"]').removeClass('inactive');

The idea here is to loop through the elements and look for any one which is empty. As soon as an empty one is found, de-activate the button and return from the function. (Since we don't need to check the rest of the elements.) If no empty one is found and the loop completes, enable the button.

answered Sep 5, 2015 at 10:46

David

221k42 gold badges246 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dejan Jankov Over a year ago

wow that was fast and educational. i aprisiate the lecture. I just need one more thing. the checkbox with id=register_terms should be checked too before enabeling button.

guradio · Accepted Answer · 2015-09-05 11:45:09Z

1

FIDDLE

Added id to submit button.

Used the checkbox to check if input is not empty if complete check the checkbox if checked activate the button.

$("#register_terms").on('change', function () {

if ($(this).is(":checked")) {
    $(".important").each(function () {
        if ($(this).val().trim() == "") {
            $('#qwe').prop('disabled', true);
        } else {
            $('#qwe').prop('disabled', false);
        }
    });
} else {
    $('#qwe').prop('disabled', true);
}

});

UPDATED FIDDLE

NEW FIDDLE

edited Sep 5, 2015 at 11:45

answered Sep 5, 2015 at 10:53

guradio

15.6k4 gold badges39 silver badges65 bronze badges

13 Comments

Dejan Jankov Over a year ago

That is what i need. Nice

Dejan Jankov Over a year ago

Sorry but again i have same problem... if i only enter text in last input and check check box the button will be enabled.

guradio Over a year ago

@DejanJankov can you check this new fiddle\

guradio Over a year ago

how did it go?is it ok?

Dejan Jankov Over a year ago

it wont work on my site... code that David posted works but its not the whole thing. this one is what i need,but cant make it work on my site.

|

Collectives™ on Stack Overflow

Disable/enable button depending on text input

2 Answers 2

1 Comment

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related