Trouver valeur id dans frère ascendant

Version imprimable

Bonjour,

J'ai ce code html (simplifié).
Code:

1 2 3 4 <tr> <td><input type="radio" name="super" value="COMTFV006SM-D" id="ACOMTFV006SM-D" /></td> <td>6 fibres, OS2 (9 / 125), Str. serrée >> <input type="text" size="4" name="unit[COMTFV006SM-D]" id="UCOMTFV006SM-D" /> m</td> </tr>
Au click dans l'input type = text je veux que l'input type = radio soit automatiquement sélectionné (checked).

j'ai fait ce que j'ai pu avec ce code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 const tex = document.querySelectorAll ('input[type="text"]'); for (let i = 0; i < tex.length; i++) { tex[i].addEventListener('click', function () { const id_radio = this.parentNode.parentNode.children.children.id; document.getElementById (id_radio).checked=true; } ); }
Ne marche pas.
Si vous pouvez me dire où est l'erreur, merci d'avance.

09/08/2020, 16h53
javatwister

Entre nous recherche plutôt l'id correspondant vu qu'il n'y a que la 1ere lettre qui change.
09/08/2020, 17h01
boteha

Bonjour Javatwister,

Bonne suggestion, merci.
Il faut que je vérifie si c'est toujours la première lettre qui change mais je crois que c'est le cas.

Autrement :

Code:

const id_Radio = this.parentNode.parentNode.querySelector('input[type=radio]').id;

Cela fonctionne.
10/08/2020, 10h11
javatwister
Oui, pas mal;

Sinon:
Code:

