Discussion :

[ClayStone]

Bonjour,
J'aimerais récupérer l'id (ou name) d'un select à partir d'un autre élément du DOM, l'input précédent en l'occurence.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<fieldset  name="fieldset1">
    <legend>saisie1</legend>
        <label for="nom1">Nom*</label><br />
        <input type='text' id="nom1" name="nom1" />
        <script>fct1('#nom1');</script> //affecte #prenom1
        <br />
        <label for="prenom1">Prénom</label><br />
        <select id="prenom1" name="prenom1" required > 
            <option value="">Sélectionnez un nom ci-dessus</option>
        </select>
        <br />
</fieldset>
<fieldset  name="fieldset2">
    <legend>saisie2</legend>
        <label for="nom2">Nom*</label><br />
        <input type='text' id="nom2" name="nom2" />
        <script>fct2('#nom2');</script> // affecte #prenom2
        <br />
        <label for="prenom2">Prénom</label><br />
        <select id="prenom2" name="prenom2" required > 
            <option value="">Sélectionnez un nom ci-dessus</option>
        </select>
        <br />
</fieldset>

Pour 'factoriser(?)' fct1 et fct2 (dont seules les valeurs respectives #prenom1 et #prenom2 diffèrent) en une seule fonction fct, j'ai tenté d'obtenir #prenom à partir de #nom pour que fct('#nom') trouve le bon #prenom

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
function fct (nom) {
prenom= $(nom).next().attr('id'); // renvoie la valeur undefined et le type undefined
...
}

J'ai essayé d'atteindre #prenom depuis #nom de plusieurs façon à partir de cette page de tuto mais, je n'arrive jamais à #prenom.
exemple :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

$(nom).nextAll().filter(.'input')[0].attr('id')

Merci de votre aide

[SpaceFrog]

Si je comprend bien à partir de nom1 tu veux récupérer prenom1 ?
Ce qui m'échappe c'est pourquoi vouloir récupérer l'id ???

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function fct (nom) {
return "pre"+nom;
}

si c'est l'élément du DOM que tu veux récupérer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function fct (nom) {
$("#pre"+nom);
}

Si le but est un operateur de selection relatif :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function fct (nom) {
prenom= $("#"+nom).closest('select').val(); // renvoie la valeur à condition qu'une option soit sélectionnée...
}

Si tu as toujours la correspondance nomx => prenomx

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function fct (nom) {
prenom= $("#pre"+nom).val();
...
}

[ClayStone]

Merci SpaceFrog pour toutes tes propositions (surtout si tu ne vois pas l’intérêt de ma demande ).
C'est bien l'id et pas la valeur que je cherche à obtenir (cf 3-)

1 - Je n'avais pas pensé à aller au plus simple : manipuler la chaîne de l'id.
Ta 1ère proposition devient (j'ai des # qui se baladent)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function fct (nom) {
return "#pre"+nom.substring(1,nom.lenght);
}

Et ça roule.

2- C'est ta 3eme proposition qui répondrait le mieux à mon besoin

Si le but est un operateur de selection relatif

Plus général, et avec l'id et pas la valeur).
[EDIT] La solution après 3l de café et avoir remis mes lunettes :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

$(nom).nextAll('select');

Et ça roule aussi.

Puisque le but est de modifier l'élément select à partir de l'input, aucune option n'est sélectionnée. Donc closest('select') n'est pas définit (j'ai bon?).
Je pensais utiliser $(':input') trouvé là

Qu'est-ce qu'il faudrait modifier (syntaxe ? pas possible ?) à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var id_nom = '#nomx';
$(id_nom).closest(':input').attr('id'); // renvoie #nomx

pour obtenir #prenomx ?


3- Quant à l’intérêt d'obtenir l'id, c'est p't'être parce que je ne fais pas les choses comme il faurait ?
Si veux m'indiquer une autre marche à suivre, je suis preneur
Le code (très) simplifié

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<input type='text' id="nom1" name="nom1" />
<script>autocompl('#nom1', Source.php);</script> //affecte #prenom1
<br />
<label for="prenom1">Prénom</label><br />
<select id="prenom1" name="prenom1" required >

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
function autocompl(champ, Source){
    $(champ).autocomplete({
    source : Source,
    minLength : 2,
    select : function(event, ui){
           $(champ).val(ui.item.label); //forcer l'affichage de ui.item.label dans l'input
           majList (champ); // à la place de majList1 (ui.item.label) ou majList2 (ui.item.label};
           return false;
                }
    });
}
function majList (champ) {
    var nom = $(champ).val();
    // var champsuivant = "#pre"+champ.substring(1,champ.lenght);   // trouvé gràce à toi en 1
    var champsuivant = $(Champ).nextAll('select');                                    // c'est ça que je voulais !
    $.ajax(
        {
        type:'POST',
        url:'ajax.php',
        data:'lbl_nom='+nom, 
        success:function(html)                   
                {
                $(champsuivant).html(html); 
                }
            }); 
    }

P.s. j'attends un peu avant de marquer résolu, des fois qu'une suggestion arrivait à propos de 3 -

[SpaceFrog]

en relatif personnellement j'utilise plutôt

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.closest()

moins gourmand que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.nextAll()

[ClayStone]

Euh...
.closest(), me renvoie vers les parents (fieldset ou form), quels que soient les sélecteurs en argument.
Et c'est aussi ce que j'avais compris ici :

Je m'en sers mal?

Sinon,

moins gourmand que

.closest() ne renvoie/recherche qu'un élément alors que .nextAll() en renvoie/recherche plusieurs? c'est ça ?
Je n'arrive pas à faire fonctionner .next()...
J'ai bien .siblings('select'), mais ça doit être aussi gourmand que .nextAll() ?

[Toufik83]

Bonjour,

$.next() n'est pas la bonne solution pour ce cas, c'est $.siblings que tu dois utiliser afin d'arriver à ton select à partir d'un élément voisin.

Puis je ne vois pas pourquoi tu mets des balises <script> dans le code html, il fallait plutôt mettre ton code js dans la partie <head> et le tout dans $(document).ready().

Supprime les <script> de ton code html et utilise ceci :

Avec siblings :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
 
    <script>
        function fct(nom) {
           let prenom;
           $(nom).each(function(){
              prenom=$(this)
             .siblings('select')//récupère le voisin <select>
             .attr('id');
             console.log( prenom);
          });
        }
       
       $(document).ready(function(){
           fct("#nom1,#nom2");//factoriser les deux inputs
       });
   </script>
</head>
<body><!--Ton code html --></body>
</html>

Avec next ():

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
 
    <script>
         function fct(nom) {
             let prenom;
            $(nom).each(function(){
                prenom=$(this)
              .next()//pour le 1er <br />
              .next('label')//pour le label
              .next('br')//encore une fois le <br />
              .next('select')//enfin le <select>
              .attr('id');
              console.log( prenom);
          });
       }
       $(document).ready(function(){
          fct("#nom1,#nom2");//factoriser les deux inputs
       });
   </script>
</head>
<body><!--Ton code html --></body>
</html>

Sinon si tu veux gérer l'auto-complétion de tous les inputs #nomX, tu peux utiliser seulement une fonction et passer le mot clé this en paramètre à l'appelle de majList dans select : ( et toujours dans le <head> et dans le même $(document).ready ) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function majList (input) {
    var nom = $(input).val();
    var champsuivant = $(input).siblings('select');  
    console.log('majList :',nom,champsuivant.attr('id'));//affiche les valeurs de nom et le id du champsuivant dans la console 
    $.ajax({
        type:'POST',
        url:"ajax.php",
        data:'lbl_nom='+nom, 
        success:function(html) {
              $(champsuivant).html(html); 
        },
        error:function(err){//il faut toujours utiliser error ou fail !
            alert("Erreur majList :"+err);
        }  
    });
}
$(document).ready(function(){
        //autre code js...
         $('#nom1,#nom2').autocomplete({//séparer #nom1 et #nom2 par une virgule.
             source : "Source.php",
             minLength : 2,
             select : function(event, ui){
                 console.log('this :',this); //this ici vaut l'input sur lequel on clique pour choisir dans sa liste des suggestions (soit #nom1 ou #nom2)
                 $(this).val(ui.item.label); 
                 majList(this);//utiliser this
                 return false;
            }
        });
});

Ou bien sans aucun paramètre dans majList() et utiliser call avec le contexte this :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function majList () {
    var nom = $(this).val();
    var champsuivant = $(this).siblings('select');  
    console.log('majList :',nom,champsuivant.attr('id'));//affiche les valeurs de nom et le id du champsuivant dans la console 
    $.ajax(.....);
}
$(document).ready(function(){
    $('#nom1,#nom2').autocomplete({
         ......,
         select:function(event,ui){
              $(this).val(ui.item.label);  
              majList.call(this); //appeler majList avec le contexte "this" lors du select
              return false;
         }
    });
});