Formulaire avec injection Copier-Coller de n ligne(s)

**vandman** · 03/06/2016, 16h40

Bonjour,

J'ai besoin de créer un formulaire avec les critères et points suivants:

_ 2 colonnes, colonne 1 = code, colonne 2 = libelle
_ Je veux pouvoir injecter les données à partir d'un copier - coller. Est-ce faisable simplement? C'e qui est coller est une liste de codes ou une liste de codes avec ou sans libellé.

Le but est de réaliser un traitement sur la liste pour ensuite envoyer le résultat dans postgres.

Comment créer ce formulaire sachant que je ne connait pas le nombre de ligne à injecter?

Cordialement,
Vandman

**vandman** · 03/06/2016, 17h31

Bonjour,
J'ai oublier de mettre le style de formulaire que je veux:

Code html :

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
<!DOCTYPE html>
<html>
	<head>
    	<meta http-equiv="refresh" content="url=index.php">
    	<meta charset="utf-8">
    	<!--<link href="affichage.css" rel="stylesheet" type="text/css" media="screen" /> -->
	</head>
	<body>
		<div>
			<form name="RechercheCode" method="post" action="code.php">
				<table cellspacing="0" cellpadding="0">
					<thead> <!-- En-tête du tableau -->
   						<tr>
       						<th>Code</th>
       						<th>Libelle</th>
   						</tr>
					</thead>
					<tbody> <!-- Corps du tableau -->
					<tr>
						<td><input type="text" name="Code" placeholder="Intiqué ici le code"/></td>
						<td><input type="text" name="Libelle" placeholder="libelle du code"/></td>
					</tr>
		         	<tbody>
				</table>
				<br/>
		        <div class="boutonform">
		        	<button type="submit" name="valider">OK</button>
		        </div>
		    </form>
		</div>
		<p></p>
	</body>
</html>

Il faut donc que quand je colle, le premier champ aille dans "code" et le second champ dans "libelle"
Cordialement,
Vandman

**Celira** · 03/06/2016, 17h46

Si je comprends bien, le processus est le suivant :

tu copie un texte depuis ton bloc notes par exemple
tu cliques dans le 1er champ
tu fais coller
Hop! Magie ! Les deux champs sont remplis avec les valeurs que tu as copiées.

C'est bien ce que tu veux faire ?

C'est donc une action effectuée dans le navigateur. Le serveur n'interviendra que lorsque tu enverras le formulaire. Il va donc falloir te tourner vers Javascript plutôt que vers PHP.

**vandman** · 03/06/2016, 17h58

Bonjour,

J'ai besoin de créer un formulaire avec les critères et points suivants:

_ 2 colonnes, colonne 1 = code, colonne 2 = libelle
_ le processus est le suivant :
je copie un texte depuis calc ou excel ou une source de données
je clique dans le 1er champ
je fais coller
Les deux champs se remplisent avec les valeurs que j'ai copiées.

Comment créer ce formulaire sachant que je ne connait pas le nombre de ligne à injecter?

Voici le type de formulaire que je veux réaliser.

Code html :

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
<!DOCTYPE html>
<html>
	<head>
    	<meta http-equiv="refresh" content="url=index.php">
    	<meta charset="utf-8">
    	<!--<link href="affichage.css" rel="stylesheet" type="text/css" media="screen" /> -->
	</head>
	<body>
		<div>
			<form name="RechercheCode" method="post" action="code.php">
				<table cellspacing="0" cellpadding="0">
					<thead> <!-- En-tête du tableau -->
   						<tr>
       						<th>Code</th>
       						<th>Libelle</th>
   						</tr>
					</thead>
					<tbody> <!-- Corps du tableau -->
					<tr>
						<td><input type="text" name="Code" placeholder="Intiqué ici le code"/></td>
						<td><input type="text" name="Libelle" placeholder="libelle du code"/></td>
					</tr>
		         	<tbody>
				</table>
				<br/>
		        <div class="boutonform">
		        	<button type="submit" name="valider">OK</button>
		        </div>
		    </form>
		</div>
		<p></p>
	</body>
</html>

Cordialement,
Vandman

