Naviguer d'un élément du DOM à un autre avec .next()

Version imprimable

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:

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:

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:

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

Merci de votre aide

22/07/2020, 08h11
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:

1 2 3 function fct (nom) { return "pre"+nom; }
si c'est l'élément du DOM que tu veux récupérer
Code:

1 2 3 function fct (nom) { $("#pre"+nom); }
Si le but est un operateur de selection relatif :
Code:

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:

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

1 pièce(s) jointe(s)

Merci SpaceFrog pour toutes tes propositions (surtout si tu ne vois pas l’intérêt de ma demande :mrgreen:).
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:

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

Citation:

Envoyé par SpaceFrog

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:

$(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à
Pièce jointe 575589
Qu'est-ce qu'il faudrait modifier (syntaxe ? pas possible ?) à

Code:

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:

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:

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 -

23/07/2020, 08h03
SpaceFrog

en relatif personnellement j'utilise plutôt

Code:

.closest()

moins gourmand que

Code:

.nextAll()
24/07/2020, 17h26
ClayStone

1 pièce(s) jointe(s)

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 :
Pièce jointe 575784
Je m'en sers mal?

Sinon,

Citation:

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() ?

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:

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:

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:

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:

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;
         }
    });
});

26/07/2020, 11h25
ClayStone

Wow ! Merci Toufik ! Ça c'est un coup de main !
Je regarde tout ça et je reviens (ma cafetière ne va pas te dire merci)

Citation:

Envoyé par Toufik83

Puis je ne vois pas pourquoi tu mets des balises <script> dans le code html

Moi non plus :aie:.
Enfin si, j'en ai bien une petite idée :

Citation:

Envoyé par ClayStone #3

c'est p't'être parce que je ne fais pas les choses comme il faudrait ?
27/07/2020, 01h29
Toufik83

J'ai oublié un truc très important, c'est que l'ajax doit envoyer le ID du nom sélectionné et pas la valeur, car il pourrait bien y avoir plusieurs utilisateurs avec le même nom sélectionné.

Ce qui signifie que ta démarche n'est pas toute à fait propre, car on peut par exemple taper "Craig" comme nom alors qu'ils existent plusieurs "Craig" dans la base de donnée, tu ne sauras pas qui c'est...

A mon avis tu n'as même pas besoin de ajax pour atteindre le résultat voulu, pourquoi ne pas afficher le nom ET le prénom dans la liste déroulante, puis lorsqu'on sélectionne une personne tu fais un split(" ") sur la chaîne pour récupérer un tableau ["nom","prénom"] et là tu n'as qu'à utiliser les indexes 0 et 1 du tableau pour remplir le <input id="nomX" /> et le <select id="prenomX">.
27/07/2020, 19h29
ClayStone

@Toufik83

Ton post #6
- C'est ta dernière proposition que j'ai retenue. C'est parfait. Merci pour l'outil this, le .call() et l'argument double "#nom1,#nom2" (je sais pas comment on dit).

- Après lecture de la doc sur $(document).ready, j'en comprends l'utilité, pas trop le fonctionnement. :?
:question: Faut-il donc y placer tous les scripts js qui sont déclenchés par les éléments du DOM ou qui les modifient ?
:question: Peut-on le placer dans un fichier functions.js et appeler ce fichier dans le head?
(le dév., c'est un métier! moi j'apprends sur le tas...)

Ton post #8

Citation:

Envoyé par Toufik83

J'ai oublié un truc très important, c'est que l'ajax doit envoyer le ID du nom sélectionné et pas la valeur, car il pourrait bien y avoir plusieurs utilisateurs avec le même nom sélectionné.
...
pourquoi ne pas afficher le nom ET le prénom dans la liste déroulante, puis lorsqu'on sélectionne une personne tu fais un split(" ") sur la chaîne pour récupérer un tableau ["nom","prénom"] et là tu n'as qu'à utiliser les indexes 0 et 1 du tableau pour remplir le <input id="nomX" /> et le <select id="prenomX">.

Merci pour l'avertissement, mais, en fait, les noms et prénoms sont dans la même table, et ils sont accompagnés de critères supplémentaires (pour éviter de confondre deux Daniel Craig).
L'id unique d'une personne est retournée par les <select id="prenomx"> (qui affichent le prénom ET les critères supplémentaires). C'est cet id que j'exploite après pour remplir x autres tables.
Les filtres $.autocomplete() puis majLis()t sur les noms ne servent qu'à éviter des listes de plusieurs centaines d'identités pour beaucoup moins (mais beaucoup trop pour un <select >) de noms de famille.

Citation:

Envoyé par Toufik83

... un split(" ") sur la chaîne pour récupérer un tableau ["nom","prénom"] et là tu n'as qu'à utiliser les indexes 0 et 1 du tableau pour remplir le <input id="nomX" /> et le <select id="prenomX">

Ça en revanche, je le garde sous le coude, ça va bien m'aider ailleurs.
27/07/2020, 23h18
Toufik83

Bonjour,

Citation:

Envoyé par ClayStone

:question: Faut-il donc y placer tous les scripts js qui sont déclenchés par les éléments du DOM ou qui les modifient ?

.

Oui, il faut mettre toutes les instructions js dans une seule fonction $(document).ready() et dans la balise <head>.

Citation:

Envoyé par ClayStone

:question: Peut-on le placer dans un fichier functions.js et appeler ce fichier dans le head?

Oui, c'est bien possible, et ce fichier doit aussi englober le code dans un $(document).ready().

En gros, document ready de jQuery est l'équivalente de DOMContentLoaded en javascript pur, et le code ne sera pas évaluer qu'après que le document est bien chargé et analysé (css,js,html...).
28/07/2020, 08h14
ClayStone

Merci à vous deux pour vos propositions et explications
:resolu: