Formulaire avec signature manuscrite par Wagscd - page 1

Bonjour à toutes et à tous,

J'ai un peu avancé quoique grâce à l'aide Paul.

Test du fichier HTML avec un pseudo formulaire en début de page

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">

		<script src="signature.js"></script>

	</head>

	<style>
		body, canvas, div, form, input {
			margin: 0;
			padding: 0;
		}
		#wrapper {
			width: 100%;
			padding: 1px;
		}
		canvas {
			position: relative;
			margin: 1px;
			margin-left: 0px;
			border: 1px solid #3a87ad;
		}
		h1, p {
			padding-left: 2px;
			width: 100%;
			margin: 0 auto;
		}
		#controlPanel {
			margin: 2px;
		}
		#saveSignature {
			display: none;
		}
	</style>

	<body>
		<div id="wrapper">
			<p>Zetakey Signature Webapp</p>
			
			<form>
				<label for="Email">To:</label>
				<input type="email" id="sendemail" size="35" placeholder="Send to email" autocomplete="on"/><br>
				<label for="Name">Nom:</label>
				<input type="text" id="name" size="35" autocomplete="on"/>
			</form>
			
			<div id="canvas">
				Canvas is not supported.
			</div>
			
			
			<script>
				zkSignature.capture();
			</script>

			<button type="button" onclick="zkSignature.clear()">
				Clear Signature
			</button>
			<br />
			<img id="saveSignature" alt="Saved image png"/>

			<form>
				<label for="Email"></label>
				<input type="hidden" type="email" id="replyemail"  size="35" value="Validation disclaimer" disabled />
				<br />
				<button type="button" onclick="zkSignature.send()">
					Send Email
				</button>
			</form>
		</div>
	</body>
</html>

Jusque là rien de compliqué mais, je voudrais que lorsque l'on clique, le mail soit envoyé avec le 'to' et le 'name'

Pour le 'to', ça fonctionne mais le 'name' que j'ai crée ça fonctionne pas.

 **************************************************/
var zkSignature = (function () {

	var empty = true;

	return {
		//public functions
		capture: function (){
				var parent = document.getElementById("canvas");
				parent.childNodes[0].nodeValue = "";

				var canvasArea = document.createElement("canvas");
				canvasArea.setAttribute("id", "newSignature");
				parent.appendChild(canvasArea);

				var canvas = document.getElementById("newSignature");
				var context = canvas.getContext("2d");

				if (!context) {
					throw new Error("Failed to get canvas' 2d context");
				}

				screenwidth = screen.width;

				if (screenwidth < 480) {
					canvas.width = screenwidth - 8;
					canvas.height = (screenwidth * 0.63);
				} else {
					canvas.width = 464;
					canvas.height = 304;
				}

				context.fillStyle = "#fff";
				context.strokeStyle = "#444";
				context.lineWidth = 1.2;
				context.lineCap = "round";

				context.fillRect(0, 0, canvas.width, canvas.height);

				context.fillStyle = "#3a87ad";
				context.strokeStyle = "#3a87ad";
				context.lineWidth = 1;
				context.moveTo((canvas.width * 0.042), (canvas.height * 0.7));
				context.lineTo((canvas.width * 0.958), (canvas.height * 0.7));
				context.stroke();

				context.fillStyle = "#fff";
				context.strokeStyle = "#444";

				var disableSave = true;
				var pixels = [];
				var cpixels = [];
				var xyLast = {};
				var xyAddLast = {};
				var calculate = false;
				//functions
				{
					function remove_event_listeners() {
						canvas.removeEventListener('mousemove', on_mousemove, false);
						canvas.removeEventListener('mouseup', on_mouseup, false);
						canvas.removeEventListener('touchmove', on_mousemove, false);
						canvas.removeEventListener('touchend', on_mouseup, false);

						document.body.removeEventListener('mouseup', on_mouseup, false);
						document.body.removeEventListener('touchend', on_mouseup, false);
					}

					function get_board_coords(e) {
						var x, y;

						if (e.changedTouches && e.changedTouches[0]) {
							var offsety = canvas.offsetTop || 0;
							var offsetx = canvas.offsetLeft || 0;

							x = e.changedTouches[0].pageX - offsetx;
							y = e.changedTouches[0].pageY - offsety;
						} else if (e.layerX || 0 == e.layerX) {
							x = e.layerX;
							y = e.layerY;
						} else if (e.offsetX || 0 == e.offsetX) {
							x = e.offsetX;
							y = e.offsetY;
						}

						return {
							x : x,
							y : y
						};
					};

					function on_mousedown(e) {
						e.preventDefault();
						e.stopPropagation();

						canvas.addEventListener('mousemove', on_mousemove, false);
						canvas.addEventListener('mouseup', on_mouseup, false);
						canvas.addEventListener('touchmove', on_mousemove, false);
						canvas.addEventListener('touchend', on_mouseup, false);

						document.body.addEventListener('mouseup', on_mouseup, false);
						document.body.addEventListener('touchend', on_mouseup, false);

						empty = false;
						var xy = get_board_coords(e);
						context.beginPath();
						pixels.push('moveStart');
						context.moveTo(xy.x, xy.y);
						pixels.push(xy.x, xy.y);
						xyLast = xy;
					};

					function on_mousemove(e, finish) {
						e.preventDefault();
						e.stopPropagation();

						var xy = get_board_coords(e);
						var xyAdd = {
							x : (xyLast.x + xy.x) / 2,
							y : (xyLast.y + xy.y) / 2
						};

						if (calculate) {
							var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
							var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
							pixels.push(xLast, yLast);
						} else {
							calculate = true;
						}

						context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
						pixels.push(xyAdd.x, xyAdd.y);
						context.stroke();
						context.beginPath();
						context.moveTo(xyAdd.x, xyAdd.y);
						xyAddLast = xyAdd;
						xyLast = xy;

					};

					function on_mouseup(e) {
						remove_event_listeners();
						disableSave = false;
						context.stroke();
						pixels.push('e');
						calculate = false;
					};

				}

				canvas.addEventListener('mousedown', on_mousedown, false);
				canvas.addEventListener('touchstart', on_mousedown, false);

		}
		,
		save : function(){

				var canvas = document.getElementById("newSignature");
				// save canvas image as data url (png format by default)
				var dataURL = canvas.toDataURL("image/png");
				document.getElementById("saveSignature").src = dataURL;

		}
		,
		clear : function(){

				var parent = document.getElementById("canvas");
				var child = document.getElementById("newSignature");
				parent.removeChild(child);
				empty = true;
				this.capture();

		}
		,
		send : function(){

				if (empty == false){

				var canvas = document.getElementById("newSignature");
				var dataURL = canvas.toDataURL("image/png");
				document.getElementById("saveSignature").src = dataURL;
				var sendemail = document.getElementById('sendemail').value;
				var name = document.getElementById('name').value;
				var replyemail = document.getElementById('replyemail').value;

				var dataform = document.createElement("form");
				document.body.appendChild(dataform);
				dataform.setAttribute("action","upload_file.php");
				dataform.setAttribute("enctype","multipart/form-data");
				dataform.setAttribute("method","POST");
				dataform.setAttribute("target","_self");
				dataform.innerHTML = 
					'<input type="text" name="image" value="' + dataURL + '"/>'
					+ 
					'<input type="email" name="email" value="' + sendemail + '"/>'
					+ 
					'<input type="text" name="name" value="' + name + '"/>'
					+ 
					'<input type="email" name="replyemail" value="' + replyemail + '"/>'
					+
					'<input type="submit" value="Click me" />';
				dataform.submit();

				}
		}

	}

})()