**NoSmoking** · 04/06/2016, 15h04

Bonjour,

Les deux champs se remplisent avec les valeurs que j'ai copiées.

...il te suffit de gérer l'évent paste sur ton <input onpaste="faire_quelque_chose();">.

Comment créer ce formulaire sachant que je ne connait pas le nombre de ligne à injecter?

...si tu ne connais pas le nombre d'ajout par avance le plus sage est de les créer vai un <button>Ajouter</button>.

**chadoum** · 06/06/2016, 10h57

Il y a moyen de construire dynamiquement ton tableau de cette manière :

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
 
<!doctype html>
<html lang="en" ng-app>
 
<head>
    <meta charset="utf-8">
    <title>My HTML File</title>
    <script>
        function pasteTable() {
            var tableContent = document.getElementById("tableContent")
            var text = ""
            if (window.clipboardData && window.clipboardData.getData) // IE
                text = window.clipboardData.getData('Text')
            else if (event.clipboardData && event.clipboardData.getData)
                text = event.clipboardData.getData('text/plain')
 
            var content = text.split(/[\t\r\n]/g)
            var n = 0
            for (var i = 0; i < content.length; i++) {                
                if (content[i] != "") {                    
                    var tr
                    if (n % 2 == 0)
                        tr = document.createElement('tr')
                    else
                        tr = document.querySelector("#tableContent tr:last-child")
 
                    var td = document.createElement('td')
                    var span = document.createElement('span')
                    span.textContent = content[i]
 
                    td.appendChild(span)
                    tr.appendChild(td)
                    tableContent.appendChild(tr)
                    n++
                }
            }
        }
 
        function emptyCell(cell) {
            cell.value = ""
        }
    </script>
</head>
 
<body>
    <input type="text" id="cell" onpaste="pasteTable()" onblur="emptyCell(this)" />
    <br/>
    <table id="tableContent">
 
    </table>
</body>
 
</html>

La propriété clipboardData se réfère au contenu de ton presse-papier.
Je copie depuis un excel de ce genre :
Nom : Untitled.png
Affichages : 909
Taille : 2,6 Ko

Nom : Untitled.png
Affichages : 909
Taille : 2,6 Ko

Et je reconstitue un tableau en excluant tabulations et retours charriots.

**vandman** · 06/06/2016, 18h52

Bonjour chadoum,
J'ai essayé ta solution, mais ca ne fonctionne pas.
Rien ne se passe.

Cordialement,

Vandman

**vandman** · 06/06/2016, 20h09

Bonjour,

J'ai enfin réussi à générer un évennement sur le "onpaste".
Cependant, je récupère le contenu du champ avant que la donné soit dans le champ. Comment faire pour récupérer les données coller et toujours laisser la dernière ligne libre et vide pour la saisi manuelle?

Voici le code actuel:

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
<html>
	<head>
    	<meta http-equiv="refresh" content="url=index.php">
    	<meta charset="utf-8">
    	<noscript><meta http-equiv="refresh" content="0, URL=code-sans-js.php"></noscript>
    	<title>Traitement Codes</title>
    	<!--<link href="affichage.css" rel="stylesheet" type="text/css" media="screen" /> -->
	</head>
		<script>
		function ajouterLigne(PasteThis)
		{
		    var tableau = document.getElementById("tableau");
			var ligne = tableau.insertRow(+1);//on a ajouté une ligne
			var colonne1 = ligne.insertCell(0);//on a une ajouté une cellule
			colonne1.innerHTML += PasteThis.value; //document.getElementById("code").value;//on y met le contenu de code
			var colonne2 = ligne.insertCell(1);//on ajoute la seconde cellule
			colonne2.innerHTML += document.getElementById("Libelle").value;
		}
		</script>
	<body>
		<form method="post" action="">
 
			<table id="tableau" border="1">
			<thead>
				<tr>
					<th>Code</th>
					<th>Libelle</th>
				</tr>
			</thead>
				<tbody>
					<tr>
						<td><input type="text" name="code" id="code" onpaste="setTimeout(ajouterLigne(this), 20);"/></td>
						<td><input type="text" name="Libelle" id="Libelle" /></td>
					</tr>
				</tbody>
			</table>
			<input type="button" value="Enregistrer"/>
		</form>
	</body>
