Ajouter une ligne dans un formulaire et incrémenter les valeurs

**JonCrc** · 03/02/2020, 17h20

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.

**Toufik83** · 03/02/2020, 17h42

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 ?

**JonCrc** · 04/02/2020, 09h20

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.

Invité · 04/02/2020, 10h34

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 (;).
 
	$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)

**JonCrc** · 04/02/2020, 10h42

Envoyé par jreaux62

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

Invité · 04/02/2020, 10h51

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>';

Invité · 04/02/2020, 10h54

Envoyé par JonCrc

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.

**JonCrc** · 04/02/2020, 11h11

Envoyé par jreaux62

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 !

Invité · 04/02/2020, 11h13

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

**JonCrc** · 04/02/2020, 11h47

Envoyé par jreaux62

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

**JonCrc** · 05/02/2020, 11h51

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>

**Toufik83** · 05/02/2020, 12h10

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.

Invité · 05/02/2020, 12h42

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.

Envoyé par JonCrc

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

**Toufik83** · 05/02/2020, 12h46

jreaux62 oui, une variable $_SESSION fera l'affaire..., mais je veux qu'il apprenne à utiliser un XMLhttpRequest...

Invité · 05/02/2020, 12h49

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

A moins que je n'ai pas compris la problématique... ?

**Toufik83** · 05/02/2020, 12h58

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 ?

Invité · 05/02/2020, 13h00

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.

**Toufik83** · 05/02/2020, 13h01

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.

Invité · 05/02/2020, 13h03

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