Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Candidat au Club
    Ajouter une ligne dans un formulaire et incrémenter les valeurs
    Bonjour,
    Je préviens je suis assez néophyte en la matière

    Je cherche à réaliser un script pour faciliter l'ajout de tableaux dans un Mediawiki.
    L'idée est via un formulaire HTML de remplir les champs pour ensuite générer un code Mediawiki qu'il n'y aura plus qu'à copier coller dans l'édition de la page Mediawiki.
    Jusque là ça va et ça fonctionne. Voici le code :
    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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    <?php
    if (isset($_REQUEST['save'])) {
    	$inputs = filter_input_array(INPUT_POST, array(
    		'page_name' => FILTER_SANITIZE_ENCODED,
    		'leftcol' => FILTER_SANITIZE_ENCODED,
    		'rightcol' => FILTER_SANITIZE_ENCODED,
    		'image_format' => FILTER_SANITIZE_ENCODED,
    		'line_content' => FILTER_UNSAFE_RAW,
    	));	
     
    	$page_name = $inputs['page_name']; 
    	$leftcol = $inputs['leftcol']; 
    	$rightcol = $inputs['rightcol']; 
    	$image_format = $inputs['image_format']; 
    	$line_content = $inputs['line_content']; 
     
    	echo '<pre>
    	{| align="center" width="90%" " border="1" cellspacing="0" cellpadding="5"
    	!&lt;center&gt;';echo "$leftcol";echo'&lt;/center&gt
    	!width="95%"|&lt;center&gt';echo"$rightcol";echo'&lt;/center&gt
    	|------------------------------------------------------------
    	|[[image:';
    	echo"$page_name";echo '_01.';echo "$image_format";echo']]
    	|';echo"$line_content";echo'
    	|------------------------------------------------------------
    	|}
    	</pre>';
    }
     
    ?>
     
    <form method="post">
    <fieldset>
    	<p><label for="page_name">Nom de la page : </label><input type="text" name="page_name" id="page_name" /></p>
    	<p><label for="leftcol">Colonne de gauche : </label><input type="text" name="leftcol" id="leftcol" /></p>
    	<p><label for="rightcol">Colonne de droite : </label><input type="text" name="rightcol" id="rightcol" /></p>
    	<p>
    		   Indiquer le format des images :<br />
    		   <input type="radio" name="image_format" value="jpg" id="jpg" /> <label for="jpg">.jpg</label><br />
    		   <input type="radio" name="image_format" value="png" id="png" /> <label for="png">.png</label><br />
    		</p>
    	<label for="line_content">Contenu de la ligne</label><textarea name="line_content" id="line_content"></textarea>
    </fieldset>
    <fieldset>
    	<input type="submit" name="save" value="G&eacute;n&eacute;rer" />
    	<input type="reset" value="Reinitialiser" />
    </fieldset>
    </form>

    Là où ça se complique c'est que je voudrais faire en sorte de mettre un bouton qui permet de rajouter une ligne au tableau (donc rajouter un champ textarea) et rajouter +1 au nom du fichier image
    Ce qui ferait ajouter au texte affiché lors de la validation du formulaire :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    |[[image:';
    	echo"$page_name";echo '_02.';echo "$image_format";echo']]
    	|';echo"$line_content2";echo'
    	|------------------------------------------------------------

    puis
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    |[[image:';
    	echo"$page_name";echo '_03.';echo "$image_format";echo']]
    	|';echo"$line_content3";echo'
    	|------------------------------------------------------------


    Et là j'avoue que je galère donc si quelqu'un peut m'éclairer ça serait top
    En espérant avoir été clair dans les explications

    Bien cordialement.

  2. #2
    Membre émérite
    Salut,

    Est-ce que la page doit être rechargée au moment du clic sur le bouton qui ajoute des lignes au tableau ou non ?

  3. #3
    Candidat au Club
    Bonjour,

    Honnêtement peu importe. C'est juste un script qui sera utilisé en local. Donc ça sera en fonction de ce qui est le plus simple à réaliser.

  4. #4
    Rédacteur/Modérateur

    Bonjour,

    ça ne sert à rien de mettre des echo partout : ça devient illisible.
    Autant :
    • construire l'output avec la syntaxe Heredoc (en mettant les varaibles PHP entre accolades {$var})
    • afficher à la fin

    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
    // -----------
    // Construction output
    	$output = <<<HTML
    	{| align="center" width="90%" border="1" cellspacing="0" cellpadding="5"
    	!&lt;center&gt;{$leftcol}&lt;/center&gt
    	!width="95%"|&lt;center&gt{$rightcol}&lt;/center&gt
    	|------------------------------------------------------------
    HTML;
    // syntaxe Heredoc : https://www.php.net/manual/fr/language.types.string.php#language.types.string.syntax.heredoc
    // important : la ligne contenant l'identifiant de fin (ici : HTML) ne doit contenir aucun autre caractère, mis à part un point-virgule (<img src="images/smilies/icon_wink.gif" border="0" alt="" title=";)" class="inlineimg" />.
     
    	$output .= <<<HTML
    	|[[image:
    	{$page_name}_01.{$image_format}]]
    	|{$line_content}
    	|------------------------------------------------------------
    	|}
    HTML;
    // -----------
    // Affichage
    	echo '<pre>'.$output.'</pre>';

    Si on veut rajouter un morceau de code, il suffit de l'écrire entre :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    	$output .= <<<HTML
     
    HTML;


    important : la ligne contenant l'identifiant de fin (ici : HTML) ne doit contenir aucun autre caractère, mis à part un point-virgule (.
    HTML; : Bien vérifier qu'il n'y a RIEN AVANT, mais aussi RIEN APRÈS ! (pas d'espace ni tabulation)
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  5. #5
    Candidat au Club
    Citation Envoyé par jreaux62 Voir le message
    Bonjour,

    ça ne sert à rien de mettre des echo partout : ça devient illisible.
    J'avoue que ça ne me plaisait pas non plus. Merci beaucoup pour ce tuyaux je vais regarder de plus prêt cette syntaxe.
    Cependant ça ne résout pas le problème d'ajout de ligne

  6. #6
    Rédacteur/Modérateur

    Au cas où la syntaxe Heredoc ne "te plaise" pas , de simples concaténation fonctionnent :

    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
    // Construction output
    	$output = '
    	{| align="center" width="90%" border="1" cellspacing="0" cellpadding="5"
    	!&lt;center&gt;' . $leftcol . '&lt;/center&gt
    	!width="95%"|&lt;center&gt' . $rightcol . '&lt;/center&gt
    	|------------------------------------------------------------
    '; 
     
    	$output .= '
    	|[[image:
    	' . $page_name . '_01.' . $image_format . ']]
    	|' . $line_content . '
    	|------------------------------------------------------------
    	|}
    '; 
    // -----------
    // Affichage
    	echo '<pre>'.$output.'</pre>';
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  7. #7
    Rédacteur/Modérateur

    Citation Envoyé par JonCrc Voir le message
    Cependant ça ne résout pas le problème d'ajout de ligne
    Ben si.

    Tel qu'est construit $output, on peut lui rajouter "des bouts de code" avant affichage.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  8. #8
    Candidat au Club
    Citation Envoyé par jreaux62 Voir le message
    Au cas où la syntaxe Heredoc ne "te plaise" pas , de simples concaténation fonctionnent :
    Effectivement il y a comme un soucis avec cette syntaxe sur Notepad++
    ça me parait pas plus mal comme ça. Merci !

  9. #9
    Rédacteur/Modérateur

    En fait NON, il n'y a pas de souci avec Notepad++.
    C'est juste que j'avais mis un espace APRÈS le point-virgule :
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    HTML;

    Ce qu'il ne faut pas faire... (j'ai corrigé mon précédent message)

    C'est une des raisons pour lesquels j'ai dit que cette syntaxe pouvait "ne pas plaire"... (une erreur bête... et invisible * !!)

    * Cela dit, on s'en rend compte à la mauvaise coloration syntaxique...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  10. #10
    Candidat au Club
    Citation Envoyé par jreaux62 Voir le message
    En fait NON, il n'y a pas de souci avec Notepad++.
    C'est juste que j'avais mis un espace APRÈS le point-virgule
    Holly Sh...
    Ok ça marche mais je crois que je vais rester sur la 2ème option
    Maintenant faut que je vois comment faire le bouton qui va ajouter un textarea et faire rajouter le contenu dans l'output

  11. #11
    Candidat au Club
    J'ai avancé un petit peu.
    J'ai utilisé javascript pour faire ajouter un champ de texte via un bouton.
    Reste que je n'arrive pas à trouver comment faire le lien avec le PHP pour aller chercher les valeurs de chacun des champs pour incrémenter les lignes
    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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    <script type="text/JavaScript">
    <!--
    function addLine(line_id) {
       try {
          var conteneur = document.getElementById(line_id);
     
          var paragraphe = document.createElement('p');
     
        var ligne = document.createElement('textarea');
            ligne.setAttribute('name','line_content[]');
    		ligne.setAttribute('id','line_content[]');
     
        paragraphe.appendChild(ligne);
        conteneur.appendChild(paragraphe);
       }
       catch(e) {
           alert(e);
        }
    }
    -->
    </script>
     
    <?php
    if (isset($_REQUEST['save'])) {
    	$inputs = filter_input_array(INPUT_POST, array(
    		'page_name' => FILTER_SANITIZE_ENCODED,
    		'leftcol' => FILTER_SANITIZE_ENCODED,
    		'rightcol' => FILTER_SANITIZE_ENCODED,
    		'image_format' => FILTER_SANITIZE_ENCODED,
    		'line_content' => FILTER_UNSAFE_RAW,
    	));	
     
    	$page_name = $inputs['page_name']; 
    	$leftcol = $inputs['leftcol']; 
    	$rightcol = $inputs['rightcol']; 
    	$image_format = $inputs['image_format']; 
    	$line_content = $inputs['line_content']; 
     
    	$output = '
    	{| align="center" width="90%" border="1" cellspacing="0" cellpadding="5"
    	!&lt;center&gt;' . $leftcol . '&lt;/center&gt
    	!width="95%"|&lt;center&gt' . $rightcol . '&lt;/center&gt
    	|------------------------------------------------------------
    '; 
    	$image_number=1;
    	$output .= '	|[[image:' . $page_name . '_' . $image_number++ .'.' . $image_format . ']]
    	|' . $line_content . '
    	|------------------------------------------------------------
    '; 
    	echo '<pre>'.$output.'	|}</pre>';
     
    }
    ?>
     
    <form method="post">
    <fieldset>
    	<p><label for="page_name">Nom de la page : </label><input type="text" name="page_name" id="page_name" /></p>
    	<p><label for="leftcol">Colonne de gauche : </label><input type="text" name="leftcol" id="leftcol" /></p>
    	<p><label for="rightcol">Colonne de droite : </label><input type="text" name="rightcol" id="rightcol" /></p>
    	<p>
    		   Indiquer le format des images :<br />
    		   <input type="radio" name="image_format" value="jpg" id="jpg" /> <label for="jpg">.jpg</label><br />
    		   <input type="radio" name="image_format" value="png" id="png" /> <label for="png">.png</label><br />
    		</p>
    	<div><p><label for="line_content[]">Contenu de la ligne : </label><textarea name="line_content[]" id="line_content[]"></textarea></div>
     
      <div id = "ligne_sup"></div>	
     
      <p onclick="addLine('ligne_sup')" style="text-decoration:underline; cursor:pointer">Ajouter une ligne</p>
    </fieldset>
    <fieldset>
    	<input type="submit" name="save" value="G&eacute;n&eacute;rer" />
    	<input type="reset" value="Reinitialiser" />
    </fieldset>
    </form>

  12. #12
    Membre émérite
    Ok, ta fonction est bien là mais impossible de faire la liaison entre javascript et php sans passer par l'objet XMLHttpRequest en javascript pur, ou bien les fonctions $.ajax, $.post, $.get de jQuery.

    Puis avec cette ligne là :ligne.setAttribute('id','line_content[]');, à chaque fois tu ajoutes une ligne avec le même id line_content[] hors qu'un id doit être unique dans une page html.

    Je pense que tu n'as pas besoin d'attribuer des id, seulement le name et une classe suffiront.

  13. #13
    Rédacteur/Modérateur

    Bonjour,

    @Toufik83
    De ce que je comprends, on n'a pas besoin d'Ajax ici.
    Il s'agit juste d'ajouter dynamiquement des champs de saisie (<input> ou <textarea>) au formulaire HTML *.

    Le traitement PHP se fera après soumission du formulaire.

    Citation Envoyé par JonCrc Voir le message
    ...je voudrais faire en sorte de mettre un bouton qui permet de rajouter une ligne au tableau (donc rajouter un champ textarea) et rajouter +1 au nom du fichier image
    * Le principe est le même qu'ici : https://codepen.io/jreaux62/pen/wvwMZwL
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  14. #14
    Membre émérite
    jreaux62 oui, une variable $_SESSION fera l'affaire..., mais je veux qu'il apprenne à utiliser un XMLhttpRequest...

  15. #15
    Rédacteur/Modérateur

    Non plus.
    Pas besoin de $_SESSION non plus.
    Pour quoi faire ?

    A moins que je n'ai pas compris la problématique... ?
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  16. #16
    Membre émérite
    Bon je vais essayer d'expliquer ce que j'ai compris :
    D'après son dernier code, il a utilisé une variable $image_number=1; et cette variable est sensée être incrémenter à chaque appelle de script pour l'utiliser ensuite dans les images, la question est comment doit-il sauvegarder la dernière valeur de $image_number sans passer par une variable $_SESSION ou un input hidden ?

  17. #17
    Rédacteur/Modérateur

    Un attribut data-* suffit.

    Cela dit, on n'a pas besoin de "numéroter", à partir du moment où on met des name avec des crochet : name="champ1[]".
    L'incrémentation est alors automatique.
    Au moment du traitement PHP, on récupère des array.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  18. #18
    Membre émérite
    Lol, mais l'attribut data-x n'est pas récupéré par php , a moins que tu veux qu'il n'utilise plus son fichier php.

  19. #19
    Rédacteur/Modérateur

    C'est toi qui n'a pas compris...
    Notamment la chronologie des évènements.

    Si JonCrc veut bien ré-expliquer...

    N.B. J'ai essayé d'aller sur MediaWiki, et cliquer sur Learn how to edit a page, mais la page semble en "maintenance"...

    Du coup, je ne comprends pas le rapport entre l'ajout d'un <textarea> et la numérotation d'une "image" ?
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  20. #20
    Membre émérite
    Citation Envoyé par jreaux62 Voir le message
    Du coup, je ne comprends pas le rapport entre l'ajout d'un <textarea> et la numérotation d'une "image" ?
    , c'est ce qui m'interpelle aussi .
    Peut être que j'ai raté quelque chose..., et je voudrais bien avoir tort...