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

Invité · 05/02/2020, 13h22

Traitement PHP :

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
<?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,
		// enlever 'line_content' ICI
	));	
 
	$page_name = $inputs['page_name']; 
	$leftcol = $inputs['leftcol']; 
	$rightcol = $inputs['rightcol']; 
	$image_format = $inputs['image_format']; 
 
	$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
	|------------------------------------------------------------
'; 
	// récupération des textarea
	$line_contents = $_POST['line_content']; // array !
 
	$image_number=1;
foreach( $line_contents as $line_content )
{
   if( !empty($line_content) )
   {
	$output .= '	|[[image:' . $page_name . '_' . $image_number .'.' . $image_format . ']]
	|' . $line_content . '
	|------------------------------------------------------------
'; 
	$image_number++;
   }
}
	echo '<pre>'.$output.'	|}</pre>';
}
?>

A voir si ce n'est pas plutôt :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
		$output .= '	|[[image:' . htmlspecialchars($page_name) . '_' . $image_number .'.' . $image_format . ']]
	|' . htmlspecialchars(nl2br($line_content)) . '
	|------------------------------------------------------------
';

Remarque : tu n'as AUCUNE "Gestion d'erreur" (champs obligatoires, non-vides,...)

Voir aussi : PRINCIPE de FORMULAIRE et TRAITEMENT sur la même page

**JonCrc** · 05/02/2020, 13h55

Envoyé par jreaux62

Traitement PHP :
Remarque : tu n'as AUCUNE "Gestion d'erreur" (champs obligatoires, non-vides,...)

Oui c'est vrai mais ce n'est pas un soucis.

Effectivement le contexte initial n'était peut être pas assez clair.
Le but est de générer automatiquement un code mediawiki qui va permettre d'afficher un tableau qui va se présenter avec 2 colonnes
Dans la colonne de gauche, il n'y a qu'une image par ligne (soit toutes en jpg soit toutes en png)
Le nom de l'image se présente de la façon suivante nom_de_la_page_XX.jpg où XX correspond au numéro de la ligne. D'où l'incrémentation à chaque ajout de ligne.
La colonne de droite comporte le texte ajouté dans le champ textarea
Est-ce que c'est plus clair ?

Dans l'idéal j'aimerai que le résultat soit affiché sans avoir besoin de recharger la page. Pour que si jamais on se rend compte qu'on a oublié une ligne après envoi du formulaire, on ai pas besoin de remplir à nouveau tous les champs

Invité · 05/02/2020, 13h58

Envoyé par JonCrc

...j'aimerai que le résultat soit affiché sans avoir besoin de recharger la page...

Je suppose que "le résultat" est le code Wiki, dynamiquement généré.

Alors là, OUI, il faut utiliser Ajax !

Autrement dit, il faut que :

le code PHP soit dans un fichier EXTERNE.
qu'un script JS récupère les données des champs,
et les transmette, via Ajax, au fichier PHP externe, qui s'occupe du traitment.
Le code HTML généré est alors récupéré dans le script JS pour être affiché dans la page en cours (sans rechargement, donc).

**JonCrc** · 05/02/2020, 14h02

Envoyé par jreaux62

Je suppose que "le résultat" est le code Wiki, dynamiquement généré.
Alors là, OUI, il faut utiliser Ajax !

Bon après c'est pas essentiel non plus

Déjà si je peux faire en rechargeant la page ça sera bien

**JonCrc** · 05/02/2020, 15h40

On est tout proche du résultat souhaité.
ça fonctionne bien si ce n'est que le premier textarea n'est pas pris en compte.
Et si on n'ajoute pas de ligne et qu'on envoie en ne remplissant donc que le premier textarea on à une erreur en retour qui est :

Warning: Invalid argument supplied for foreach() in %nomdufichier%.php on line 47

ça doit pas être grand chose mais j'imagine que les deux sont liés

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
76
77
78
79
80
81
82
<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,
	));	
 
	$page_name = $inputs['page_name']; 
	$leftcol = $inputs['leftcol']; 
	$rightcol = $inputs['rightcol']; 
	$image_format = $inputs['image_format']; 
 
$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
|------------------------------------------------------------
'; 
	// récupération des textarea
	$line_contents = $_POST['line_content']; // array !
 
	$image_number=1;
foreach( $line_contents as $line_content )
{
   if( !empty($line_content) )
   {
$output .= '|[[image:' . $page_name . '_' . $image_number .'.' . $image_format . ']]
|' . $line_content . '
|------------------------------------------------------------
'; 
	$image_number++;
   }
}
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, 15h46

Déjà il ne faut pas supprimer les crochets [] de l'attribut name (ligne 72).

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

name="line_content[]"

Et je t'avais dis aussi de supprimer le id du textarea (ligne 11 de la fonction js et 72 du html).

**JonCrc** · 05/02/2020, 15h58

Oops

Effectivement ça va aller mieux comme ça.
J'ai rajouté quelques attributs de validation dans le formulaire pour faire plaisir à jreaux62

Code JavaScript :

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
76
77
78
79
80
81
82
<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,
        ));     
 
        $page_name = $inputs['page_name']; 
        $leftcol = $inputs['leftcol']; 
        $rightcol = $inputs['rightcol']; 
        $image_format = $inputs['image_format']; 
 