var zkSignature;

J'ai ajouté au code initial les ligne suivantes mais rien n'y fait, le name n'apparait pas dans l 'email

var name = document.getElementById('name').value;

dataform.innerHTML = 
					'<input type="text" name="image" value="' + dataURL + '"/>'
					+ 
					'<input type="email" name="email" value="' + sendemail + '"/>'
					+ 
					'<input type="text" name="name" value="' + name + '"/>'
					+ 
					'<input type="email" name="replyemail" value="' + replyemail + '"/>'
					+
					'<input type="submit" value="Click me" />';
				dataform.submit();

et dans le fichier upload_file.php

$name = $_POST["name"];

$body = "Signé le - Signed on " . date('d.m.Y H:i:s') .  "\n Signed and Send by Jet " .  "\n Test deuxième ligne $name ";

Quand je mets

$body = "Signé le - Signed on " . date('d.m.Y H:i:s') .  "\n Signed and Send by Jet " .  "\n Test deuxième ligne $to ";

Ca fonctionne. Dans le mail apparaît bien l'e-mail mentionné dans le formulaire mais quand je mets name, le nom n'apparaît pas.

J'imagine que c'est une question de traitement du formulaire mais je ne vois pas où j'ai fait l'erreur.

Merci d'avance pour votre aide.

-
Edité par Wagscd 26 mai 2018 à 15:29:06

Wagscd

15 mai 2018 à 15:05:06

Un ami croyant que je maîtrise suffisamment le codage me demande une mission

Comment dire ? Je ne trouve pas d'infos pour le peu de compétence que j'ai.

Il voudrait pour son futur site internet un sorte de formulaire avec une zone "manuscrite" pour que ces clients puissent signer soit avec la souris soit avec le doigt (tablette ou similaire) (Ce sont en fait des bons de commande lors de ses démarches chez ses clients)

J'ai trouvé ceci ( https://github.com/brinley/jSignature ) mais j'y comprends pas grand chose.

Avez vous une idée comment faire ?

PaulTanné

15 mai 2018 à 15:07:47

Yup,

Sans être mechant, je ne trouve pas que la doc laisser par le mec de git soit incomprehensible....

http://www.unbolt.net/jSignature/

15 mai 2018 à 16:08:26

C'est fort possible mais comme j'y connais pas grand chose, j'ai l'impression d'être débordé.

Je vais essayer. Je verrai bien.

Merci

16 mai 2018 à 7:43:58

Okep, si jamais tu l'es trop, envoie un message ici et je verrais si je peux t'aider

18 mai 2018 à 17:20:55

Merci beaucoup pour ta proposition. Je vais essayer de m'y pencher ce week end.

Je viens de tester celui ci https://www.zetakey.com/codesample-signature.php

Vu que tu proposes ton aide, je pense que je ne vais pas dire non

Ce script fonctionne très bien mais je voudrais y coller au dessus un formulaire et là je vois pas trop comment faire.

J'ai déjà fait des formulaires en Html avec un fichier php pour l'envoi.

Mais ici comme, c'est déjà codé pour envoyer la signature en fichier joint, je suis perdu.

Je voudrais que le formulaire soit envoyé sous forme de texte (bref comme un formulaire ) et avec en pièce jointe la signature (comme le fait le script d'origine)

Il me semble que c'est le fichier upload_file.php qui gère l'envoi mais comment et où y ajouter le codage pour le traitement de la partie formulaire que je vais créer en html.

Auriez vous quelques idées ou pistes.

-
Edité par Wagscd 18 mai 2018 à 18:17:50

26 mai 2018 à 15:28:45

Formulaire avec signature manuscrite

Formulaire avec signature manuscrite

Supprimer

Modérer

Signaler le message aux modérateurs