CODEWITHSUNDEEP
javascriptjqueryhtml
Mark
Mark

Reputation: 4873

How can I have multiple condition in 1 if statement

I'm trying to hide a button until both select boxes have an item select.

<select id="comType">
    <option>-- Select --</option>
    <option>Call</option>
    <option>Fax</option>
    <option>Email</option>
</select>
<select id="comDirection">
    <option>-- Select --</option>
    <option>Incoming</option>
    <option>Outgoing</option>    
</select>

<a href="#" id="button_that_displays_only_when_both_selects_have_input">Next</a>

What I'm currently using, but I know is not right.

<script>
$(document).ajaxSuccess(function () {
    if ($("#comType").change()) || ($("#comDirection").change()))
    { $("#button_that_displays_only_when_both_selects_have_input").show()}
});
</script>

It would be an added bonus if this could ensure actual selection, as in, not allow the first select option to count as they are just placeholders....

Thanks, Mark

Upvotes: 1

Views: 82

Answers (2)

Michael Besteck
Michael Besteck

Reputation: 2423

This solution interprets the first option ("-- Select --") as invalid, independent of it's and the other options textual content.

Tested with jQuery 1.8.1 and 2.0.3, with browsers Firefox 24.0/Linux, Opera 12.16/Linux, Chrome 29.0.1547.76/Linux.

<!DOCTYPE html>
<html>
<head>
    <title>Option select</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="PATH_TO_jQuery"></script>
    <script type="text/javascript">

        function bothSelectsAreValid() {
            return $("#comType")[0].selectedIndex > 0 && $("#comDirection")[0].selectedIndex > 0;
        }

        function setButtonVisibility() {
            if (bothSelectsAreValid())
                $("#button_that_displays_only_when_both_selects_have_input").show();
            else
                $("#button_that_displays_only_when_both_selects_have_input").hide();
        }

        $(document).ready(function() {
            $("#comType, #comDirection").on('change', function() {
                setButtonVisibility();
            });
            setButtonVisibility(); // needed if browser presets the selected values on reload
        });
    </script>
    <style type="text/css">
        #button_that_displays_only_when_both_selects_have_input { display : none; }
    </style>
</head>
<body>
    <select id="comType">
        <option selected="selected">-- Select --</option>
        <option>Call</option>
        <option>Fax</option>
        <option>Email</option>
    </select>
    <select id="comDirection">
        <option selected="selected">-- Select --</option>
        <option>Incoming</option>
        <option>Outgoing</option>    
    </select>
    <a href="#" id="button_that_displays_only_when_both_selects_have_input">Next</a>
</body>
</html>

Upvotes: 0

bcmcfc
bcmcfc

Reputation: 26765

// take both inputs and bind this function to the change event of both
$("#comType, #comDirection").on('change', function () {
    // show the button if they both have a value
    if ($("#comType").val().length > 0 && $("#comDirection").val().length > 0) {
        $("#button_that_displays_only_when_both_selects_have_input").show();
    }
});

As the condition is checking the value lengths, once you correctly set up your options it will only show the button when the selects have actual values selected.

i.e.

value's length is 0, button will not show:

<option value="">Placeholder</option>

value's length is 3, so the button will show (if the other side of the condition is also satisfied):

<option value="fax">Fax</option>

Upvotes: 1

Related Questions