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

Version imprimable

03/06/2016, 16h40
vandman

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

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

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

Code:

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

03/06/2016, 17h46
Celira
Si je comprends bien, le processus est le suivant :
1. tu copie un texte depuis ton bloc notes par exemple
2. tu cliques dans le 1er champ
3. tu fais coller
4. 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.

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

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:

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

04/06/2016, 15h04
NoSmoking

Bonjour,

Citation:

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

Citation:

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

1 pièce(s) jointe(s)

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

Code:

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 :
Pièce jointe 211909
Et je reconstitue un tableau en excluant tabulations et retours charriots.

06/06/2016, 18h52
vandman

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

Cordialement,

Vandman

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:

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

06/06/2016, 22h09
chadoum

Citation:

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
06/06/2016, 22h30
vandman

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
07/06/2016, 08h43
chadoum

Quel navigateur ? Est-ce que tu as une erreur dans la console ?
07/06/2016, 19h00
NoSmoking
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:

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:

<input type="text" id="cell" onpaste="pasteTable(event)" onblur="emptyCell(this)" />
08/06/2016, 08h51
chadoum

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
08/06/2016, 15h09
vandman

Bonjour,

Oui j'ai une erreur:

Code:

ReferenceError: event is not defined

Cordialement,

vandman
08/06/2016, 18h01
NoSmoking

Citation:

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

Citation:

Envoyé par vandman

Oui j'ai une erreur:

relit ma réponse.
08/06/2016, 21h52
chadoum

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😉

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:

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

09/06/2016, 15h37
vandman

Bonjour,

Je précise, je suis sous linux et travaille avec FireFox Version 47.

Cordialement,
Vandman
09/06/2016, 15h58
chadoum

Avec le code que je t'avais envoyé (+ le event en paramètre ;) ), qu'est-ce que tu as dans la console quand tu fais

Code:

console.log(event.clipboardData)

dans la fonction pasteTable ?
09/06/2016, 20h54
vandman

Bonsoir,

La récupération des éléments copiés fonctionne maintenant.

Merci à chadoum et NoSmoking.

Cordialement,
Vandman