Trouver valeur id dans frère ascendant

Version imprimable

Voir 40 message(s) de cette discussion en une page

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.

Voir 40 message(s) de cette discussion en une page