11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Incrémenter un bouton en JS

Bonjour,
J'ai ce code pour afficher autant de données qu'il y a dans un tableau.

<?php
// Set session variables
setlocale(LC_TIME, 'fra_fra');
$timezone  = +2; //(GMT +2:00) EST (F.R. & PARIS)
$date = '['.gmdate("j/m/Y H:i:s", time() + 3600*($timezone+date("I"))).']';
$version = "[Version_2.02]";
$code= "[ADC_END]";

// Traitement du code pour le checksum.
$chaine = $_SESSION['Start'];
//le checksum ressemble à un CRC32.
//En php il suffit d'appeler la fonction crc32 :
$checksum = crc32($chaine);
// Cela génère un entier.
// Représentation héxadécimal:faire un dechex :
$str = dechex($checksum);
$_SESSION['END'] ='['.$str.']'.$date.$version.$code;
$_SESSION["Balises3"] = $_SESSION['Balises3'].$_POST['balise'];
if(isset ($_SESSION['TabInter'])){
	for($ligne=0;$ligne<sizeof($_SESSION['TabInter']);$ligne++)
	{
		$_SESSION['ValueInter']= $_SESSION['Start'].$_SESSION['TabInter'][$ligne].$_SESSION['Balises3'].$_SESSION['Balises4'].'['.$str.']'.$date.$version.$code;
		
	?>
		<table align="center">
    <tr align="center">
        <td>
        <form id="form-copier" >
        <!-- //champ de saisie de texte -->
        <textarea class="js-inter" id="inter"  cols="80" rows="5"disabled="disabled"><?php print_r($_SESSION['ValueInter']) ?></textarea>
        <!-- //Bouton copier -->
        <input type="button" class="js-copybtn" value="Copier la chaîne" onclick="this.disabled = 'disabled';this.type='checkbox';this.checked='checked'">
    </form>
        </td>
    </tr>
</table>
        <script>
            (() => {
            const button = document.querySelector('.js-copybtn');
 
            button.addEventListener("click", () => {
  const elemText = document.getElementById("inter");
  // supprimer l'attribut disabled si existe
  const disabled = elemText.getAttribute("disabled");
  elemText.removeAttribute("disabled");
  // selectionne le contenu
  elemText.focus();
  elemText.select();
  // copy
  document.execCommand("copy");
  // réactive l'attribut disabled si existe
  disabled && elemText.setAttribute("disabled", disabled);
  // remise focus sur Btn
  button.focus();

 
                try {
                    if (document.execCommand('copy')) {
                        var alerte="Champs Work Notes* "
                         alert('La chaine des Balises a été copié ! \n\r Il suffit de la coller dans le ' + alerte + 'de ServiceNow.');
                        //document.location.replace('pagefin.php');
                    }
                } catch (err) {
                    alert('Pas possible de copier.');
                }
 
                window.getSelection().removeAllRanges();
            });
       
        })();
        </script>
	<?PHP
	}

}

?>


Cela affiche bien autant de textarea qu'il faut avec les bonnes infos.
MAIS:
Le code pour copier la textarea suivant son bouton doit changer d'ID.
Je ne sais pas comment faire pour changer l'Id à chaque construction de texaera par la boucle for.

Merci.
Salut,

de la même manière que tu affiches ta variables de session, tu dois pouvoir rajouter l'affichage de ta variable $ligne à l’intérieur de l'id de ton texte-area pour avoir un numéro qui change à chaque fois et qui complète ton id.


<textarea class="js-inter" id="inter<?php print_r($ligne) ?>"  cols="80" rows="5"disabled="disabled"><?php print_r($_SESSION['ValueInter']) ?></textarea>
Bonjour Mathieuu,
J'ai modifié mon code, mais je ne sais pas comment importer la variable dans le JS.

