Trouver valeur id dans frère ascendant

**boteha** · 09/08/2020, 14h24

Bonjour,

J'ai ce code html (simplifié).

Code HTML :

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

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&eacute;e &gt;&gt; <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 :

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

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.

**javatwister** · 09/08/2020, 16h53

Entre nous recherche plutôt l'id correspondant vu qu'il n'y a que la 1ere lettre qui change.

**boteha** · 09/08/2020, 17h01

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 :

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

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

Cela fonctionne.

**javatwister** · 10/08/2020, 10h11

Oui, pas mal;

Sinon:

Code javascript :

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

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;

**boteha** · 10/08/2020, 11h38

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.

**javatwister** · 10/08/2020, 11h46

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

Code javascript :

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

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

**boteha** · 10/08/2020, 11h49

Bien compris.

Encore merci.

**NoSmoking** · 10/08/2020, 16h21

Bonjour,

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"> !?!

**boteha** · 10/08/2020, 17h01

Bonjour NoSmoking,

Je confirme que c'est simplifié.

Il y a x lignes avec boutons radio.

Par ailleurs il y a un bouton submit.

**NoSmoking** · 10/08/2020, 17h51

Si les radios sont liés, même name, alors cela devrait le faire pour une mono sélection.

**boteha** · 10/08/2020, 18h26

Bonjour,

C'est le cas.

Le code de Javatwister ou le mien fonctionnent pour chaque ligne et quel soit le nombre de lignes.

**javatwister** · 10/08/2020, 19h29

Mais NoSmoking a raison sur la nécessité (?) d'un événement blur, par exemple;

**boteha** · 10/08/2020, 20h10

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.

**boteha** · 14/08/2020, 21h56

Bonjour,

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

Code HTML :

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

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&eacute;e &gt;&gt; <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&eacute;connectorisation</label> sur <input type="text" size="2" name="prec[824][F]" id="F824" /> fibres <span id="at824">(d&eacute;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é.

**boteha** · 27/08/2020, 20h19

Bonjour,

J'ai trouvé une solution :

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
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.

**boteha** · 09/09/2020, 22h42

Bonjour,

Je coche Résolu mais il existe peut-être une meilleure solution.

**javatwister** · 10/09/2020, 12h19

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

et encore! Les champs du tableau n'ont pas besoin d'id...

**boteha** · 10/09/2020, 13h12

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).

**javatwister** · 10/09/2020, 13h27

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.

**boteha** · 10/09/2020, 14h11

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.

Trouver valeur id dans frère ascendant

JavaScript

Discussions similaires

Partager

Partager