CODEWITHSUNDEEP
javascriptjqueryif-statementconditional-statements
user3267755
user3267755

Reputation: 1070

javascript conditional logic not working

When I try to run the code below, and step into it in the browser debugger, the length it's showing me is 1 or higher, yet it still drops into this block as if it were evaluated as true...am I missing something here?

  function checkEmpty() {
            var empty = false;
            $('form input:text').each(function () {
                console.log($(this).val())
                if ($(this).val().length === 0) {
                    empty = true;
                }
            });

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

HTML: (these are the input fields, and they are wrapped around a form, and have 2 checkout buttons that are not shown)

  <br />
    <br />
    <label><strong>Full Name: &nbsp; &nbsp; &nbsp; &nbsp; </strong></label>&nbsp;&nbsp;
    <input type="text" required="required" onkeyup="checkEmpty()" name="FullName" style="width: 235px;" /><br />
    <br />
    <label><strong>Mailing Address: &nbsp;</strong></label>
    <input type="text" required="required" name="Address" onkeyup="checkEmpty()" style="width: 235px;" /><br />
    <br />
    <label><strong>Email: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</strong></label>&nbsp;
    <input type="text" required="required" style="width: 235px;" name="Email" onkeyup="checkEmpty()" /><br />
    <br />
    <label><strong>Phone Number: </strong></label>&nbsp;&nbsp;&nbsp;
    <input type="text" required="required" name="Phone" onkeyup="checkEmpty()" />

Upvotes: 0

Views: 417

Answers (2)

Tyr
Tyr

Reputation: 2810

Try this example code in a blank html page with jQuery linked:

<html>
    <head>
        <title>Example</title>
        <script type="text/javascript" src="jquery.min.js"></script>
    </head>
<body>
    <form>
        <label><strong>Full Name: &nbsp; &nbsp; &nbsp; &nbsp; </strong></label>&nbsp;&nbsp;
        <input type="text" required="required" onkeyup="checkEmpty()" name="FullName" style="width: 235px;" /><br />
        <br />
        <label><strong>Mailing Address: &nbsp;</strong></label>
        <input type="text" required="required" name="Address" onkeyup="checkEmpty()" style="width: 235px;" /><br />
        <br />
        <label><strong>Email: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</strong></label>&nbsp;
        <input type="text" required="required" style="width: 235px;" name="Email" onkeyup="checkEmpty()" /><br />
        <br />
        <label><strong>Phone Number: </strong></label>&nbsp;&nbsp;&nbsp;
        <input type="text" required="required" name="Phone" onkeyup="checkEmpty()" />
        <input type="button" id="checkbutton" value="deactivated" disabled/>
    </form>
</body>
<script type="text/javascript">
function checkEmpty() {
    var empty = false;
    $('form input:text').each(function () {
        console.log($(this).val());
        if ($(this).val().length === 0) {
            empty = true;
        }
    });

    if (empty) {
       $('#checkbutton').prop('disabled', 'disabled');
    } else {
        $('#checkbutton').prop('disabled', '');
    }

    console.log('count of textfields: ' + $('form input:text').length);
}
</script>
</html>

It works 100% for me. Look at the console to check the count for the textfields. If it's more then you expect, check your html if you have missed one. If all fields are filled, the button will be activated.

Upvotes: 1

M -
M -

Reputation: 28462

The problem is that you're assigning empty=true; when you read one input field, but then the loop will keep going and check further input fields. This means that if the first field is empty, but the second one isn't empty, your loop will not work. Try to break out of the .each() loop as soon as you find the first empty input.

function checkEmpty() {
        var empty = false;
        $('form input:text').each(function () {
            console.log($(this).val()); // Also, you forgot the ; here
            if ($(this).val().length === 0) {
                empty = true;
                return false; // Will break out of the .each() loop
            }
        });

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

Upvotes: 0

Related Questions