1 2 3 4 tex[i].addEventListener('click', function () { document.getElementById(this.id.replace(/^./,"A")).checked=true; }
Mais je ne sais pas si le nommage est aussi rationnel dans tout ton document;
10/08/2020, 11h38
boteha

Bonjour Javatwister,

Merci de ton suivi.

On prend la référence fabricant et on ajoute devant A ou U pour différencier les deux id.

On peut donc d'en sortir avec substr.

Comme d'habitude j'attends avant de cocher résolu.

non mais je t'assure, tu peux copier le dernier code;

Code:

1
2
3
4
5
6
7
8
9
10
11
const tex = document.querySelectorAll ('input[type="text"]');
 
for (let i = 0; i < tex.length; i++)
{	
tex[i].addEventListener('click', function ()
{
document.getElementById(this.id.replace(/^./,"A")).checked=true;
}
);
 
}

10/08/2020, 11h49
boteha

Bien compris.

Encore merci.
10/08/2020, 16h21
NoSmoking

Bonjour,

Citation:

J'ai ce code html (simplifié).

j'espère qu'il est bien simplifié car j'en conclu que si je clique dans l'<input> je n'ais plus d'espoir de décocher le <input type="radio"> !?!
10/08/2020, 17h01
boteha

Bonjour NoSmoking,

Je confirme que c'est simplifié.

Il y a x lignes avec boutons radio.

Par ailleurs il y a un bouton submit.
10/08/2020, 17h51
NoSmoking

Si les radios sont liés, même name, alors cela devrait le faire pour une mono sélection.
10/08/2020, 18h26
boteha

Bonjour,

C'est le cas.

Le code de Javatwister ou le mien fonctionnent pour chaque ligne et quel soit le nombre de lignes.
10/08/2020, 19h29
javatwister

Mais NoSmoking a raison sur la nécessité (?) d'un événement blur, par exemple;
10/08/2020, 20h10
boteha

Je suis à l'écoute de vos suggestions.

Mais là il s'agit d'un formulaire qui ne pose aucun problème d'ergonomie.

Je vous enverrai un lien quand le boulot sur les javascripts sera terminé, de fait je n'ai pas trop le temps de m'en occuper pendant la semaine.

Bonjour,

L'objet est d'externaliser les javascript de ce code :
Code:

1 2 3 4 5 6 7 <td> <input type="radio" name="super" value="12-OS1-S-EXT-DG" id="A12-OS1-S-EXT-DG" onclick="this.form.elements['U12-OS1-S-EXT-DG'].focus();this.form.elements['F824'].value='12';" /> </td> <td>12 fibres, OS1 (9 / 125), Str. serrée >> <input type="text" size="4" name="unit[12-OS1-S-EXT-DG]" id="U12-OS1-S-EXT-DG" onclick="if(this.form.elements['A12-OS1-S-EXT-DG'].checked==false || this.form.elements['F824'].value=='') {this.form.elements['A12-OS1-S-EXT-DG'].checked=true;this.form.elements['F824'].value='12';}" /> m </td> <p class="at"><input type="checkbox" name="prec[824][at]" value="BO" id="prec824" /><label for="prec824"> Je demande une préconnectorisation</label> sur <input type="text" size="2" name="prec[824][F]" id="F824" /> fibres <span id="at824">(décocher cette ligne pour annuler votre demande)</span></p>
Cliquer dans le radio donne le focus au text de la même ligne et renseigne une valeur dans le text name="prec[824][F] plus bas.
Cliquer dans le text sélectionne le radio sur la même ligne et renseigne une valeur dans le text name="prec[824][F] plus bas.
Cela marche très bien avec les phrases magiques dans le html

Ce codepen illustre mon problème d'externalisation.

Clic dans le radio : tout marche
Clic dans le text : sélectionne bien le radio mais ne donne pas la valeur à name="prec[824][F] plus bas.

Bien sûr la structure html a un peu changé.

Bonjour,

J'ai trouvé une solution :

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
31
32
33
34
 
const idPreco = document.getElementById ('F'+ ca_id);
 
const tex = document.querySelectorAll ('table.compcab input[type=text]');
 
for (let i = 0; i < tex.length; i++)
{	
tex[i].addEventListener('click', function ()
{
const Radio = this.parentNode.parentNode.querySelector('input[type=radio]');
const idImg = Radio.id.split ('--');
 
idPreco.value=idImg[2];
document.getElementById(Radio.id).checked=true;
}
);
}
 
 
const rad = document.getElementsByName ('super');
 
for (let i = 0; i < rad.length; i++)
{	
rad[i].addEventListener('click', function ()
{
 
const idRadio = 'U'+this.value;
const idImg = this.id.split ('--');
 
document.getElementById (idRadio).focus ();
idPreco.value= idImg[2];
}
);
}

Je fais donc deux boucles en calculant un peu les mêmes choses dans chaque boucle.

Je me demande s'il n'est pas possible de faire une seule boucle.

Mais cela marche, voir le codepen.

09/09/2020, 22h42
boteha

Bonjour,

Je coche Résolu mais il existe peut-être une meilleure solution.
10/09/2020, 12h19
javatwister

Franchement, je simplifierais comme ça... http://javatwist.imingo.net/prisedetete.htm

et encore! Les champs du tableau n'ont pas besoin d'id...
10/09/2020, 13h12
boteha

Bonjour,

Merci pour ton code, je regarde ce week-end à tête reposée.

Le click dans le checkbox doit aussi provoquer le focus dans le text, ton code ne le fait pas (mais il fait tout le reste).
10/09/2020, 13h27
javatwister

Citation:

Envoyé par boteha

Le click dans le checkbox doit aussi provoquer le focus dans le text, ton code ne le fait pas (mais il fait tout le reste).

C'est inutile; d'ailleurs, le champ devrait être en readonly puisqu'il doit correspondre uniquement à une valeur sélectionnée.
10/09/2020, 14h11
boteha

Le text name="unit[...] sert à indiquer la longueur du câble.
Le text name="prec[...] sert à indiquer le nombre de fibres à connecter.

Ce n'est pas du tout le même paramètre.
10/09/2020, 16h26
javatwister

Le problème est que tu n'écoutes pas ce qu'on te dit...
L'attribut name est différent de l'attribut id;
10/09/2020, 22h09
boteha

Bonjour,

Citation:

Envoyé par javatwister

L'attribut name est différent de l'attribut id;

Je le sais.

Pour le radio je dois avoir un id car il y a un label.

Pour le text :

name="unit[12-OS1-L-EXT-AD]"

Je ne vois pas comment cibler ce name.

Donc j'ajoute :

id="U12-OS1-L-EXT-AD"

Citation:

Envoyé par boteha

Pour le radio je dois avoir un id car il y a un label.

Ah bon? Il n'apparaît pas dans ton code!
Et puis il suffit d'insérer ton input dans un label et l'association se fait automatiquement;

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
// le tableau s'appelle "t"
// collection des boutons radio du tableau
const r=document.querySelectorAll("#t input[type=radio]"),
// collection des champs texte du tableau
txt=document.querySelectorAll("#t input[type=text]"),
// champ texte optionnel
opt=document.querySelector("#F824");
// quand tu sélectionnes un radio, le nombre correspondant s'affiche en bas 
// et tu donnes le focus au champ texte de la même ligne
r.forEach((v,i)=>{v.addEventListener("click",()=>{opt.value=parseInt(v.value);txt[i].focus()})})
// quand tu cliques dans un champ texte, le radio correspondant est sélectionné
// et le nombre correspondant au radio s'affiche en bas
txt.forEach((v,i)=>{v.addEventListener("click",()=>{r[i].checked=true;opt.value=parseInt(r[i].value)})})

11/09/2020, 11h48
boteha

Bonjour Javatwister,

Merci de ton suivi.

Je regarde ce week-end à tête reposée.
13/09/2020, 15h04
boteha

Bonjour Javatwister,

Ton code fonctionne très bien, voir ce codepen.

Je ne connaissais pas la fonction parseInt, si je comprends elle récupère le chiffre entier dans une chaine.

parseInt (6-OS1-S-EXT-DG)
// Retourne 6

Tu ne peux pas le savoir mais cette valeur est la référence produit fournie par le fabricant sur laquelle je n'ai pas de contrôle.

Pour un autre fabricant, ce sera B1223A-Preco
Et la valeur à sortir est 4...

C'est pourquoi j'utilise l'id pour la valeur de #F824

value="B1223A-Preco" id="AB1223A-Preco--4"

Pour me passer de l'id, il faudrait modifier la valeur de value par exemple comme suit :

value="B1223A-Preco--4"
(en supposant qu'aucune référence fabricant ne comprenne '--' mais le problème est le même avec id et c'est facile à contrôler)

IL faudrait autre chose que parseInt pour récupérer "4" mais c'est facile.

Cela oblige bien sûr à une correction côté serveur pour à l'inverse transformer "B1223A-Preco--4" en "B1223A-Preco" mais là encore c'est facile.

Tout cela pour supprimer mes id...
Adepte d'un code html le plus simple possible je réfléchis à cette piste.

Encore merci de ton suivi.
13/09/2020, 16h59
javatwister

Ben écoute, si tu as la solution, c'est parfait;
13/09/2020, 17h54
boteha

Bonjour javatwister,

Sur ce coup j'ai l'impression de savoir ce qu'il faut faire mais tes codes m'ont beaucoup aidé.

Encore merci.