How to prevent click event from executing when selecting an option?

Question

I have a select that is dynamically filled when entering a store and a date range, I configure it so that that select is completed with the employees once that same select is pressed with the click event. The problem arises that when I load the list of employees and select any one, the ajax request is executed again and it automatically changes me to the first one in the list. An example would be, when I click on the select it shows me a, b and c, when I click on c it selects a. I have read on some page about using the one event but the problem is that if I change the store I still see the employees of the store that was selected first, I also tried with the change event and directly it is not filled with the employees, I tried with e.preventDefault, e.stopImmediatePropagation and e.stopPropagation (), and it doesn't work. I share the code to see if you can help me. Thanks a lot.

$(document).ready(function(){
                $("#user").on("click", function(e) {
                        var dFec = $('#dFec').val();
                        var hFec = $('#hFec').val();
                        var store= $('#store').val();
                    fillUser(store,dFec,hFec);
                });
            });
function fillUser(store,dFec,hFec){
            var request = $.ajax({
                                url: "getUser.php",
                                method: "POST",
                                data: {store: store, dFec:dFec, hFec:hFec},
                                dataType: "html",
                                error: function(){
                                    alert("error");
                              },
                            });
                            request.done(function( msg ) {
                                $( "#user" ).html(msg);
                                });
                    }

HTML

            <h5 class="h3 font-weight-normal text-white text-center bg-info" style="width:35%; margin:auto;">Store</h5>
            <div class="form-group text-center">
                <select name="store" id="store" class="form-control form-control-sm" style="width:35%; margin:auto;">
                    <option value="0">Select Store</option>
                        <?php while($row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC)) { ?>
                            <option value="<?php echo $row['id_store']; ?>"><?= $row['nameStore']; ?></option>
                        <?php } ?>
                </select>
            </div>
            <h5 class="h3 font-weight-normal text-white text-center bg-info" style="width:35%; margin:auto;">Fecha</h5>     
            <table class="table table-sm text-center" style="margin:auto; width:35%">
                <tr>
                    <th>From</th>
                    <th>To</th>
                </tr>
            <tr>
                <div id="picker"></div>
                <td><input name="dFec" id="dFec" readonly="readonly" style="text-align:center"></td>
                <div id="picker1"></div>
                <td><input name="hFec" id="hFec" readonly="readonly" style="text-align:center"></td>
            </tr>
    <div id="other">
    </div>
</table>

            <h5 class="h3 font-weight-normal text-white text-center bg-info" style="width:35%; margin:auto;">user</h5>
                <div class="form-group text-center">
                    <select name="user" id="user" class="form-control form-control-sm" style="width:35%; margin:auto;"></select>
                </div>

getUsuario.php

//query and stmt are at beggining of the code
    $store = $_POST['store'];
    $dFec = date("Ymd", strtotime($_POST['dFec']));
    $hFec = date("Ymd", strtotime($_POST['hFec']));

    while ($rowB = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC))
    {
        $html.= "<option value='".$rowB['user']."'>".$rowB['user']."</option>";
    }
        echo $html;

Typically when I load a select from AJAX I don't load it on click. I load it when a condition is met. For example if you rely on the store and date range to fetch the employees, I would populate the select after the date range is filled in. — mikeroq, Dec 02 '20 at 01:43
I think your problem might be Chrome-specific, as I recently ran into this too. By default, Chrome now prevents `preventDefault()` from preventing defaults... See [this answer](https://stackoverflow.com/a/45120858/1270789) for how to reenable `preventDefault()`. — Ken Y-N, Dec 02 '20 at 01:50
How could I do that? for example, run the query and fill the users select when the date fields are filled — Guillermo Rubio, Dec 02 '20 at 03:21
@KenY-N I tried on firefox and safari but it doesn't work either — Guillermo Rubio, Dec 02 '20 at 03:23
Is `#user` a select? Could you also post the HTML to further visualize this? — dork, Dec 02 '20 at 04:17
Why are you using a `click` event in the first place, with a select field? Handling the `change` event usually makes much more sense. — CBroe, Dec 02 '20 at 08:34
@CBroe because with the change event, dont fill the select, it is only filled with the click event. How could I make the ajax request run and fill the select once data was entered in the other 3 fields (store, dfec and hfec)? — Guillermo Rubio, Dec 02 '20 at 15:54

score 1 · Answer 1 · answered Dec 02 '20 at 21:15

change some things and get it to work this way, I hope it will serve someone else who needs it. I thank you for your collaboration. Regards

            $(document).ready(function(){
                $("#store").change(function(){
                        var dFec = $('#dFec').val();
                        var hFec = $('#hFec').val();
                        var store= $('#store').val();
                        fillUser(store,dFec,hFec);
                    });
                }); 

            $(document).ready(function(){
                $("#hFec").change(function(){
                        var dFec = $('#dFec').val();
                        var hFec = $('#hFec').val();
                        var store= $('#store').val();
                        fillUser(store,dFec,hFec);
                    });
                }); 
                
            $(document).ready(function(){
                $("#dFec").change(function(){
                        var dFec = $('#dFec').val();
                        var hFec = $('#hFec').val();
                        var store = $('#store').val();
                        fillUser(store,dFec,hFec);
                    });
                });

How to prevent click event from executing when selecting an option?

1 Answers1