On change event for mobile devices

Question

I found a couple of answers for this question on the web but none of them seems to be clear enough. I have a form on my php website that contains 3 select tags, the first one has specific options, while the second and the third have no options until something is selected from the first one. Here's the html:

<form class="filterForm">
    <fieldset>
        <div class="form-group col-sm-4">
            <select id="selectBrand" class="form-control">
                <?php foreach ($brands_gr as $brand_gr) { ?> // brands_gr is the array containing the options
                    <option value="<?= $brand_gr[0]["name"]?>"><?= $brand_gr[0]["name"]?></option>
                <?php } ?>
            </select>
        </div>
        <div class="form-group col-sm-4">
            <select id="selectCar" class="form-control">
            </select>
        </div>
        <div class="form-group col-sm-4">
            <select name="spec" id="selectSpec" class="form-control">
            </select>
        </div>
        <div class="col-sm-4">
            <button type="submit" class="btn btn-default"> submit </button>
        </div>
    </fieldset>
</form>

Here's the javascript:

function showcars(){
    var selected = $("#selectBrand").find(":selected").text();
        var selectedIndex = $("#selectBrand").prop('selectedIndex');
            $("#selectCar").find("option").remove().end();
            brands_gr[selectedIndex - 1][1].forEach(function(element) {
                $("#selectCar").append($("<option></option>")
                            .attr("value",element[0]["name"])
                            .text(element[0]["name"] + " - " + element[0]["year"])); 
            }, this);
            showspecs(selectedIndex - 1);
    return false;
}

$("#selectBrand").change(function() {
    showcars();
});

And I have a second function for the second select tag. The code works perfectly on desktop devices, but not on mobile phones. I have tried it on several android phones and it seems like the .change() event is not triggered on mobile. I already tried using onchange="" attribute with the select tag instead of an event listener, and also .blur() instead of .change(), but nothing works.

Any suggestions on how to make my form work on mobile devices will be greatly appreciated as I have been banging my head against the wall for several hours.

Note: I am using only Bootstrap and JQuery, and I prefer not to include any additional libraries.

a quick copy and paste of your js into jsbin.com shows warnings; that you should use dot notation, i.e instead of element[0]["name"] you should use element[0].name, same for year. I'd start there. Same could appy for your php? Anyway start there and if you're still having problems, come back — Rachel Gallen, Jun 29 '16 at 14:43
You might want to try `$( document ).on( "change", "#selectBrand", function( event, ui ) { //Do stuff }` — Gjermund Dahl, Jun 29 '16 at 14:45
@RachelGallen thanks for the note. I fixed it but it there's no difference. — David Hanna, Jun 29 '16 at 17:05
@GjermundDahl Thanks for the suggestion but the problem persists. — David Hanna, Jun 29 '16 at 17:05

score 0 · Accepted Answer · answered Jun 30 '16 at 16:10

I found out what was wrong, I doubt that someone else will encounter the same problem but I'll post the answer just in case someone does. I had another function in my code that I didn't include here. This function takes 1 parameter and this parameter has a default value like this:

function foo($parameter = x){
   //do stuff here
}

It seems like this way of specifying a default value for the parameter isn't good for mobile browsers (both Android and IOS) and it somehow was breaking my entire code not only the on change event but also all other on click events. Luckily I didn't necessarily need the default value so I removed it:

function foo($parameter){
   //do stuff here
}

And now everything works as expected. Hope this helps anyone else!

In fact, you can set default argument values like that, see this thread, http://stackoverflow.com/a/894877/2335441. However, if the value you tried to set was x, the code will break as the x should be surrounded by quotation marks. — Gjermund Dahl, Jun 30 '16 at 21:19

On change event for mobile devices

1 Answers1