if(isset ($_SESSION['TabInter'])){
	for($ligne=0;$ligne<sizeof($_SESSION['TabInter']);$ligne++)
	{
	
		$_SESSION['ValueInter']= $_SESSION['Start'].$_SESSION['TabInter'][$ligne].$_SESSION['Balises3'].$_SESSION['Balises4'].'['.$str.']'.$date.$version.$code;
			
	?>
		<table align="center">
    <tr align="center">
        <td>
        <form id="form-copier" >
        <!-- //champ de saisie de texte -->
        <textarea id="<?php print_r('tx-'.$ligne); ?>" cols="80" rows="3"disabled="disabled"><?php print_r($_SESSION['ValueInter']) ?></textarea>
        <!-- //Bouton copier -->
        <input type="button" class="<?php print_r('bt-'.$ligne) ?>" id="<?php print_r('bt-'.$ligne); ?>" value="Copier la chaîne" onclick="this.disabled = 'disabled';this.type='checkbox';this.checked='checked'">
    </form>
        </td>
    </tr>
</table>
        <script>
            (() => {
		
            const button = document.querySelector(.<?php print_r('bt-'.$ligne) ?>);
 
            button.addEventListener("click", () => {
  const elemText = document.getElementById(<?php print_r('tx-'.$ligne); ?>);
  // supprimer l'attribut disabled si existe
  const disabled = elemText.getAttribute("disabled");
  elemText.removeAttribute("disabled");
  // selectionne le contenu
  elemText.focus();
  elemText.select();
  // copy
  document.execCommand("copy");
  // réactive l'attribut disabled si existe
  disabled && elemText.setAttribute("disabled", disabled);
  // remise focus sur Btn
  button.focus();
                try {
                    if (document.execCommand('copy')) {
                        var alerte="Champs Work Notes* "
                         alert('La chaine des Balises a été copié ! \n\r Il suffit de la coller dans le ' + alerte + 'de ServiceNow.');
                        //document.location.replace('pagefin.php');
                    }
                } catch (err) {
                    alert('Pas possible de copier.');
                }
                 window.getSelection().removeAllRanges();
            });
       
        })();
</script>


Merci pour ton aide et ta patience.
Modifié par wisefun77 (30 Aug 2022 - 14:51)
Bonjour,
J'ai trouvé.

if(isset ($_SESSION['TabInter'])){
	for($ligne=0;$ligne<sizeof($_SESSION['TabInter']);$ligne++)
	{
	
		$_SESSION['ValueInter']= $_SESSION['Start'].$_SESSION['TabInter'][$ligne].$_SESSION['Balises3'].$_SESSION['Balises4'].'['.$str.']'.$date.$version.$code;
			
	?>
		<table align="center">
    <tr align="center">
        <td>
        <form id="form-copier" >
        <!-- //champ de saisie de texte -->
        <textarea id="<?php print_r('tx-'.$ligne); ?>" cols="80" rows="3"disabled="disabled"><?php print_r($_SESSION['ValueInter']) ?></textarea>
        <!-- //Bouton copier -->
        <input type="button" class="<?php print_r('bt-'.$ligne) ?>" value="Copier la chaîne" onclick="this.disabled = 'disabled';this.type='checkbox';this.checked='checked'">
    </form>
        </td>
    </tr>
</table>
<?PHP

?>
        <!-- Script bouton  -->
    <script>
        (() => {
            const button = document.querySelector('.<?php print_r('bt-'.$ligne) ?>');

            button.addEventListener("click", () => {
                const elemText = document.getElementById("<?php print_r('tx-'.$ligne); ?>");
                // supprimer l'attribut disabled si existe
                const disabled = elemText.getAttribute("disabled");
                elemText.removeAttribute("disabled");
                // selectionne le contenu
                elemText.focus();
                elemText.select();
                // copy
                document.execCommand("copy");
                // réactive l'attribut disabled si existe
                disabled && elemText.setAttribute("disabled", disabled);
                // remise focus sur Btn
                button.focus();
                try {
                    if (document.execCommand('copy')) {
                        var alerte = "Champs Work Notes* "
                        alert('La chaine des Balises a été copié ! \n\r Il suffit de la coller dans le ' + alerte + 'de ServiceNow.');

                    }
                } catch (err) {
                    alert('Pas possible de copier.');
                }

                window.getSelection().removeAllRanges();
            });

        })();
    </script>


Merci pour ton aide et ton savoir.
Modifié par wisefun77 (30 Aug 2022 - 15:09)
Salut,

histoire de chipoter un peu :
de la manière dont tu inclus du php dans ton code html, j'aurai tendance à ne pas inclure du "html" dans le php et qu'il ne fasse que la partie "qui change" (du coup bt-1 bt-2 bt-3,ce qui change c'est juste le numéro pas bt-)

Par exemple cette ligne m'a l'air plus difficilement lisible car tu inclus un bout de html dans ton code ce qui entraîne une alternance de guillemets et oblige a reflechir en fonction de la coloration syntaxique que l'on a :
const button = document.querySelector('.<?php print_r('bt-'.$ligne) ?>');

Ce qui peut s'écrire plus simplement : 
const button = document.querySelector('.bt-<?php print_r($ligne) ?>');


Cela ne change pas grand chose mais je trouve que le code devient plus intuitif à lire.

Et pareil pour l'autre ligne du coup : 
const elemText = document.getElementById("<?php print_r('tx-'.$ligne); ?>");

const elemText = document.getElementById("tx-<?php print_r($ligne); ?>");


Bon courage Smiley smile
Meilleure solution
Bonjour Mathieuu,
Merci beaucoup pour cette explication.
a écrit :
Cela ne change pas grand chose mais je trouve que le code devient plus intuitif à lire.

Je vais l'utiliser.
Merci pour tout.
Bon courage à toi.
Sujet clos
Aller à