Injecter une ligne devant ou dans un formulaire

Version imprimable

03/05/2024, 16h57
herveD

Injecter une ligne devant ou dans un formulaire

Bonjour
Je souhaiterais injecter une ligne HTML du genre :

Citation:

"Saisissez une nouvelle localisation url..."

entre* le champ "lieux" et la carte (ou peut-être au-dessus même si cela me semble avoir moins de sens ) dans l'onglet Lieu (qui sont liés dans l'extension du développeur )
jtest-ext.88h.ovh/index.php?option=com_dpcalendar&view=form&Itemid=165
@+

Bonjour,
j'ai déplacé vers le forum JavaScript car je suppose que tu n'as pas accès au HTML sinon la demande serait « farfelue » !

Cela pourrait se traduire par
Code:

1 2 3 4 5 6 7 8 9 // récup. élément de référence const elRef = document.querySelector(".control-group.dp-field-location-ids"); // création élément à ajouter, par exemple const newElement = document.createElement("DIV"); newElement.textContent = "Saisissez une nouvelle localisation url..." ; // insertion en dessous elRef.after(newElement); // insertion au dessus elRef.before(newElement);

04/05/2024, 12h54
herveD
Bonjour
Effectivement, c'est du code HTML généré par joomla.

J'ai inséré le code mais je ne vois pas d'effet même si cela a bien l'air d'être intégré dans le fichier
https://jtest-ext.88h.ovh/media/templates/site/cassiopeia_jtestext/js/user.js?fb535b

Initialement je pensai que c'était possible avec du CSS ~ comme ceci mais qui ne fonctionne pas !
Code:

1 2 3 #jform_location_ids-lbl ::after { content: '[ content2 ]'; }

Citation:

J'ai inséré le code mais je ne vois pas d'effet même si cela a bien l'air d'être intégré dans le fichier

suivant la positon d'intégration du script il peut être nécessaire d'insérer celui-ci dans un document.addEventListener("DOMContentLoaded", soit

Code:

1
2
3
4
5
6
7
8
9
10
11
document.addEventListener("DOMContentLoaded", () => {
  // récup. élément de référence
  const elRef = document.querySelector(".control-group.dp-field-location-ids");
  // création élément à ajouter, par exemple
  const newElement = document.createElement("DIV");
  newElement.textContent = "Saisissez une nouvelle localisation url..." ;
  // insertion en dessous
  elRef.after(newElement);
  // insertion au dessus
  elRef.before(newElement);
});

si c'est uniquement pour ajouter du texte sans plus de valeur ajoutée tu peux effectivement le faire en CSS via :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.com-dpcalendar-eventform .dp-control, .com-dpcalendar-eventform .control-group {
  display: flex;
  margin-bottom: 5px;
  flex-wrap: wrap;    /* pour passage à la ligne */
}
/*  ajout avant l'élément */
.control-group.dp-field-location-ids:before {
  content: "Saisissez une nouvelle localisation url...";
  width: 100%;
}
/*  ajout à la suite */
.control-group.dp-field-location-ids:after {
  content: "Saisissez une nouvelle localisation url...";
}

04/05/2024, 13h50
herveD

Merci pour ces 2 possibilités
Cela fonctionne. Néanmoins ce que je souhaitais c'est d'utiliser l'attribut de lien ahref pour que l'internaute ouvre directement le formulaire de création de lieu.
hors j'ai l'impression que le HTML n'est pas pris en compte. On voit le retour avec les balises <b> ..
04/05/2024, 16h32
NoSmoking

Citation:

hors j'ai l'impression que le HTML n'est pas pris en compte. On voit le retour avec les balises <b> ..

effectivement j'avais prévenu que c'était pour du texte seulement. Donc oublie le CSS !

Si tu veux ajouter du HTML il te faut, par exemple, passer JavaScript et la propriété innerHTML à la place de textContent.
remplace :

Code:

newElement.textContent = "Saisissez une nouvelle localisation url..." ;

par

Code:

newElement.innerHTML = 'Lieu <b>correspondant</b> vers <a href="https://jtest-ext.88h.ovh/">lien formulaire</a>' ;
05/05/2024, 19h30
herveD

Bonsoir

Parfait, celà fonctionne :D Encore un truc que je n'aurai probablement pas trouvé tout seul
Merci encore