Ajax does not work when it comes from a select form

Question

Ajax does not work when it comes from a select form

Navigation

#1 by (0 votes)
#2 by (-1 votes)

2

When #sectionChooser comes from Ajax does not work to select #rua, where would the problem be?

Html

 <div class="col-sm-6">
                            <label for="Planos">Planos</label>

              <select name="Planos" id="sectionChooser" class="form-control valid" aria-invalid="false">              

              <option value="">Selecione</option>                   
    <option value="1">Diamante</option><option value="2">Ouro</option><option value="3">Prata</option><option value="4">Light</option><option value="5">Free</option><option value="19">Link</option>                   
              </select>         

    <div class="panel" id="1" style="display: block;">    

    <div class="col-sm-12">
                                    <label><b>Diamante</b></label>
                                    </div>
                                    </div>
<div class="col-sm-6">
                        <label for="Bairro">Bairro</label>
                        <select class="form-control valid" name="bairro" id="bairro3" required="" aria-invalid="false">
    <option value="">Selecione</option>                 
<option value="1">teste bairro</option><option value="2">teste bairro 2 3</option><option value="3">ação bairros</option><option value="4">Centro</option>


    </select> 
                    </div>

<div class="col-sm-6">
                        <label for="Rua">Rua</label>



<select class="form-control" name="rua" id="rua" required="">





    </select> 




                    </div>

I'm trying like this, but not yet.

$(document).ready(function(){

    $(document).on('change', '#sectionChooser', function(){
        var myID = $(this).val();
        $('.panel').each(function(){
            myID === $(this).attr('id') ? $(this).show() : $(this).hide();
            console.log("ok");
        });
    })


    $(document).on('change', '#bairro', function(){
        var bairroID = $(this).val();

        if(bairroID){
            $.ajax({
                type:'POST',
                url:'ajax_data2.php',
                data:'bairro_id='+bairroID,
                success:function(html){
                    $('#rua').html(html);
                    console.log("ok");
                }
            }); 
        }else{
            $('#rua').html('<option value="">Select categoria first</option>');

        }
    });

});

jquery ajax

asked by anonymous 08.05.2018 / 18:48

2 answers

Mysql sorting by specific value by returning all values [duplicate] Subscriptions return the 'INAPP_PURCHASE_DATA' null using 'In-app Billing V3'

score 0 · Answer 1

The problem is that you are selecting the wrong id : instead of #bairro , the correct would be #bairro3 , see:

                                                  id correto
                                                       ↓
<select class="form-control valid" name="bairro" id="bairro3" required="" aria-invalid="false">

When using Ajax, instead of using .change events, use .on :

$(document).on('change', '#sectionChooser', function(){

and

$(document).on('change', '#bairro', function(){

So you will not have delegation problems with elements dynamically inserted into the page.

The code should look like this:

$(document).ready(function(){

    $(document).on('change', '#sectionChooser', function(){
        var myID = $(this).val();
        $('.panel').each(function(){
            myID === $(this).attr('id') ? $(this).show() : $(this).hide();
        });
    })


    $(document).on('change', '#bairro3', function(){
        var bairroID = $(this).val();

        if(bairroID){
            $.ajax({
                type:'POST',
                url:'ajax_data2.php',
                data:'bairro_id='+bairroID,
                success:function(html){
                    $('#rua').html(html);
                }
            }); 
        }else{
            $('#rua').html('<option value="">Select categoria first</option>');

        }
    });

});

score -1 · Answer 2

-1

To get the <option> selected:

$('#sectionChooser option:selected').val();

08.05.2018 / 18:59