通过切换选择中的选项，在不同的表列中显示不同的数据

Question

My problem is the following:

I have an ajax function that, according to the option (of a select) selected, associate a record in a database and populate another input, i.e. a p tag.

I have two td tags that have to be populated. Different data has to be displayed, so i want that, according to the input on the first select, on the second td there will be input y, in the third input z and so on... how can it be possible? If i try to append data to more than one tag, the same data is displayed in all the td columns.

Here i attach my code

Main.php

$(document).ready(function() {  
    $('#L_NAME0').change(function() {
        var L_NAME0 = $("#L_NAME0").val();
        $.ajax({
        type: "POST",
        url: "elaborazione_dati.php",
        data: "L_NAME0=" + L_NAME0,
        dataType: "html",
        success: function(msg) {
            $("#L_AMT0").html(msg);
            $("#L_DESSERV").html(msg); 
        },
        error: function() {
            alert("Call failed");
        }
    });
 });    
});

Form.php

                                     <label for="L_DESSERV">Descrizione del servizio</label>
<p class="L_DESSERV" id="L_DESSERV"></p>
        </td

        <td class="h4">  
                                     <label for="L_AMT0">Costo del servizio</label>
<p class="L_AMT0" id="L_AMT0"></p>                
        </td>

elaborazione_dati.php

$tipologia_selezionata = $_POST['L_NAME0'];

$sql = "SELECT * FROM acquisti WHERE durata = '$tipologia_selezionata' ";
$q = $db->prepare($sql);
$q->execute();

$q->setFetchMode(PDO::FETCH_ASSOC);

while($caratt = $q->fetch()) {
    echo '<input readonly="readonly" type="hidden" name="L_NAME0" value="'.$caratt['durata'].'"/>';
    echo '<input readonly="readonly" type="hidden" name="L_AMT0" value="'.$caratt['prezzi'].'"/>';
    echo $caratt['prezzi']; ?> &euro; <?php
} 

Any suggestions?

Thanks a lot!

Answer 1

You need to split the results and the easiest way is to return JSON from PHP and then process it on your js code to generate the fields and text. So in PHP something like:

while($caratt = $q->fetch()) {
    $result->durata = $caratt[duratta];
    $result->prezzi = $caratt[prezzi];
}
echo json_encode($result); 

then in your js something like:

   $('#L_NAME0').change(function() {
        var L_NAME0 = $("#L_NAME0").val();
        $.ajax({
        type: "POST",
        url: "elaborazione_dati.php",
        data: "L_NAME0=" + L_NAME0,
        dataType: "json",
        success: function(data) {

            $("#L_AMT0").html("<input type='hidden' name='L_NAME0' value='"+data.duratta+"'/>"+data.duratta);
            $("#L_DESSERV").html("<input type='hidden' name='L_DESSERV' value='"+data.prezzi+"'/>"+data.prezzi+"&euro;"); 
        },
        error: function() {
            alert("Call failed");
        }
    });

However it seems confusing that you put another input named L_NAME0 - the id of your select control, but hey, it's your code... :)