jQuery - Apply Multiple Events on Multiple Fields - NOT WORKING

Question

I have HTML like this:

<div class="row">
    <div class="col-sm-3">
        <div class="form-group">
            <div class="input-group">
                <span style="min-width:50px;" class="input-group-addon">Start Date</span>
                <input class="form-control" type="text" id="start_date_of_page" value="" placeholder="">
            </div>
        </div>
    </div>

    <div class="col-sm-3">
        <div class="form-group">
            <div class="input-group">
                <span style="min-width:50px;" class="input-group-addon">End Date</span>
                <input class="form-control" type="text" id="end_date_of_page" value="" placeholder="">
            </div>
        </div>
    </div>

    <div class="col-sm-3">
        <div class="form-group">
            <div class="input-group">
                <span style="min-width:50px;" class="input-group-addon">State</span>
                <select required id="state_id_of_page" name="state_id" class="form-control">
                    <option value="">Please Select State</option>
                    <option value=253>Alabama</option>
                    <option value=254>Alaska</option>
                    <option value=303>Alberta</option>
                    <option value=255>Arizona</option>
                    <option value=256>Arkansas</option>
                    <option value=304>British Columbia</option>
                    <option value=257>California</option>
                    <option value=258>Colorado</option>
                    <option value=259>Connecticut</option>
                    <option value=260>Delaware</option>
                    <option value=317>District of Columbia</option>
                    <option value=261>Florida</option>
                    <option value=262>Georgia</option>
                    <option value=263>Hawaii</option>
                    <option value=264>Idaho</option>
                    <option value=265>Illinois</option>
                    <option value=266>Indiana</option>
                    <option value=267>Iowa</option>
                    <option value=268>Kansas</option>
                    <option value=269>Kentucky</option>
                    <option value=270>Louisiana</option>
                    <option value=271>Maine</option>
                    <option value=305>Manitoba</option>
                    <option value=272>Maryland</option>
                    <option value=273>Massachusetts</option>
                    <option value=274>Michigan</option>
                    <option value=275>Minnesota</option>
                    <option value=276>Mississippi</option>
                    <option value=277>Missouri</option>
                    <option value=278>Montana</option>
                    <option value=279>Nebraska</option>
                    <option value=280>Nevada</option>
                    <option value=306>New Brunswick</option>
                    <option value=281>New Hampshire</option>
                    <option value=282>New Jersey</option>
                    <option value=283>New Mexico</option>
                    <option value=284>New York</option>
                    <option value=307>Newfoundland and Labrador</option>
                    <option value=285>North Carolina</option>
                    <option value=286>North Dakota</option>
                    <option value=314>Northwest Territories</option>
                    <option value=309>Nova Scotia</option>
                    <option value=315>Nunavut</option>
                    <option value=287>Ohio</option>
                    <option value=288>Oklahoma</option>
                    <option value=310>Ontario</option>
                    <option value=289>Oregon</option>
                    <option value=290>Pennsylvania</option>
                    <option value=311>Prince Edward Island</option>
                    <option value=312>Quebec</option>
                    <option value=291>Rhode Island</option>
                    <option value=313>Saskatchewan</option>
                    <option value=292>South Carolina</option>
                    <option value=293>South Dakota</option>
                    <option value=294>Tennessee</option>
                    <option value=295>Texas</option>
                    <option value=296>Utah</option>
                    <option value=297>Vermont</option>
                    <option value=298>Virginia</option>
                    <option value=299>Washington</option>
                    <option value=300>West Virginia</option>
                    <option value=301>Wisconsin</option>
                    <option value=302>Wyoming</option>
                    <option value=316>Yukon</option>
                </select>
            </div>
        </div>
    </div>

    <div class="col-sm-3">
        <div class="form-group">
            <div class="input-group">
                <span style="min-width:50px;" class="input-group-addon">Company</span>
                <select required id="company_id_of_page" name="company_id" class="form-control">
                    <option value="">Please Select a Company</option>
                    <option value=0>Data Before Company Divition</option>
                    <option value=2>HP-CA</option>
                    <option value=1>HP-NY</option>
                </select>
            </div>
        </div>
    </div>
</div>

And the jQuery for handling events is like this:

$(document).ready(function(e)
{
    $(document).on("keyup change", "#start_date_of_page #end_date_of_page #state_id_of_page #company_id_of_page", function()
    {
        alert("Working!!!!");
    });
}

But there is no alert when anything changes, so the jQuery events are not working.

Can anyone tell me what I am doing wrong?

Answer 1

$(function(){
    $(document).on('change', 'input,select', function(event){
        console.log(event);
        console.log( $(this).val() );
        alert("Working!!!!");
    });
});

Answer 2

Working fine you have Syntax error in your code

missing , in selectors

instead of

 "#start_date_of_page #end_date_of_page `#state_id_of_page #company_id_of_page"

use

"#start_date_of_page,#end_date_of_page,`#state_id_of_page,#company_id_of_page"

Working demo http://jsfiddle.net/ocptrcfu/1/