send different values to SELECT via jQuery

Question

I have a select box with cars and models.. When i select a car and model, i get prices for that cars.. Then i have a button to add a new car on the same form and page.. All this via jquery that sends id from car make to select query that returns all models.

The problem is, when i try to select the second car, i cant select a new make, because it uses the same id from the first make select option. So for my second car i get models from car make that i chosed on my first car...

my js:
$(document).ready(function(){
$("select#marca").change(function(){
var id = $("select#marca option:selected").attr('value');
$.post("select_type.php", {id:id}, function(data){
    $("select#modello").removeAttr("disabled");
    $("select#modello").html(data);
    });

$('select#modello').change(function () {
var gruppo = $(this).attr('rel');
var id_tipo = $(this).val();
var id_referente = <?php echo $data['idAffiliato'];?>//$('#id_referente').val();
if(id_referente != '') {
    $.ajax({
        url: '../handlers/handler_geo.php',
        type: 'GET',
        data: { 'action': 'getservizi', 'referente': id_referente, 'id_tipo': id_tipo, 'rnd': Math.random() },
        dataType: 'json',
        cache: false,
        success:function(data) {
                    // alert(JSON.stringify(data));
                    $('#elenco_servizi_'+gruppo).children().remove();
                    for(var c=0; c < data.length; c++) {
                    $('#elenco_servizi_'+gruppo).append('<li><input type="radio" rel="'+gruppo+'" class="validate[required] '+gruppo+'" name="servizi_'+gruppo+'[]" value="'+data[c].prezzo+'" title="'+data[c].id+'" /><span class="tipo-servizio">'+data[c].nome+'</span><span class="importo-servizio">&euro; '+data[c].prezzo+'</span></li>');
                    }
        },
        error:function(){
            alert('error');
        }
    });
    } 
else {
        alert('attenzione, nessun referente disponbile per il servizio richiesto');
        }
});   
});

and my forms

<h5>Marca auto</h5>
<select id="marca">
<option label=" "></option>
<?php Auto::ShowMarca(); ?>
</select>
<br><br>
<h5>Modello auto</h5>
<select id="modello" rel="cb_1" name="tipologie_auto[]" class="validate[required]">
</select>
<br><br>
<?php $autos = Auto::ShowModello(); ?>
<div class="clearfix"></div>
</div>

<div class="servizio" id="gruppo_cb_1">
<h5>servizio</h5>
<ul id="elenco_servizi_cb_1" class="elenco_servizi">
<li><span class="tipo-servizio">seleziona la tipologia di veicolo per vedere i servizi</span></li>
</ul>
<input type="hidden" id="servizi_cb_1" name="servizi_cb_1" />
<span class="totale">&euro; <label id="lbl_cb_1">0</label></span>
</div>
</div>



<!-- ******************** auto 2 ******************** -->
<div id="auto_2" style="display:none;">
<h4>auto 2</h4>
<div class="right-col-prentivatore-form">
<div class="tipologia-auto">
<h5>Marca auto</h5>
<select id="marca">
<option label=" "></option>
<?php Auto::ShowMarca(); ?>
</select>
<br><br>
<h5>Modello auto</h5>
<select id="modello" rel="cb_2" name="tipologie_auto[]" class="validate[required]">
</select>
<br><br>
<?php $autos = Auto::ShowModello(); ?>

<div class="clearfix"></div>
</div>
<div class="servizio">
<h5>servizio</h5>
<ul id="elenco_servizi_cb_2" class="elenco_servizi">
<li><span class="tipo-servizio">seleziona la tipologia di veicolo per vedere i servizi</span></li>
</ul>
<input type="hidden" id="servizi_cb_2" name="servizi_cb_2" />
<span class="totale">&euro; <label id="lbl_cb_2">0</label></span>
</div>
</div>
</div>

so i get an id from MAKE (marca) and send it to SELECT query to select_type.php.. So, for the second car i'm sending the same id... How to make independent select boxes for two cars? THX — Adrian C.
– Adrian C., Commented May 18, 2015 at 14:53
Don't remove the content of your question after you get an answer. — Taryn
– Taryn, Commented May 20, 2015 at 11:30

Maxime Mettey · Accepted Answer · 2015-05-19 09:26:35Z

1

You have two <select> elements with id="modello", and the same for id="marca", so your lines $("select#marca") and $('select#modello') will only take the first elements.

You have to reference these elements with a class.

Try this :

Your form :

<h5>Marca auto</h5>
<select class="marca">
<option label=" "></option>
<?php Auto::ShowMarca(); ?>
</select>
<br><br>
<h5>Modello auto</h5>
<select class="modello" rel="cb_1" name="tipologie_auto[]" class="validate[required]">
</select>
<br><br>
<?php $autos = Auto::ShowModello(); ?>
<div class="clearfix"></div>
</div>

<div class="servizio" id="gruppo_cb_1">
<h5>servizio</h5>
<ul id="elenco_servizi_cb_1" class="elenco_servizi">
<li><span class="tipo-servizio">seleziona la tipologia di veicolo per vedere i servizi</span></li>
</ul>
<input type="hidden" id="servizi_cb_1" name="servizi_cb_1" />
<span class="totale">&euro; <label id="lbl_cb_1">0</label></span>
</div>
</div>



<!-- ******************** auto 2 ******************** -->
<div id="auto_2" style="display:none;">
<h4>auto 2</h4>
<div class="right-col-prentivatore-form">
<div class="tipologia-auto">
<h5>Marca auto</h5>
<select class="marca">
<option label=" "></option>
<?php Auto::ShowMarca(); ?>
</select>
<br><br>
<h5>Modello auto</h5>
<select class="modello" rel="cb_2" name="tipologie_auto[]" class="validate[required]">
</select>
<br><br>
<?php $autos = Auto::ShowModello(); ?>

<div class="clearfix"></div>
</div>
<div class="servizio">
<h5>servizio</h5>
<ul id="elenco_servizi_cb_2" class="elenco_servizi">
<li><span class="tipo-servizio">seleziona la tipologia di veicolo per vedere i servizi</span></li>
</ul>
<input type="hidden" id="servizi_cb_2" name="servizi_cb_2" />
<span class="totale">&euro; <label id="lbl_cb_2">0</label></span>
</div>
</div>
</div>

Your JS :

$(document).ready(function(){
    $("select.marca").change(function(){
        var id = $(this).find("option:selected").attr('value');
        $.post("select_type.php", {id:id}, function(data){
            $(this).parent().find('select.modello').removeAttr("disabled");
            $(this).parent().find('select.modello').html(data);
        });
    });

    $('select.modello').change(function () {
        var gruppo = $(this).attr('rel');
        var id_tipo = $(this).val();
        var id_referente = <?php echo $data['idAffiliato'];?>//$('#id_referente').val();
        if(id_referente != '') {
            $.ajax({
                url: '../handlers/handler_geo.php',
                type: 'GET',
                data: { 'action': 'getservizi', 'referente': id_referente, 'id_tipo': id_tipo, 'rnd': Math.random() },
                dataType: 'json',
                cache: false,
                success:function(data) {
                    // alert(JSON.stringify(data));
                    $('#elenco_servizi_'+gruppo).children().remove();
                    for(var c=0; c < data.length; c++) {
                        $('#elenco_servizi_'+gruppo).append('<li><input type="radio" rel="'+gruppo+'" class="validate[required] '+gruppo+'" name="servizi_'+gruppo+'[]" value="'+data[c].prezzo+'" title="'+data[c].id+'" /><span class="tipo-servizio">'+data[c].nome+'</span><span class="importo-servizio">&euro; '+data[c].prezzo+'</span></li>');
                    }
                },
                error:function(){
                    alert('error');
                }
            });
        } else {
            alert('attenzione, nessun referente disponbile per il servizio richiesto');
        }
    });
});

I did not test, there might be other errors that I did not notice.

edited May 19, 2015 at 9:26

answered May 18, 2015 at 15:03

Maxime Mettey

3371 gold badge2 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Adrian C. Over a year ago

Thx alot,it worked. But when i select the make from second car, the first selected model get blank and loose his value... What can i do?

Maxime Mettey Over a year ago

Is there an online page where I can see your work ? Or is it possible to post your generated HTML code so I can test ? Because I can not have the datas with <?php Auto::ShowMarca(); ?> or other PHP lines.

Maxime Mettey Over a year ago

@Adrian I edited my JS in the answer, there was a formatting problem in the code, the first change event was not closed. Try it and if it does not work with this, can you please go on your page, press Ctrl+U to show the source of the page and copy/paste the HTML code of your form, with this I will test on my computer without needing your database.

Maxime Mettey Over a year ago

Did not understand your edit on my answer, do I have to delete the code ?

Adrian C. Over a year ago

just wanted to delete my question (resolved). Thank you for your time.

datchung · Accepted Answer · 2015-05-19 03:43:20Z

1

Use a different id for the second auto select. For example:

<select id="marca2">

Then re-use the JavaScript for auto 1 and replace the id marca with marca2. For example, here is how you can re-use the change function:

// Declare re-usable function that takes an id (eg. 'marca' or 'marca2')
var changeHandler = function(selectId) {
    var id = $('select#' + selectId + ' option:selected').attr('value');
    $.post('select_type.php', {id:id}, function(data) {
        $('select#modello').removeAttr('disabled');
        $('select#modello').html(data);
    });
};

// Change for marca
$("select#marca").change({ selectId: 'marca'},  function(event) {
    changeHandler(event.data.selectId);
});

// Change for marca2
$("select#marca2").change({ selectId: 'marca2'},  function(event) {
    changeHandler(event.data.selectId);
});

edited May 19, 2015 at 3:43

answered May 18, 2015 at 15:01

datchung

4,7161 gold badge37 silver badges32 bronze badges

2 Comments

Adrian C. Over a year ago

how to reuse that javascript?

Adrian C. Over a year ago

sorry, didn't understood.. i'm new to jquery.. Where i insert the change for marca and marca 2?

Collectives™ on Stack Overflow

send different values to SELECT via jQuery

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related