$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
|------------------------------------------------------------
'; 
        // récupération des textarea
        $line_contents = $_POST['line_content']; // array !
 
        $image_number=1;
foreach( $line_contents as $line_content )
{
   if( !empty($line_content) )
   {
$output .= '|[[image:' . $page_name . '_' . $image_number .'.' . $image_format . ']]
|' . $line_content . '
|------------------------------------------------------------
'; 
        $image_number++;
   }
}
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" required/></p>
	<p><label for="leftcol">Colonne de gauche : </label><input type="text" name="leftcol" id="leftcol" required/></p>
	<p><label for="rightcol">Colonne de droite : </label><input type="text" name="rightcol" id="rightcol" required/></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" checked /> <label for="png">.png</label><br />
		</p>
	<div><p><label for="line_content">Contenu de la ligne : </label><textarea name="line_content[]" required></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>

Invité · 05/02/2020, 16h59

Le code PHP que j'ai donné dans mon message #21 fonctionne avec les codes HTML et JS fournis précédemment.

N.B. On n'est plus obligé d'écrire <script type="text/JavaScript">.
<script> suffit.
Les  dans le script sont aussi inutiles.

**JonCrc** · 05/02/2020, 17h22

Un grand merci pour votre aide précieuse

Je pense que je vais m'arrêter là-dessus

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<html>
<head>
<title>G&eacute;n&eacute;ration de tableau MediaWiki</title>
<style type="text/css">
body {
 background-color:#22314E;
 font-family:"trebuchet ms",sans-serif;
 color:#E3E3E1;
  }
form {
 background-color:#505E7C;
 padding:10px; width:320px;
 color:#000000;
 border-radius:10px;
 }
fieldset {
 padding:0 20px 20px 20px;
 margin-bottom:10px;
 border:1px solid #FEDF63;
 border-radius:5px;
 }
legend {
 color:#F8AF22;
 font-weight:bold
 }
 label {
 font-weight:bold;
 color:#101325;
 }
 
input, textarea {
 background-color:#E3E3E1;
 padding:3px;
 border:0px solid #F5C5C5;
 border-radius:5px;
 width:200px;
 box-shadow:1px 1px 2px #C0C0C0 inset;
 }
textarea{
 resize:vertical;
 width:260px; 
 }		
input[type=radio] {
 background-color:transparent;
 border:none;
 width:10px;
 }
input[type=submit], input[type=reset], input[type=button] {
 margin-top:10px;
 /*width:100px;*/
 box-shadow:1px 1px 1px #F5C5C5;
 cursor:pointer;
 }
pre{
 background-color:#FFF3F3;
 color:#101325; 
 }
</style>
 
<script>
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>
 
</head>
 
<body>
<h1>G&eacute;n&eacute;ration de tableau MediaWiki</h1>
<form method="post">
<fieldset>
 <legend>Param&egrave;tres du tableau</legend>
	<p><label for="page_name">Nom de la page : </label><input type="text" name="page_name" id="page_name" required/></p>
	<p><label for="leftcol">Colonne de gauche : </label><input type="text" name="leftcol" id="leftcol" value="ECRAN"/></p>
	<p><label for="rightcol">Colonne de droite : </label><input type="text" name="rightcol" id="rightcol" value="COMMENTAIRE"/></p>
	<p>
		   Indiquer le format des images :<br />
		   <input type="radio" name="image_format" value="jpg" id="jpg" /> <label for="jpg">.jpg</label>
		   <input type="radio" name="image_format" value="png" id="png" checked /> <label for="png">.png</label>
	</p>
 
</fieldset>
<fieldset>
<legend>Contenu des lignes</legend>
  <textarea name="line_content[]" required></textarea>  
  <div id = "ligne_sup"></div>    
  <input type="button" onclick="addLine('ligne_sup')" value="Ajouter une ligne"/>
</fieldset>
<fieldset align="center">
<legend>Validation des donn&eacute;es</legend>
	<input type="submit" name="save" value="G&eacute;n&eacute;rer" />
	<input type="reset" value="Reinitialiser" />
</fieldset>
</form>
<div class="result">
<h2>Texte &agrave; recopier dans MediaWiki</h2>
<?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,
	));	
 
	$page_name = $inputs['page_name']; 
	$leftcol = $inputs['leftcol']; 
	$rightcol = $inputs['rightcol']; 
	$image_format = $inputs['image_format']; 
 
$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
|------------------------------------------------------------
'; 
	// récupération des textarea
	$line_contents = $_POST['line_content']; // array !
 
	$image_number=1;
foreach( $line_contents as $line_content )
{
   if( !empty($line_content) )
   {
$output .= '|[[image:' . $page_name . '_' . $image_number .'.' . $image_format . ']]
|' . $line_content . '
|------------------------------------------------------------
'; 
	$image_number++;
   }
}
echo '<pre>'.$output.'|}</pre>';
}
?>
</div>
</body>
 
</html>

Promis, je me pencherai sur AJAX dès que j'aurai plus de temps pour éviter le rechargement de page

Merci encore

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

Langage PHP

Discussions similaires

Partager

Partager