Execute request when changing value in a select

Question

Execute request when changing value in a select

Asked 5 years, 6 months ago

Viewed 72 times

0

I am unable to execute the function when changing the value of select, follow the code below.

index php.

<div class="input-group m-2">

        <!-- Combo Estados !-->
        <div class="input-group-prepend ml-3">
            <label class="input-group-text" for="cmb_estado_site">Estado</label>
        </div>
        <select class="custom-select" id="cmb_estado_site"></select>

        <!-- Combo Cidade !-->
        <div class="input-group-prepend ml-3">
            <label class="input-group-text" for="cmb_cidade_site">Cidade</label>
        </div>
        <select class="custom-select" id="cmb_cidade_site">
            <option selected="TODAS" >TODAS</option>
        </select>
    </div>

Function.js

$(document).ready(function() {

    $('#cmb_estado_site').click(function () {
        var estado = $('#cmb_estado_site').val();
        $.post('/lib/php/function.php',{action:'load-cidade', estado:estado},function (data) {
            $('#cmb_operadora_site').html(data);
        });
    });
}

the return of the post request is correct, tested by Postman, by debug is not entering the function, someone could inform me what I am doing wrong?

Shows what the $.post response format looks like, (which appears if I give you a console.log(date) within the method done ) so that we can build a more complete answer.

– José Guilherme Oliveira

2019/05/06 at 21:59
1

I was able to solve, the error was in the way I loaded the page, I was taking from another file the code of these combos, this after having already loaded the script, so I think I was not triggering the event, but thanks for the attention.

– Baagrel

2019/05/07 at 01:08

2 answers

2

Use the change() instead of click()

EDIT

As pointed out in the comments by José Guilherme Oliveira, the ID that receives the data is #cmb_operadora_site, but apparently it should be #cmb_cidade_site

1

And the ID that receives the data is #cmb_operadora_site, but it should not be #cmb_cidade_site?

– José Guilherme Oliveira

2019/05/06 at 18:41
Exactly José Guilherme Oliveira, I’ve changed this code so many times that I copied it wrong. javascript
$('#cmb_estado_site').change(function () {
 var estado = $('#cmb_estado_site').val();

 $.post("/lib/php/function.php", {action: "load-cidade", estado: estado})
 .done(function( data ) {
 $('#cmb_operadora_site').html(data);
 })
 .fail(function() {
 alert( "Ocorreu um erro!" );
 });
 });
 even this way is not working

– Baagrel

2019/05/06 at 19:10
seems not to be entering the function, I put a breakpoint inside the function and it is not being triggered

– Baagrel

2019/05/06 at 19:12

Browser other questions tagged javascript html html5 html-select jquery-select2

You are not signed in. Login or sign up in order to post.

by Thiago Krempser • **1,878** points · Answer 1 · 2019-05-06T18:53:17+00:00

I recommend you use the method done() to use the die from your endpoint and also use the method fail() to treat any possible error that may occur, such as a connection error. Also, change the click() for change(). Do so:

$(document).ready(function() {
    $('#cmb_estado_site').change(function () {

    $.post("/lib/php/function.php", {action: "load-cidade", estado: estado})
        .done(function( data ) {
            $('#cmb_operadora_site').html(data);
        })
        .fail(function() {
            alert( "Ocorreu um erro!" );
        });
    });
}