CODEWITHSUNDEEP
htmlajaxselect
M_M
M_M

Reputation: 501

Pass a select value in ajax

I'm trying to pass a select value in my ajax function.

my html code: 

    <select class="form-control" id="exampleFormControlSelect1" class="selectUser">
                    <?php foreach($logs as $key => $value){ ?>
                        <option value="<?php echo $value['username'];?>"><?php echo $value['username'];     ?></option>
                    <?php } ?>
                </select>

and my JS code: 

   $('select.selectUser').change(function(){
        alert('Select field value has changed to' + $('select.selectUser').val());

        $.ajax({
            type: 'GET',
            url: "Panier/loadPanier",
            data: {username: $('select.selectUser').val()},
            success: function(result){
                var data1 = JSON.parse(result);
                alert(data1.username) ;
            },

        });

    });

but the first alert('Select field value has changed to' + $('select.selectUser').val()); is not generating any alert and I'm not getting any error in my console.

Can you tell me what's wrong?

Upvotes: 0

Views: 41

Answers (2)

random
random

Reputation: 7901

You have added two class attributes to the select element - class="form-control" and class="selectUser".

<select class="form-control" id="exampleFormControlSelect1" class="selectUser">

Therefore, it is ignoring your second class - class="selectUser".

$('select.selectUser').on('change', function() {
    console.log($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control selectUser" id="exampleFormControlSelect1">
  <option value="1" selected="selected">One</option>
  <option value="2">Two</option>
</select>

Upvotes: 1

Giang D.MAI
Giang D.MAI

Reputation: 244

Let's try with $('#exampleFormControlSelect1').on('change', function(){

Upvotes: 1

Related Questions