</html>

PS: Je fais les choses les une après les autres. J'essaye d'avord de pouvoir récupérer la bonne donnée pour ensuite de la traiter. La donnée sera a terme un tableau (array).

Cordialement,

vandman

**chadoum** · 06/06/2016, 22h09

Envoyé par vandman

J'ai essayé ta solution, mais ca ne fonctionne pas.

Copier le contenu des colonnes excel et CTRL+v dans l'input.
Le tableau se construit en dessous

**vandman** · 06/06/2016, 22h30

Bonjour,

Décidément, ca vaut pas.

Petite précision tout de meme, je suis sous Linux. Je n'ai pas excel mais calc.
Enfin, ca doit aussi fonctionner à partir d'un Windows.

Cordialement,
Vandman

**chadoum** · 07/06/2016, 08h43

Quel navigateur ? Est-ce que tu as une erreur dans la console ?

**NoSmoking** · 07/06/2016, 19h00

Dans le code de chadoum il manque un élément important qui n'est pas forcément défini dans l'objet window, j'ai cité event.

En conséquence, il te suffit de modifier légèrement le code en passant event en paramètre

Code :

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

1
2
3
function pasteTable( event) {
  // le corps de la fonction
}

et ne pas oublier de modifier l'appel en indiquant en paramètre event

Code html :

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

<input type="text" id="cell" onpaste="pasteTable(event)" onblur="emptyCell(this)" />

**chadoum** · 08/06/2016, 08h51

Non ce n'est pas nécessaire de passer l'event en paramètre, le window.event sera exécuté car il reste dans le contexte de l'objet window

**vandman** · 08/06/2016, 15h09

Bonjour,

Oui j'ai une erreur:

Code :

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

ReferenceError: event is not defined

Cordialement,

vandman

**NoSmoking** · 08/06/2016, 18h01

Envoyé par chadoum

...le window.event sera exécuté car il reste dans le contexte de l'objet window

quand celui ci existe, je t'engage à ouvrir la console sur FireFox et consort, de taper console.log( window.event) et de regarder le résultat

Envoyé par vandman

Oui j'ai une erreur:

relit ma réponse.

**chadoum** · 08/06/2016, 21h52

Le passage de event en paramètre n'est nécessaire qu'avec firefox. Chrome, Safari et IE attaquent l'objet global... Testez dans la console😉

**vandman** · 09/06/2016, 15h35

Bonjour,

Rien de tout ca ne fonctionne. j'ai dans la console "undefine"

Par contre j'ai trouvé ce bout de code qui me permet de récupérer les données:

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
 
<!doctype html>
<html lang="fr" ng-app>
 
<head>
    <meta charset="utf-8">
    <title>My HTML File</title>
    <script>
        function pasteTable(TexteCSV) {
        	console.log( TexteCSV )
            var tableContent = document.getElementById("tableContent")
 
            var content = TexteCSV.split(/[\t\r\n]/g)
            var n = 0
            for (var i = 0; i < content.length; i++) {                
                if (content[i] != "") {                    
                    var tr
                    if (n % 2 == 0)
                        tr = document.createElement('tr')
                    else
                        tr = document.querySelector("#tableContent tr:last-child")
 
                    var td = document.createElement('td')
                    var span = document.createElement('span')
                    span.textContent = content[i]
 
                    td.appendChild(span)
                    tr.appendChild(td)
                    tableContent.appendChild(tr)
                    n++
                }
            }
        }
 
        function emptyCell(cell) {
            cell.value = ""
        }
    </script>
</head>
 
<body>
    <input type="text" id="cell" onpaste="var e=this; setTimeout(function(){ pasteTable(e.value) }, 200);" onblur="emptyCell(this)" />
    <br/>
    <table id="tableContent">
 
    </table>
</body>
 
</html>

Par contre la fonction split ne fonctionne pas car lors du collage, les retours à la ligne sont remplacés par des espaces???
Comment faire?

Cordialement,
Vandman