Formulaire dynamique avec jquery

bonjour à tous.

Alors voila. J'ai un petit formulaire qui demande à entrer un numéro:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="col-lg-10 col-md-10 mx-auto">
<div class="well" style="margin-top: 0%;margin-left: 10%">
                <label for="tournid"  class="h6"><span class="badge badge-warning badge-pill">Tournament ID</span></label>
                <form class="form-inline" id="lm2sformtournid">
                <input type="number" class="form-control-number-sm" type="number" id="tournid" placeholder="TournId" required data-error="Error">
 
        <button type="submit"  id="form-submit-ticker" class="btn-xs btn-success">SUBMIT</button>
        </form>
        <div class="col-sm mx-auto">
        <form id="lm2sformcourt">
        <div id="displaycourt"></div>
        </form>
        </div>
        </div>
        </div>

Le résultat de la requête renvoie une réponse en JSON via un script cgi:

Code:

[{"COURT":"Court A"},{"COURT":"Court B"},{"COURT":"Court C"},{"NULL":""}]

Puis la div "displaycourt" qui contient un formulaire devrait proposer les valeurs reçues en JSON:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("#displaycourt" ).html('<select id="lm2sformcourt">'
                        + '<option value="">Court list</option>'
                        + '<option value='
                        + data
                        + '>Court A</option>'
                        + '<option value='
                        + data
                        + '>Court B</option>'
                        + '<option value='
                        + data
                        + '>Court C</option>'
                        + '</select>'
                        //+ '<div class="btn-group" role="group" aria-label="Basic example">'
                        + '<button type="submit" id="form-submit-court" class="btn-xs btn-success">SUBMIT</button>'
                        + '</div>');

Voici le code complet de la partie JS/JQUERY:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function tournid(){
        var tournid = $("#tournid").val();
 
    $.ajax({
        type: "GET",
        url: "http://192.168.1.38:2929/cgi-bin/ticker.cgi",
        dataType: "json",
        data: "tournid=" + tournid ,
        success: function( data ){
        var COURT = JSON.stringify(data) ;
 
       $("#displaycourt" ).html('<select id="lm2sformcourt">'
                        + '<option value="">Court list</option>'
                        + '<option value='
                        + COURT
                        + '>Court A</option>'
                        + '<option value='
                        + COURT
                        + '>Court B</option>'
                        + '<option value='
                        + COURT
                        + '>Court C</option>'
                        + '</select>'
                        //+ '<div class="btn-group" role="group" aria-label="Basic example">'
                        + '<button type="submit" id="form-submit-court" class="btn-xs btn-success">SUBMIT</button>'
                        + '</div>');
 
   }
     });
}

Mais voila, c’a ne fonctionne pas pour des raisons qui vont pour vous être évidentes (pas pour moi vu
mon faible niveau dans ce domaine .... la réponse obtenue est toujours : [{"NULL":""}].

Auriez vous une suggestion ?

D'avance merci

Bonjour,

Ce que tu reçois dans success est un objet JSON, donc il va falloir le parcourir pour extraire ses valeurs :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
success:function(data){
    //var COURT = JSON.stringify(data) ; supprimes cette ligne
   // Vider le div #displaycourt pour ensuite le remplir avec un select vide
    $('#displaycourt').html('<select id="lm2sformcourt"></select>');
    //Parcourir l'objet json
    $.each(data,function(k,v){
       if(v.COURT)
	   $('#displaycourt select')
	   .append('<option value="'+v.COURT+'">'+v.COURT+'</option>');
    });
}

merci toufik pour ta réponse.

Le select fonctionne bien, ou je place le bouton submit ds ton code ?

Code:

<button type="submit" id="form-submit-court" class="btn-xs btn-success">SUBMIT</button>

juste avant le each :

Code:

1
2
3
 
$('#displaycourt').html('<select id="lm2sformcourt"></select><button type="submit" id="form-submit-court" class="btn-xs btn-success">SUBMIT</button>');
$.each(....);

nickel, tu es le king de jquery toufik !

merci beaucoup , je cloture