Formulaire avec signature sur tablette

Formulaire avec signature sur tablette - HTML/CSS - Programmation

Marsh Posté le 26-05-2018 à 20:57:41    

Bonjour à toutes et à tous,
 
Un ami 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).  Ma maîtrise du codage ayant ses limites, je fais appel à votre savoir et aide :)
 
J'ai comme base https://www.zetakey.com/codesample-signature.php
 
J'ai modifié pour tester la page html
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  8.         <script src="signature.js"></script>
  10.     </head>
  12.     <style>
  13.         body, canvas, div, form, input {
  14.             margin: 0;
  15.             padding: 0;
  16.         }
  17.         #wrapper {
  18.             width: 100%;
  19.             padding: 1px;
  20.         }
  21.         canvas {
  22.             position: relative;
  23.             margin: 1px;
  24.             margin-left: 0px;
  25.             border: 1px solid #3a87ad;
  26.         }
  27.         h1, p {
  28.             padding-left: 2px;
  29.             width: 100%;
  30.             margin: 0 auto;
  31.         }
  32.         #controlPanel {
  33.             margin: 2px;
  34.         }
  35.         #saveSignature {
  36.             display: none;
  37.         }
  38.     </style>
  40.     <body>
  41.         <div id="wrapper">
  42.             <p>Zetakey Signature Webapp</p>
  43.            
  44.             <form>
  45.                 <label for="Email">To:</label>
  46.                 <input type="email" id="sendemail" size="35" placeholder="Send to email" autocomplete="on"/><br>
  47.                 <label for="Name">Nom:</label>
  48.                 <input type="text" id="name" size="35" autocomplete="on"/>
  49.             </form>
  50.            
  51.             <div id="canvas">
  52.                 Canvas is not supported.
  53.             </div>
  54.            
  55.            
  56.             <script>
  57.                 zkSignature.capture();
  58.             </script>
  60.             <button type="button" onclick="zkSignature.clear()">
  61.                 Clear Signature
  62.             </button>
  63.             <br />
  64.             <img id="saveSignature" alt="Saved image png"/>
  66.             <form>
  67.                 <label for="Email"></label>
  68.                 <input type="hidden" type="email" id="replyemail"  size="35" value="Validation disclaimer" disabled />
  69.                 <br />
  70.                 <button type="button" onclick="zkSignature.send()">
  71.                     Send Email
  72.                 </button>
  73.             </form>
  74.         </div>
  75.     </body>
  76. </html>


 
Jusque là ça va +/-
 
Mais quand le mail est envoyé il n'apparaît pas le name du pseudo formulaire alors que le to apparaît bien.
 
Voici les modifications du .js (j'imagine que c'est un problème de traitement des données venant sur fichier html.
 

Code :
  1. **************************************************/
  2. var zkSignature = (function () {
  4.     var empty = true;
  6.     return {
  7.         //public functions
  8.         capture: function (){
  9.                 var parent = document.getElementById("canvas" );
  10.                 parent.childNodes[0].nodeValue = "";
  12.                 var canvasArea = document.createElement("canvas" );
  13.                 canvasArea.setAttribute("id", "newSignature" );
  14.                 parent.appendChild(canvasArea);
  16.                 var canvas = document.getElementById("newSignature" );
  17.                 var context = canvas.getContext("2d" );
  19.                 if (!context) {
  20.                     throw new Error("Failed to get canvas' 2d context" );
  21.                 }
  23.                 screenwidth = screen.width;
  25.                 if (screenwidth < 480) {
  26.                     canvas.width = screenwidth - 8;
  27.                     canvas.height = (screenwidth * 0.63);
  28.                 } else {
  29.                     canvas.width = 464;
  30.                     canvas.height = 304;
  31.                 }
  33.                 context.fillStyle = "#fff";
  34.                 context.strokeStyle = "#444";
  35.                 context.lineWidth = 1.2;
  36.                 context.lineCap = "round";
  38.                 context.fillRect(0, 0, canvas.width, canvas.height);
  40.                 context.fillStyle = "#3a87ad";
  41.                 context.strokeStyle = "#3a87ad";
  42.                 context.lineWidth = 1;
  43.                 context.moveTo((canvas.width * 0.042), (canvas.height * 0.7));
  44.                 context.lineTo((canvas.width * 0.958), (canvas.height * 0.7));
  45.                 context.stroke();
  47.                 context.fillStyle = "#fff";
  48.                 context.strokeStyle = "#444";
  50.                 var disableSave = true;
  51.                 var pixels = [];
  52.                 var cpixels = [];
  53.                 var xyLast = {};
  54.                 var xyAddLast = {};
  55.                 var calculate = false;
  56.                 //functions
  57.                 {
  58.                     function remove_event_listeners() {
  59.                         canvas.removeEventListener('mousemove', on_mousemove, false);
  60.                         canvas.removeEventListener('mouseup', on_mouseup, false);
  61.                         canvas.removeEventListener('touchmove', on_mousemove, false);
  62.                         canvas.removeEventListener('touchend', on_mouseup, false);
  64.                         document.body.removeEventListener('mouseup', on_mouseup, false);
  65.                         document.body.removeEventListener('touchend', on_mouseup, false);
  66.                     }
  68.                     function get_board_coords(e) {
  69.                         var x, y;
  71.                         if (e.changedTouches && e.changedTouches[0]) {
  72.                             var offsety = canvas.offsetTop || 0;
  73.                             var offsetx = canvas.offsetLeft || 0;
  75.                             x = e.changedTouches[0].pageX - offsetx;
  76.                             y = e.changedTouches[0].pageY - offsety;
  77.                         } else if (e.layerX || 0 == e.layerX) {
  78.                             x = e.layerX;
  79.                             y = e.layerY;
  80.                         } else if (e.offsetX || 0 == e.offsetX) {
  81.                             x = e.offsetX;
  82.                             y = e.offsetY;
  83.                         }
  85.                         return {
  86.                             x : x,
  87.                             y : y
  88.                         };
  89.                     };
  91.                     function on_mousedown(e) {
  92.                         e.preventDefault();
  93.                         e.stopPropagation();
  95.                         canvas.addEventListener('mousemove', on_mousemove, false);
  96.                         canvas.addEventListener('mouseup', on_mouseup, false);
  97.                         canvas.addEventListener('touchmove', on_mousemove, false);
  98.                         canvas.addEventListener('touchend', on_mouseup, false);
  100.                         document.body.addEventListener('mouseup', on_mouseup, false);
  101.                         document.body.addEventListener('touchend', on_mouseup, false);
  103.                         empty = false;
  104.                         var xy = get_board_coords(e);
  105.                         context.beginPath();
  106.                         pixels.push('moveStart');
  107.                         context.moveTo(xy.x, xy.y);
  108.                         pixels.push(xy.x, xy.y);
  109.                         xyLast = xy;
  110.                     };
  112.                     function on_mousemove(e, finish) {
  113.                         e.preventDefault();
  114.                         e.stopPropagation();
  116.                         var xy = get_board_coords(e);
  117.                         var xyAdd = {
  118.                             x : (xyLast.x + xy.x) / 2,
  119.                             y : (xyLast.y + xy.y) / 2
  120.                         };
  122.                         if (calculate) {
  123.                             var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
  124.                             var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
  125.                             pixels.push(xLast, yLast);
  126.                         } else {
  127.                             calculate = true;
  128.                         }
  130.                         context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
  131.                         pixels.push(xyAdd.x, xyAdd.y);
  132.                         context.stroke();
  133.                         context.beginPath();
  134.                         context.moveTo(xyAdd.x, xyAdd.y);
  135.                         xyAddLast = xyAdd;
  136.                         xyLast = xy;
  138.                     };
  140.                     function on_mouseup(e) {
  141.                         remove_event_listeners();
  142.                         disableSave = false;
  143.                         context.stroke();
  144.                         pixels.push('e');
  145.                         calculate = false;
  146.                     };
  148.                 }
  150.                 canvas.addEventListener('mousedown', on_mousedown, false);
  151.                 canvas.addEventListener('touchstart', on_mousedown, false);
  153.         }
  154.         ,
  155.         save : function(){
  157.                 var canvas = document.getElementById("newSignature" );
  158.                 // save canvas image as data url (png format by default)
  159.                 var dataURL = canvas.toDataURL("image/png" );
  160.                 document.getElementById("saveSignature" ).src = dataURL;
  162.         }
  163.         ,
  164.         clear : function(){
  166.                 var parent = document.getElementById("canvas" );
  167.                 var child = document.getElementById("newSignature" );
  168.                 parent.removeChild(child);
  169.                 empty = true;
  170.                 this.capture();
  172.         }
  173.         ,
  174.         send : function(){
  176.                 if (empty == false){
  178.                 var canvas = document.getElementById("newSignature" );
  179.                 var dataURL = canvas.toDataURL("image/png" );
  180.                 document.getElementById("saveSignature" ).src = dataURL;
  181.                 var sendemail = document.getElementById('sendemail').value;
  182.                 var name = document.getElementById('name').value;
  183.                 var replyemail = document.getElementById('replyemail').value;
  185.                 var dataform = document.createElement("form" );
  186.                 document.body.appendChild(dataform);
  187.                 dataform.setAttribute("action","upload_file.php" );
  188.                 dataform.setAttribute("enctype","multipart/form-data" );
  189.                 dataform.setAttribute("method","POST" );
  190.                 dataform.setAttribute("target","_self" );
  191.                 dataform.innerHTML =
  192.                     '<input type="text" name="image" value="' + dataURL + '"/>'
  193.                     +
  194.                     '<input type="email" name="email" value="' + sendemail + '"/>'
  195.                     +
  196.                     '<input type="text" name="name" value="' + name + '"/>'
  197.                     +
  198.                     '<input type="email" name="replyemail" value="' + replyemail + '"/>'
  199.                     +
  200.                     '<input type="submit" value="Click me" />';
  201.                 dataform.submit();
  203.                 }
  204.         }
  206.     }
  208. })()
  210. var zkSignature;


 
J'ai également modifié le fichier .php (qui doit aussi traiter les données) mais sans plus de succès.
 

Code :
  1. $name = $_POST["name"];


 

Code :
  1. $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 fais cette ligne, le name apparaît pas dans le mail
 

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


Quand c'est to, le to apparaît bien dans le mail.
 
Merci d'avance pour votre aide.
 
 
 
 

Reply

Marsh Posté le 26-05-2018 à 20:57:41   

Reply

Marsh Posté le 26-05-2018 à 21:26:26    

Bonjour,
 
Vérifie déjà ce que retourne ta variable name dans le js et ce que $_POST["name"] retourne dans le php.
Cela permettra de voir de quel côté il vaut mieux chercher.  ;)


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 26-05-2018 à 21:55:08    

Bonsoir,
 
Merci pour ta réponse.
 
C'est moi qui ai crée $_POST["name"]
 
Dans le fichier html, j'ai ajouté
 

Code :
  1. <label for="Name">Nom:</label>
  2.                 <input type="text" id="name" size="35" autocomplete="on"/>


 
et ceci dans le js
 

Code :
  1. var name = document.getElementById('name').value;


 
Merci pour ton aide.


Message édité par charliedaps le 26-05-2018 à 21:55:39
Reply

Marsh Posté le 26-05-2018 à 22:56:49    

Non mais ça j'ai compris.

 

Je ne vois pas à première vue d'où vient le problème, et quand on ne voit ni le problème ni de message d'erreur, la démarche à suivre c'est de debugger son code en regardant ce que valent les variables à chaque étape du code.

 

N'ayant qu'une partie du code je ne peux pas le faire à ta place.

 

Il existe des outils pour débugger afin de suivre pas à pas ce qui se passe à chaque ligne de code. Sinon tu peux utiliser des techniques barbares mais tout aussi efficaces, par exemple, dans le JS, après :

Code :
  1. var name = document.getElementById('name').value;


Tu peux ajouter :

Code :
  1. console.log(name);
  2. return;


Afin de récupérer dans la console ce que vaut la variable name et interrompre le reste du code.

 

Tout comme tu dois pouvoir faire en PHP :

Code :
  1. exit(var_dump($_POST));


Message édité par MaybeEijOrNot le 26-05-2018 à 22:57:31

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 27-05-2018 à 09:32:10    

Bonjour,
 
Je te remercie pour ces explications mais je ne suis arrivé à rien excepté planter toute la page :( et même en remettant l'ancien code, ça fonctionne pas.  Bref un délai que je vais bien trouvé.
 
Voici le code php.  Il n'y a que 3 fichiers.
 

Code :
  1. <?php
  3. function geturlonly() {
  4.     $urlpath = explode('/', $_SERVER['PHP_SELF']);
  5.     array_pop($urlpath);
  6.     $scriptname = implode("/", $urlpath);
  7.     $http_protocol = 'http';
  8.     if((!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') || ($_SERVER['SERVER_PORT'] == 443)){
  9.       $http_protocol = 'https';
  10.     }
  11.     return $http_protocol . "://" . $_SERVER["HTTP_HOST"] . $scriptname . "/";
  12. }
  14. function multi_attach_mail($to, $sendermail, $subject, $message, $files) {
  15.     // email fields: to, from, subject, and so on
  16.     $from = $sendermail;
  17.     $headers = "From: $from";
  19.     // boundary
  20.     $semi_rand = md5(time());
  21.     $mime_boundary = "==Multipart_Boundary_x{$semi_rand}x";
  23.     // headers for attachment
  24.     $headers .= "\nMIME-Version: 1.0\n" . "Content-Type: multipart/mixed;\n" . " boundary=\"{$mime_boundary}\"";
  26.     // multipart boundary
  27.     $message = "--{$mime_boundary}\n" . "Content-Type: text/plain; charset=\"iso-8859-1\"\n" . "Content-Transfer-Encoding: 7bit\n\n" . $message . "\n\n";
  29.     if (is_file($files)) {
  30.         $message .= "--{$mime_boundary}\n";
  31.         $fp = @fopen($files, "rb" );
  32.         $data = @fread($fp, filesize($files));
  33.         @fclose($fp);
  34.         $data = chunk_split(base64_encode($data));
  35.         $message .= "Content-Type: application/octet-stream; name=\"" . basename($files) . "\"\n" . "Content-Description: " . basename($files[$i]) . "\n" . "Content-Disposition: attachment;\n" . " filename=\"" . basename($files) . "\"; size=" . filesize($files) . ";\n" . "Content-Transfer-Encoding: base64\n\n" . $data . "\n\n";
  36.         $i = TRUE;
  37.     } else {
  39.         // preparing attachments
  40.         for ($i = 0; $i < count($files); $i++) {
  41.             if (is_file($files[$i])) {
  42.                 $message .= "--{$mime_boundary}\n";
  43.                 $fp = @fopen($files[$i], "rb" );
  44.                 $data = @fread($fp, filesize($files[$i]));
  45.                 @fclose($fp);
  46.                 $data = chunk_split(base64_encode($data));
  47.                 $message .= "Content-Type: application/octet-stream; name=\"" . basename($files[$i]) . "\"\n" . "Content-Description: " . basename($files[$i]) . "\n" . "Content-Disposition: attachment;\n" . " filename=\"" . basename($files[$i]) . "\"; size=" . filesize($files[$i]) . ";\n" . "Content-Transfer-Encoding: base64\n\n" . $data . "\n\n";
  48.             }
  49.         }
  50.     }
  51.     $message .= "--{$mime_boundary}--";
  52.     $returnpath = "-f" . $sendermail;
  53.     $ok = @mail($to, $subject, $message, $headers, $returnpath);
  54.     if ($ok) {
  55.         return $i;
  56.     } else {
  57.         return FALSE;
  58.     }
  59. }
  61. function base64_to_jpeg($base64_string, $output_file) {
  62.     $ifp = @fopen($output_file, "wb" );
  64.     $data = explode(',', $base64_string);
  66.     @fwrite($ifp, base64_decode($data[1]));
  67.     @fclose($ifp);
  68.     return $output_file;
  70. }
  72. function add_ZK_mark($inputfile, $outputfile) {
  74. //    var_dump(gd_info());
  75.     $im = @imagecreatefrompng($inputfile);
  77.     $bg = @imagecolorallocate($im, 255, 255, 255);
  78.     $textcolor = @imagecolorallocate($im, 0, 0, 255);
  80.     list($x, $y, $type) = getimagesize($inputfile);
  82.     $txtpos_x = $x - 170;
  83.     $txtpos_y = $y - 20;
  85.     @imagestring($im, 5, $txtpos_x, $txtpos_y, 'Powered by Jet', $textcolor);
  87.     $txtpos_x = $x - 145;
  88.     $txtpos_y = 20;
  90.     @imagestring($im, 3, $txtpos_x, $txtpos_y, date("d-m-Y H:i:s" ), $textcolor);
  92.     @imagepng($im, $outputfile);
  94.     // Output the image
  95.     //imagejpeg($im);
  97.     @imagedestroy($im);
  99. }
  100. date_default_timezone_set("Europe/Madrid" );
  101. $output_file = "captured/signature" . date("d-m-Y-H-i-s-" ).time(). ".png";
  102. base64_to_jpeg($_POST["image"], $output_file);
  104. add_ZK_mark($output_file, $output_file);
  106. $to = $_POST["email"];
  107. $name = $_POST["name"];
  108. $replyemail = $_POST["replyemail"];
  109. $replyemail = "contact@zetakey.com";
  111. if( (!isset($_POST["email"])) || ($to == "toemail@example.com" ) || ($replyemail == "youremail@example.com" )|| ($to == "" )){
  112.     echo("<p>Incorrect email address...</p>" );
  113.     echo "<a href=\"index.html\">Sign and Send again!</a>";
  114.     exit;
  116. }
  118. $subject = "Contrat Jet";
  119. $curdir = dirname($_SERVER['REQUEST_URI']) . "/";
  120. $dir = $_SERVER['SERVER_NAME'] . $curdir;
  122. $urlonly = geturlonly();
  123. $body = "Signé le - Signed on " . date('d.m.Y H:i:s') .  "\n Signed and Send by Jet " .  "\n Test deuxième ligne $to ";
  126. //$from = "contact@zetakey.com";
  127. $headers = "From: $replyemail" . "\r\nReply-To: $replyemail";
  129. if (multi_attach_mail($to, $replyemail, $subject, $body, $output_file)) {
  130.     //if (mail($to, $subject, $body, $headers)) {
  131.     echo("<p>Message successfully sent to " . $to . " !</p>" );
  132. } else {
  133.     echo("<p>Message delivery failed...</p>" );
  134. }
  136. echo "<a href=\"index.html\">Sign and Send again!</a>";
  138. exit ;
  139. ?>


 
Je me suis basé sur la conception d'un formulaire mais je dois admettre que le fichier upload, j'ai comprends pas grand chose.
 
Merci d'avance pour ton aide.
 
Bonne journée.


Message édité par charliedaps le 27-05-2018 à 09:33:11
Reply

Marsh Posté le 27-05-2018 à 11:58:40    

Bonjour,

 

Pour l'instant, sans envoyer de mail, juste en testant les parties qui sont censées poser problème, chez moi, ceci fonctionne :

 

page.html

Code :
  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.       <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  6.       <script type="text/javascript" src="signature.js"></script>
  7.       <style type="text/css">
  8.          body, canvas, div, form, input {
  9.             margin: 0;
  10.             padding: 0;
  11.          }
  12.          #wrapper {
  13.             width: 100%;
  14.             padding: 1px;
  15.          }
  16.          canvas {
  17.             position: relative;
  18.             margin: 1px;
  19.             margin-left: 0px;
  20.             border: 1px solid #3a87ad;
  21.          }
  22.          h1, p {
  23.             padding-left: 2px;
  24.             width: 100%;
  25.             margin: 0 auto;
  26.          }
  27.             #controlPanel {
  28.             margin: 2px;
  29.          }
  30.          #saveSignature {
  31.             display: none;
  32.          }
  33.       </style>
  34.    </head>
  35.    <body>
  36.       <div id="wrapper">
  37.          <p>Zetakey Signature Webapp</p>
  38.          <form>
  39.             <label for="Email">To:</label>
  40.             <input type="email" id="sendemail" size="35" placeholder="Send to email" autocomplete="on">
  41.             <br>
  42.             <label for="Name">Nom:</label>
  43.             <input type="text" id="name" size="35" autocomplete="on">
  44.          </form>
  45.          <div id="canvas">Canvas is not supported.</div>
  46.          <script type="text/javascript">zkSignature.capture();</script>
  47.          <button type="button" onclick="zkSignature.clear()">Clear Signature</button>
  48.          <br>
  49.          <img id="saveSignature" alt="Saved image png">
  50.          <form>
  51.             <label for="Email"></label>
  52.             <input type="hidden" id="replyemail"  size="35" value="Validation disclaimer" disabled>
  53.             <br>
  54.             <button type="button" onclick="zkSignature.send()">Send Email</button>
  55.          </form>
  56.       </div>
  57.    </body>
  58. </html>
 

signature.js :

Code :
  1. var zkSignature = (function () {
  2.    var empty = true;
  3.    return {
  4.       //public functions
  5.       capture: function (){
  6.          var parent = document.getElementById("canvas" );
  7.          parent.childNodes[0].nodeValue = "";
  8.          var canvasArea = document.createElement("canvas" );
  9.          canvasArea.setAttribute("id", "newSignature" );
  10.          parent.appendChild(canvasArea);
  11.          var canvas = document.getElementById("newSignature" );
  12.          var context = canvas.getContext("2d" );
  13.          if (!context) {
  14.             throw new Error("Failed to get canvas' 2d context" );
  15.          }
  16.          screenwidth = screen.width;
  17.          if (screenwidth < 480) {
  18.             canvas.width = screenwidth - 8;
  19.             canvas.height = (screenwidth * 0.63);
  20.          } else {
  21.             canvas.width = 464;
  22.             canvas.height = 304;
  23.          }
  24.          context.fillStyle = "#fff";
  25.          context.strokeStyle = "#444";
  26.          context.lineWidth = 1.2;
  27.          context.lineCap = "round";
  28.          context.fillRect(0, 0, canvas.width, canvas.height);
  29.          context.fillStyle = "#3a87ad";
  30.          context.strokeStyle = "#3a87ad";
  31.          context.lineWidth = 1;
  32.          context.moveTo((canvas.width * 0.042), (canvas.height * 0.7));
  33.          context.lineTo((canvas.width * 0.958), (canvas.height * 0.7));
  34.          context.stroke();
  35.          context.fillStyle = "#fff";
  36.          context.strokeStyle = "#444";
  37.          var disableSave = true;
  38.          var pixels = [];
  39.          var cpixels = [];
  40.          var xyLast = {};
  41.          var xyAddLast = {};
  42.          var calculate = false;
  43.          //functions
  44.          {
  45.             function remove_event_listeners() {
  46.                canvas.removeEventListener('mousemove', on_mousemove, false);
  47.                canvas.removeEventListener('mouseup', on_mouseup, false);
  48.                canvas.removeEventListener('touchmove', on_mousemove, false);
  49.                canvas.removeEventListener('touchend', on_mouseup, false);
  50.                document.body.removeEventListener('mouseup', on_mouseup, false);
  51.                document.body.removeEventListener('touchend', on_mouseup, false);
  52.             }
  53.             function get_board_coords(e) {
  54.                var x, y;
  55.                if (e.changedTouches && e.changedTouches[0]) {
  56.                   var offsety = canvas.offsetTop || 0;
  57.                   var offsetx = canvas.offsetLeft || 0;
  58.                   x = e.changedTouches[0].pageX - offsetx;
  59.                   y = e.changedTouches[0].pageY - offsety;
  60.                } else if (e.layerX || 0 == e.layerX) {
  61.                   x = e.layerX;
  62.                   y = e.layerY;
  63.                } else if (e.offsetX || 0 == e.offsetX) {
  64.                   x = e.offsetX;
  65.                   y = e.offsetY;
  66.                }
  67.                return {
  68.                   x : x,
  69.                   y : y
  70.                };
  71.             };
  72.             function on_mousedown(e) {
  73.                e.preventDefault();
  74.                e.stopPropagation();
  75.                canvas.addEventListener('mousemove', on_mousemove, false);
  76.                canvas.addEventListener('mouseup', on_mouseup, false);
  77.                canvas.addEventListener('touchmove', on_mousemove, false);
  78.                canvas.addEventListener('touchend', on_mouseup, false);
  79.                document.body.addEventListener('mouseup', on_mouseup, false);
  80.                document.body.addEventListener('touchend', on_mouseup, false);
  81.                empty = false;
  82.                var xy = get_board_coords(e);
  83.                context.beginPath();
  84.                pixels.push('moveStart');
  85.                context.moveTo(xy.x, xy.y);
  86.                pixels.push(xy.x, xy.y);
  87.                xyLast = xy;
  88.             };
  89.             function on_mousemove(e, finish) {
  90.                e.preventDefault();
  91.                e.stopPropagation();
  92.                var xy = get_board_coords(e);
  93.                var xyAdd = {
  94.                   x : (xyLast.x + xy.x) / 2,
  95.                   y : (xyLast.y + xy.y) / 2
  96.                };
  97.                if (calculate) {
  98.                   var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
  99.                   var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
  100.                   pixels.push(xLast, yLast);
  101.                } else {
  102.                   calculate = true;
  103.                }
  104.                context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
  105.                pixels.push(xyAdd.x, xyAdd.y);
  106.                context.stroke();
  107.                context.beginPath();
  108.                context.moveTo(xyAdd.x, xyAdd.y);
  109.                xyAddLast = xyAdd;
  110.                xyLast = xy;
  111.             };
  112.             function on_mouseup(e) {
  113.                remove_event_listeners();
  114.                disableSave = false;
  115.                context.stroke();
  116.                pixels.push('e');
  117.                calculate = false;
  118.             };
  119.          }
  120.          canvas.addEventListener('mousedown', on_mousedown, false);
  121.          canvas.addEventListener('touchstart', on_mousedown, false);
  122.       },
  123.       save : function(){
  124.          var canvas = document.getElementById("newSignature" );
  125.          // save canvas image as data url (png format by default)
  126.          var dataURL = canvas.toDataURL("image/png" );
  127.          document.getElementById("saveSignature" ).src = dataURL;
  128.       },
  129.       clear : function(){
  130.          var parent = document.getElementById("canvas" );
  131.          var child = document.getElementById("newSignature" );
  132.          parent.removeChild(child);
  133.          empty = true;
  134.          this.capture();
  135.       },
  136.       send : function(){
  137.          if (empty == false){
  138.          var canvas = document.getElementById("newSignature" );
  139.          var dataURL = canvas.toDataURL("image/png" );
  140.          document.getElementById("saveSignature" ).src = dataURL;
  141.          var sendemail = document.getElementById('sendemail').value;
  142.          var name = document.getElementById('name').value;
  143.          var replyemail = document.getElementById('replyemail').value;
  144.          var dataform = document.createElement("form" );
  145.          document.body.appendChild(dataform);
  146.          dataform.setAttribute("action","test.php" ); //attention, page de traitement du formulaire
  147.          dataform.setAttribute("enctype","multipart/form-data" );
  148.          dataform.setAttribute("method","POST" );
  149.          dataform.setAttribute("target","_self" );
  150.          dataform.innerHTML =
  151.             '<input type="text" name="image" value="' + dataURL + '"/>'
  152.             +
  153.             '<input type="email" name="email" value="' + sendemail + '"/>'
  154.             +
  155.             '<input type="text" name="name" value="' + name + '"/>'
  156.             +
  157.             '<input type="email" name="replyemail" value="' + replyemail + '"/>'
  158.             +
  159.             '<input type="submit" value="Click me" />';
  160.          dataform.submit();
  161.          }
  162.       }
  163.    }
  164. })()
  165. var zkSignature;
 

test.php

Code :
  1. <?php
  2. #test.php#
  4. $to = $_POST["email"];
  5. $name = $_POST["name"];
  6. $replyemail = $_POST["replyemail"];
  7. $body = "Signé le - Signed on ".date('d.m.Y H:i:s')."\n Signed and Send by Jet\n Test deuxième ligne $to\n Test troisième ligne $name";
  8. echo $body;
  9. ?>
 

As-tu des problèmes avec ça ?


Message édité par MaybeEijOrNot le 27-05-2018 à 12:00:35

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 27-05-2018 à 12:12:43    

Re bonjour,
 
Merci pour cette réponse rapide.
 
Ca fonctionne.  
 
J'ai bien la page test.php qui affiche tout ce qu'il faut..... excepté la signature ;) et bien entendu l'envoi du mail.
 
Sans vouloir abuser (vu que j'aimerais bien comprendre et apprendre)  qu'as tu changé (excepté la création de la page test.php et de la ligne 146 du .js ?
 
Merci encore pour ton aide précieuse.
 
 
 
 
 

Reply

Marsh Posté le 27-05-2018 à 12:20:54    

Pour l'instant rien de spécial...
J'ai juste remis "au propre" le code. Maintenant si tu testes avec ton ancien PHP et que ça fonctionne alors c'est qu'à mon avis le problème provenait du document HTML qui contenait de petites erreurs.
Notamment, la balise style qui n'était pas dans la balise head, le type non précisé dans la balise style et les balises script et la ligne suivante :

Code :
  1. <input type="hidden" id="replyemail"  size="35" value="Validation disclaimer" disabled>


contenait deux attributs type.


Message édité par MaybeEijOrNot le 27-05-2018 à 12:22:04

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 27-05-2018 à 12:26:14    

C'est moi qui ai ajouté le hidden car il n'a aucune utilité d'être visible.
 
Ok je vais tester avec l'ancien PHP.
 
Je reviens vers toi.
 
Merci.

Reply

Marsh Posté le 27-05-2018 à 12:32:24    

Test effectué.  Ca fonctionne parfaitement avec la signature et l'envoi du mail.
 
Donc effectivement, le problème était dans le html.
 
Un très très grand merci pour ton aide ultra précieuse.
 
Je vais pouvoir mettre tout en place maintenant.
 
Génial.  Merci
 
Bon dimanche

Reply

Marsh Posté le 27-05-2018 à 12:32:24   

Reply

Marsh Posté le 27-05-2018 à 12:34:38    

Pour l'histoire d'attributs, tu avais mis :

Code :
  1. <input type="hidden" type="email" id="replyemail"  size="35" value="Validation disclaimer" disabled />


Tu ne peux pas mettre type="hidden" et type="email", c'est soit l'un soit l'autre. Tu ne peux pas avoir deux valeurs au même moment pour la même chose, c'est une règle de base de la programmation.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 27-05-2018 à 12:38:20    

MaybeEijOrNot a écrit :

Pour l'histoire d'attributs, tu avais mis :

Code :
  1. <input type="hidden" type="email" id="replyemail"  size="35" value="Validation disclaimer" disabled />


Tu ne peux pas mettre type="hidden" et type="email", c'est soit l'un soit l'autre. Tu ne peux pas avoir deux valeurs au même moment pour la même chose, c'est une règle de base de la programmation.


 
Effectivement, ça paraît logique.   En fait, je cherchais à ne pas faire apparaître cet imput (je l'avais supprimé et forcement ça ne fonctionnait plus) et donc content de ma trouvaille et surtout du bon fonctionnement, je ne suis pas allé plus loin.
J'imaginais pas que c'était ce détail qui bloquait tout.
 
Maintenant ça fonctionne grâce à ton aide.
 
Merci encore.

Reply

Marsh Posté le 27-05-2018 à 12:53:50    

Je ne sais pas si c'est ce détail là, mais c'est une possibilité.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 09-06-2018 à 14:48:53    

Bonjour,
 
Suite de mon projet qui avance pas mal.  Mise en forme css et consort.  Pour ça je m'en sors mais j'ai un petit souci.
 
Je voudrais que le formulaire soit envoyé au client et aussi à moi.
Je n'arrive pas à trouver comment indiquer au fichier php qu'il faut envoyer à l'adresse du formulaire et à une adresse mail prédéfinie (à savoir la mienne)
 

Code :
  1. <?php
  3. function geturlonly() {
  4.     $urlpath = explode('/', $_SERVER['PHP_SELF']);
  5.     array_pop($urlpath);
  6.     $scriptname = implode("/", $urlpath);
  7.     $http_protocol = 'http';
  8.     if((!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') || ($_SERVER['SERVER_PORT'] == 443)){
  9.       $http_protocol = 'https';
  10.     }
  11.     return $http_protocol . "://" . $_SERVER["HTTP_HOST"] . $scriptname . "/";
  12. }
  14. function multi_attach_mail($to, $sendermail, $subject, $message, $files) {
  15.     // email fields: to, from, subject, and so on
  16.     $from = $sendermail;
  17.     $headers = "From: $from";
  19.     // boundary
  20.     $semi_rand = md5(time());
  21.     $mime_boundary = "==Multipart_Boundary_x{$semi_rand}x";
  23.     // headers for attachment
  24.     $headers .= "\nMIME-Version: 1.0\n" . "Content-Type: multipart/mixed;\n" . " boundary=\"{$mime_boundary}\"";
  26.     // multipart boundary
  27.     $message = "--{$mime_boundary}\n" . "Content-Type: text/plain; charset=\"iso-8859-1\"\n" . "Content-Transfer-Encoding: 7bit\n\n" . $message . "\n\n";
  29.     if (is_file($files)) {
  30.         $message .= "--{$mime_boundary}\n";
  31.         $fp = @fopen($files, "rb" );
  32.         $data = @fread($fp, filesize($files));
  33.         @fclose($fp);
  34.         $data = chunk_split(base64_encode($data));
  35.         $message .= "Content-Type: application/octet-stream; name=\"" . basename($files) . "\"\n" . "Content-Description: " . basename($files[$i]) . "\n" . "Content-Disposition: attachment;\n" . " filename=\"" . basename($files) . "\"; size=" . filesize($files) . ";\n" . "Content-Transfer-Encoding: base64\n\n" . $data . "\n\n";
  36.         $i = TRUE;
  37.     } else {
  39.         // preparing attachments
  40.         for ($i = 0; $i < count($files); $i++) {
  41.             if (is_file($files[$i])) {
  42.                 $message .= "--{$mime_boundary}\n";
  43.                 $fp = @fopen($files[$i], "rb" );
  44.                 $data = @fread($fp, filesize($files[$i]));
  45.                 @fclose($fp);
  46.                 $data = chunk_split(base64_encode($data));
  47.                 $message .= "Content-Type: application/octet-stream; name=\"" . basename($files[$i]) . "\"\n" . "Content-Description: " . basename($files[$i]) . "\n" . "Content-Disposition: attachment;\n" . " filename=\"" . basename($files[$i]) . "\"; size=" . filesize($files[$i]) . ";\n" . "Content-Transfer-Encoding: base64\n\n" . $data . "\n\n";
  48.             }
  49.         }
  50.     }
  51.     $message .= "--{$mime_boundary}--";
  52.     $returnpath = "-f" . $sendermail;
  53.     $ok = @mail($to, $subject, $message, $headers, $returnpath);
  54.     if ($ok) {
  55.         return $i;
  56.     } else {
  57.         return FALSE;
  58.     }
  59. }
  61. function base64_to_jpeg($base64_string, $output_file) {
  62.     $ifp = @fopen($output_file, "wb" );
  64.     $data = explode(',', $base64_string);
  66.     @fwrite($ifp, base64_decode($data[1]));
  67.     @fclose($ifp);
  68.     return $output_file;
  70. }
  72. function add_ZK_mark($inputfile, $outputfile) {
  74. //    var_dump(gd_info());
  75.     $im = @imagecreatefrompng($inputfile);
  77.     $bg = @imagecolorallocate($im, 255, 255, 255);
  78.     $textcolor = @imagecolorallocate($im, 0, 0, 255);
  80.     list($x, $y, $type) = getimagesize($inputfile);
  82.     $txtpos_x = $x - 170;
  83.     $txtpos_y = $y - 20;
  85.     @imagestring($im, 5, $txtpos_x, $txtpos_y, 'Powered by Jet', $textcolor);
  87.     $txtpos_x = $x - 145;
  88.     $txtpos_y = 20;
  90.     @imagestring($im, 3, $txtpos_x, $txtpos_y, date("d-m-Y H:i:s" ), $textcolor);
  92.     @imagepng($im, $outputfile);
  94.     // Output the image
  95.     //imagejpeg($im);
  97.     @imagedestroy($im);
  99. }
  100. date_default_timezone_set("Europe/Madrid" );
  101. $output_file = "captured/signature" . date("d-m-Y-H-i-s-" ).time(). ".png";
  102. base64_to_jpeg($_POST["image"], $output_file);
  104. add_ZK_mark($output_file, $output_file);
  106. $to = $_POST["email"];
  107. $name = $_POST["name"];
  108. $prenom = $_POST["prenom"];
  109. $replyemail = $_POST["replyemail"];
  110. $replyemail = "MON ADRESSE MAIL";
  112. if( (!isset($_POST["email"])) || ($to == "toemail@example.com" ) || ($replyemail == "youremail@example.com" )|| ($to == "" )){
  113.     echo("<p>Incorrect email address...</p>" );
  114.     echo "<a href=\"page.html\">Sign and Send again!</a>";
  115.     exit;
  117. }
  119. $subject = "Contrat ";
  120. $curdir = dirname($_SERVER['REQUEST_URI']) . "/";
  121. $dir = $_SERVER['SERVER_NAME'] . $curdir;
  123. $urlonly = geturlonly();
  124. $body = "TEXTE";
  126. //$from = "MON ADRESSE MAIL";
  127. $headers = "From: $replyemail" . "\r\nReply-To: $replyemail";
  129. if (multi_attach_mail($to, $replyemail, $subject, $body, $output_file)) {
  130.     //if (mail($to, $subject, $body, $headers)) {
  131.     echo("<p>Message successfully sent to " . $to . " !</p>" );
  132. } else {
  133.     echo("<p>Message delivery failed...</p>" );
  134. }
  136. echo "<a href=\"page.html\">Sign and Send again!</a>";
  138. exit ;
  139. ?>


 
Merci d'avance pour votre aide.


Message édité par charliedaps le 09-06-2018 à 14:52:41
Reply

Marsh Posté le 09-06-2018 à 15:27:00    

Ici :

Code :
  1. if (multi_attach_mail($to, $replyemail, $subject, $body, $output_file)) {
  2.     //if (mail($to, $subject, $body, $headers)) {
  3.     echo("<p>Message successfully sent to " . $to . " !</p>" );
  4. } else {
  5.     echo("<p>Message delivery failed...</p>" );
  6. }


Le mail est envoyé dans la condition du "if". Ici cela veut littéralement dire :

Citation :

Si la fonction "multi_attach_mail", avec les paramètres qui lui sont passés, retourne une valeur non fausse ou non nulle alors ...


 
Tu peux-donc transformer en :

Code :
  1. $toyourmail = 'yourmail@mail.com';
  2. if (multi_attach_mail($to, $replyemail, $subject, $body, $output_file)) {
  3.     //if (mail($to, $subject, $body, $headers)) {
  4.     multi_attach_mail($toyourmail, $replyemail, $subject, $body, $output_file);
  5.     echo("<p>Message successfully sent to " . $to . " !</p>" );
  6. } else {
  7.     echo("<p>Message delivery failed...</p>" );
  8. }


 
Je ne te gère pas l'erreur en cas de problème d'envoi à ton adresse mail car je ne sais pas comment tu comptes gérer le cas où le mail part bien à l'adresse client mais pas à la tienne.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 09-06-2018 à 17:39:37    

MaybeEijOrNot a écrit :

Ici :

Code :
  1. if (multi_attach_mail($to, $replyemail, $subject, $body, $output_file)) {
  2.     //if (mail($to, $subject, $body, $headers)) {
  3.     echo("<p>Message successfully sent to " . $to . " !</p>" );
  4. } else {
  5.     echo("<p>Message delivery failed...</p>" );
  6. }


Le mail est envoyé dans la condition du "if". Ici cela veut littéralement dire :

Citation :

Si la fonction "multi_attach_mail", avec les paramètres qui lui sont passés, retourne une valeur non fausse ou non nulle alors ...


 
Tu peux-donc transformer en :

Code :
  1. $toyourmail = 'yourmail@mail.com';
  2. if (multi_attach_mail($to, $replyemail, $subject, $body, $output_file)) {
  3.     //if (mail($to, $subject, $body, $headers)) {
  4.     multi_attach_mail($toyourmail, $replyemail, $subject, $body, $output_file);
  5.     echo("<p>Message successfully sent to " . $to . " !</p>" );
  6. } else {
  7.     echo("<p>Message delivery failed...</p>" );
  8. }


 
Je ne te gère pas l'erreur en cas de problème d'envoi à ton adresse mail car je ne sais pas comment tu comptes gérer le cas où le mail part bien à l'adresse client mais pas à la tienne.


 
 
Génial.  Merci beaucoup.  Ca fonctionne nickel.
Comme quoi, le savoir, ça aide.  J'ai bien passé 1H à tester dans tous les sens ;) ;)
 
Quand même une petite question.
Lors de l'envoi vers gmail, le texte s'affiche parfaitement.  Ce qui n'est pas le cas quand j'envoie à une autre adresse mail qui est un nom de domaine dont je dispose.  Les accents ne s'affichent pas.
 
Allez dernière question.  Y a t il une solution plus facile dans le body qui sert pour le texte et l'envoi du mail pour faire quelque chose de joli et de bien présenté ?
J'ai testé, c'est clair et net mais pas vraiment pro.
 

Code :
  1. $body = "Test blabla $name $prenom e-mail $to \n blabla\n blabla.\n blabla \n \n Signé le ".date('d.m.Y H.i.s')." \n Signé et envoyé par société";


 
Peut on se baser sur le code html avec le css ?
 
Merci


Message édité par charliedaps le 09-06-2018 à 17:45:33
Reply

Marsh Posté le 09-06-2018 à 18:17:24    

@ MaybeEijOrNot
 
J'ai reçu un mail m'indiquant que tu avais posté une réponse mais je ne la vois pas sur le forum.

Reply

Marsh Posté le 09-06-2018 à 18:25:10    

Tu peux envoyer un mail avec du HTML, du texte et des pièce-jointes mais ça va te demander du boulot. Il faut laisser le content-type en multipart/mixed puis dans le premier boundary tu crées un content-type multipart/alternative dans lequel tu crées deux sub-boundaries, l'un pour le texte et l'autre pour le HTML. Il vaut mieux laisser une version texte au cas où le client ne gère pas le HTML.
 
Pour cela il faudra modifier ta fonction "multi_attach_mail($to, $sendermail, $subject, $message, $files)" pour qu'elle prenne un paramètre de plus (le contenu HTML) et pour qu'elle écrive correctement le header du mail par rapport à ce que je t'ai décrit au-dessus.
 
Tu peux retrouver à quoi ressemble un header de mail ici : https://www.arobase.org/newsletters [...] native.htm
C'est ce qu'écrit ta fameuse fonction mais pour un content-type multipart/mixed.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 09-06-2018 à 18:27:13    

Merci pour ta réponse.
Je vais me pencher la dessus demain.
 
J'ai un autre souci que je n'arrive pas à résoudre donc chaque chose en son temps.
 
Merci à toi
 
Bonne soirée.

Reply

Marsh Posté le 09-06-2018 à 18:33:03    

Au secours quand même.....
 
J'ai donc peaufiné une partie du formulaire html.
 

Code :
  1. <fieldset id="section-1">
  2.    <legend>Vous</legend>
  3.   <label for="Genre">Mr / Mme :</label>
  4.             <input type="text" id="genre" size="35" placeholder="Mr / Mme" autocomplete="on"> 
  5.   <label for="Name">Nom :</label>
  6.             <input type="text" id="name" size="35" placeholder="Votre Nom" autocomplete="on">
  7.   <label for="Prenom">Prénom :</label>
  8.             <input type="text" id="prenom" size="35" placeholder="Votre Prénom" autocomplete="on">
  9.  </fieldset>  
  11.  <fieldset id="section-1">
  12.    <legend>Vos coordonnées</legend>
  13.   <label for="Adresse">Adresse :</label>
  14.             <input type="text" id="adresse" size="90" placeholder="Adresse Complète avec CP, Ville et Pays" autocomplete="on">
  15.   <label for="Email">E-mail :</label>
  16.             <input type="email" id="sendemail" size="35" placeholder="Votre e-mail" autocomplete="on">
  17.             <label for="Portable">Portable :</label>
  18.             <input type="text" id="portable" size="35" placeholder="Votre portable" autocomplete="on">
  19.  </fieldset>


 
Idem pour le signature.js
 
J'ai ajouté  
 

Code :
  1. var genre = document.getElementById('genre').value;


 
et  
 

Code :
  1. '<input type="text" name="genre" value="' + genre + '"/>'
  2.             +


 
Dans le fichier php d'envoi
 

Code :
  1. $genre = $_POST["genre"];


 
et en test dans le body de ce même fichier
 

Code :
  1. $body = "Genre $genre";


 
Et donc mon genre du formulaire ne s'affiche pas dans le mail qui est envoyé alors que name et prenom s'affichent.
 
Je ne comprends pas d'où vient le problème car j'ai déjà fait cette modification pour prenom et ça a fonctionné.
 
Merci d'avance

Message cité 1 fois
Message édité par charliedaps le 09-06-2018 à 18:37:10
Reply

Marsh Posté le 09-06-2018 à 19:16:49    

En HTML, une id est unique et ne peut donc correspondre qu'à un élément, cf. fieldset.

 

L'attribut "for" d'un élément doit prendre pour valeur l'id d'un champ, bien que normalement non sensible à la casse, mieux vaut rester cohérent et ne pas utiliser de majuscule quand l'id n'en contient pas.

 

En PHP, l'écriture d'une variable entre guillemets doubles est possible mais n'est pas conseillée, mieux vaut utiliser l'opérateur de concaténation :

Code :
  1. $var = 'blablabla'.$variable.'blablabla';
 

En français, on utilise "M." pour monsieur et "Mme" pour madame, c'est en anglais qu'on utilise "Mr".  ;)

 

Sinon je ne vois pas d'où vient le problème. Mais comme vu au début du sujet, suffit que tu ais fait une faute ailleurs pour que ça bloque.

Message cité 1 fois
Message édité par MaybeEijOrNot le 09-06-2018 à 19:17:33

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 09-06-2018 à 20:28:51    

Merci pour ta réponse rapide et précise.
 
Je vais tester tout cela et je reviens donner la réponse.
 
C'est vrai pour le M.  ça sera corrigé ;)
 
Bonne soirée.

Reply

Marsh Posté le 10-06-2018 à 10:07:40    

MaybeEijOrNot a écrit :

En HTML, une id est unique et ne peut donc correspondre qu'à un élément, cf. fieldset.
 
L'attribut "for" d'un élément doit prendre pour valeur l'id d'un champ, bien que normalement non sensible à la casse, mieux vaut rester cohérent et ne pas utiliser de majuscule quand l'id n'en contient pas.
 
En PHP, l'écriture d'une variable entre guillemets doubles est possible mais n'est pas conseillée, mieux vaut utiliser l'opérateur de concaténation :

Code :
  1. $var = 'blablabla'.$variable.'blablabla';


 
En français, on utilise "M." pour monsieur et "Mme" pour madame, c'est en anglais qu'on utilise "Mr".  ;)  
 
Sinon je ne vois pas d'où vient le problème. Mais comme vu au début du sujet, suffit que tu ais fait une faute ailleurs pour que ça bloque.


 
 
Bonjour MaybeEijOrNot,
 
Encore un grand merci pour tes réponses.
 
Donc j'ai modifié le fieldset.  Effectivement j'avais une erreur vu qu'il y avait plusieurs id les mêmes.  De ce côté c'est OK.  Je n'ai plus d'erreur dans le html.
 
J'ai également modifié les "for" pour qu'il soient parfaitement les mêmes que les "id".
 
Idem pour le M. ;)
 
Par contre, concernant le php, je ne comprends pas à quelle ligne tu fais référence ?
 
Ce qui est vexant, c'est que j'ai ajouté $name et $prenom il y a quelques temps et ça fonctionne mais $genre ne fonctionne pas.
 
Merci
 
 
 
 

Reply

Marsh Posté le 10-06-2018 à 11:13:15    

Re bonjour,
 
Finalement, j'ai repris depuis le début.  J'ai modifié les choses que tu m'as conseillé et ça fonctionne dans son intégralité.
Je ne vois pas où était l'erreur (un peu bête point de vue compréhension) mais niveau efficacité, c'est tout bon ;)
 
Merci pour ton aide précieuse.

Reply

Marsh Posté le 10-06-2018 à 11:55:21    

Pour le PHP :

charliedaps a écrit :

Code :
  1. $body = "Genre $genre";



Tu inscris ta variable à l'intérieur de ta chaîne de caractères, cela fonctionne en PHP car tu utilises des guillemets doubles. Néanmoins le comportement peut être un peu imprévisible, mieux vaut éviter d'inclure la variable dans la chaîne de caractères.
 
Sinon moi non plus je ne sais pas d'où vient l'erreur, mais niveau compréhension, ce qu'il faut retenir c'est qu'il faut être rigoureux. Les langages informatiques sont interprétés par des machines et donc la moindre faute peut tout faire déconner.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 10-06-2018 à 21:45:36    

Merci beaucoup pour ton aide.
 
Tout fonctionne actuellement et j'ai quasi fini.
 
Merci

Reply

Marsh Posté le 02-01-2022 à 20:41:35    

J'ai testé votre exemple qui fonctionne correctement
 
Je désirerai inclure une 2eme zone de dessin et pour ce faire j'ai dupliqué signature.js mais cela ne fonctionne pas
Avez vous une idée pour créer cette 2eme zone ?
 
A+

Reply

Marsh Posté le 02-01-2022 à 20:42:46    

Sur un même formulaire
 
Mon code:
 

Code :
  1. <head>
  2.   <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  3.   <title>Rucher Montminois</title>
  4.   <link rel="stylesheet" href="styles_hiver.css" type="text/css" media="screen" />
  5.   <link rel="stylesheet" type="text/css" href="print.css" media="print" />
  6.   <script src="../js/signature.js"></script>
  7.   <script src="../js/signature1.js"></script>
  8.   <link rel="icon" type="image/png" href="favicon.png" /> 
  9. </head>
  10. ......
  11. ......
  12. <tr>
  13.                           <td rowspan="5" width="30%" height=50 align="center"><b>Signature des conducteurs</b></td>
  14.                           <td width="35%" align="center"><b>Matin</b></td>
  15.                           <td width="35%" align="center"><b>Après-midi</b></td>
  17.                       </tr>
  18.                       <tr>
  19.                           <td width="35%" align="center"><div id="canvas"><script type="text/javascript">Signature.capture();</script></div></td> 
  20.                           <td width="35%" align="center"><div id="canvas1"><script type="text/javascript">Signature1.capture();</script></div></td>
  21.                       </tr>   
  22.                       <tr>
  23.                           <td width="35%" align="center"><button type="button" onclick="Signature.clear()">Clear Signature matin</button></td> 
  24.                           <td width="35%" align="center"><button type="button" onclick="Signature1.clear()">Clear Signature AM</button></td>
  25.                       </tr>                         
  26.                   </Table>           
  27.                   <br />                                                                                                                                                                                                                                   
  28.                   <p><b>Validation: </b><input type="submit" value="Valider" ></p>
  29.               </form>


La partie signature.js
 
Code :

Code :
  1. var Signature = (function () {
  2.    var empty = true;
  3.    return {
  4.       //public functions
  5.       capture: function (){
  6.          var parent = document.getElementById("canvas" );
  7.          parent.childNodes[0].nodeValue = "";
  8.          var canvasArea = document.createElement("canvas" );
  9.          canvasArea.setAttribute("id", "newSignature" );
  10.          parent.appendChild(canvasArea);
  11.          var canvas = document.getElementById("newSignature" );
  12.          var context = canvas.getContext("2d" );
  13.          if (!context) {
  14.             throw new Error("Failed to get canvas' 2d context" );
  15.          }
  18.          canvas.width =250;       
  19.          canvas.height = 70;         
  21.          context.fillStyle = "#fff";
  22.          context.strokeStyle = "#444";
  23.          context.lineWidth = 1.2;
  24.          context.lineCap = "round";
  25.          context.fillRect(0, 0, canvas.width, canvas.height);
  26.          context.fillStyle = "#3a87ad";
  27.          context.strokeStyle = "#3a87ad";
  28.          context.lineWidth = 1; 
  29.          context.stroke();
  30.          context.fillStyle = "#fff";
  31.          context.strokeStyle = "#444";
  32.          var disableSave = true;
  33.          var pixels = [];
  34.          var cpixels = [];
  35.          var xyLast = {};
  36.          var xyAddLast = {};
  37.          var calculate = false;
  38.          //functions
  39.          {
  40.             function remove_event_listeners() {
  41.                canvas.removeEventListener('mousemove', on_mousemove, false);
  42.                canvas.removeEventListener('mouseup', on_mouseup, false);
  43.                canvas.removeEventListener('touchmove', on_mousemove, false);
  44.                canvas.removeEventListener('touchend', on_mouseup, false);
  45.                document.body.removeEventListener('mouseup', on_mouseup, false);
  46.                document.body.removeEventListener('touchend', on_mouseup, false);
  47.             }
  48.             function get_board_coords(e) {
  49.                var x, y;
  50.                if (e.changedTouches && e.changedTouches[0]) {
  51.                   var offsety = canvas.offsetTop || 0;
  52.                   var offsetx = canvas.offsetLeft || 0;
  53.                   x = e.changedTouches[0].pageX - offsetx;
  54.                   y = e.changedTouches[0].pageY - offsety;
  55.                } else if (e.layerX || 0 == e.layerX) {
  56.                   x = e.layerX;
  57.                   y = e.layerY;
  58.                } else if (e.offsetX || 0 == e.offsetX) {
  59.                   x = e.offsetX;
  60.                   y = e.offsetY;
  61.                }
  62.                return {
  63.                   x : x,
  64.                   y : y
  65.                };
  66.             };
  67.             function on_mousedown(e) {
  68.                e.preventDefault();
  69.                e.stopPropagation();
  70.                canvas.addEventListener('mousemove', on_mousemove, false);
  71.                canvas.addEventListener('mouseup', on_mouseup, false);
  72.                canvas.addEventListener('touchmove', on_mousemove, false);
  73.                canvas.addEventListener('touchend', on_mouseup, false);
  74.                document.body.addEventListener('mouseup', on_mouseup, false);
  75.                document.body.addEventListener('touchend', on_mouseup, false);
  76.                empty = false;
  77.                var xy = get_board_coords(e);
  78.                context.beginPath();
  79.                pixels.push('moveStart');
  80.                context.moveTo(xy.x, xy.y);
  81.                pixels.push(xy.x, xy.y);
  82.                xyLast = xy;
  83.             };
  84.             function on_mousemove(e, finish) {
  85.                e.preventDefault();
  86.                e.stopPropagation();
  87.                var xy = get_board_coords(e);
  88.                var xyAdd = {
  89.                   x : (xyLast.x + xy.x) / 2,
  90.                   y : (xyLast.y + xy.y) / 2
  91.                };
  92.                if (calculate) {
  93.                   var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
  94.                   var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
  95.                   pixels.push(xLast, yLast);
  96.                } else {
  97.                   calculate = true;
  98.                }
  99.                context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
  100.                pixels.push(xyAdd.x, xyAdd.y);
  101.                context.stroke();
  102.                context.beginPath();
  103.                context.moveTo(xyAdd.x, xyAdd.y);
  104.                xyAddLast = xyAdd;
  105.                xyLast = xy;
  106.             };
  107.             function on_mouseup(e) {
  108.                remove_event_listeners();
  109.                disableSave = false;
  110.                context.stroke();
  111.                pixels.push('e');
  112.                calculate = false;
  113.             };
  114.          }
  115.          canvas.addEventListener('mousedown', on_mousedown, false);
  116.          canvas.addEventListener('touchstart', on_mousedown, false);
  117.       },
  118.       save : function(){
  119.          var canvas = document.getElementById("newSignature" );
  120.          // save canvas image as data url (png format by default)
  121.          var dataURL = canvas.toDataURL("image/png" );
  122.          document.getElementById("saveSignature" ).src = dataURL;
  123.       },
  124.       clear : function(){
  125.          var parent = document.getElementById("canvas" );
  126.          var child = document.getElementById("newSignature" );
  127.          parent.removeChild(child);
  128.          empty = true;
  129.          this.capture();
  130.       },
  131.    }
  132. })()
  133. var Signature;


 
La partie signature1.js
 
Code :
 

Code :
  1. var Signature1 = (function () {
  2.    var empty = true;
  3.    return {
  4.       //public functions
  5.       capture: function (){
  6.          var parent = document.getElementById("canvas1" );
  7.          parent.childNodes[0].nodeValue = "";
  8.          var canvasArea1 = document.createElement("canvas1" );
  9.          canvasArea1.setAttribute("id", "newSignature1" );
  10.          parent.appendChild(canvasArea1);
  11.          var canvas1 = document.getElementById("newSignature1" );
  12.          var context1 = canvas1.getContext("2d" );
  13.          if (!context1) {
  14.             throw new Error("Failed to get canvas1' 2d context" );
  15.          }
  18.          canvas1.width =250;       
  19.          canvas1.height = 70;         
  21.          context.fillStyle = "#fff";
  22.          context.strokeStyle = "#444";
  23.          context.lineWidth = 1.2;
  24.          context.lineCap = "round";
  25.          context.fillRect(0, 0, canvas1.width, canvas1.height);
  26.          context.fillStyle = "#3a87ad";
  27.          context.strokeStyle = "#3a87ad";
  28.          context.lineWidth = 1; 
  29.          context.stroke();
  30.          context.fillStyle = "#fff";
  31.          context.strokeStyle = "#444";
  32.          var disableSave = true;
  33.          var pixels = [];
  34.          var cpixels = [];
  35.          var xyLast = {};
  36.          var xyAddLast = {};
  37.          var calculate = false;
  38.          //functions
  39.          {
  40.             function remove_event_listeners() {
  41.                canvas1.removeEventListener('mousemove', on_mousemove, false);
  42.                canvas1.removeEventListener('mouseup', on_mouseup, false);
  43.                canvas1.removeEventListener('touchmove', on_mousemove, false);
  44.                canvas1.removeEventListener('touchend', on_mouseup, false);
  45.                document.body.removeEventListener('mouseup', on_mouseup, false);
  46.                document.body.removeEventListener('touchend', on_mouseup, false);
  47.             }
  48.             function get_board_coords(e) {
  49.                var x, y;
  50.                if (e.changedTouches && e.changedTouches[0]) {
  51.                   var offsety = canvas1.offsetTop || 0;
  52.                   var offsetx = canvas1.offsetLeft || 0;
  53.                   x = e.changedTouches[0].pageX - offsetx;
  54.                   y = e.changedTouches[0].pageY - offsety;
  55.                } else if (e.layerX || 0 == e.layerX) {
  56.                   x = e.layerX;
  57.                   y = e.layerY;
  58.                } else if (e.offsetX || 0 == e.offsetX) {
  59.                   x = e.offsetX;
  60.                   y = e.offsetY;
  61.                }
  62.                return {
  63.                   x : x,
  64.                   y : y
  65.                };
  66.             };
  67.             function on_mousedown(e) {
  68.                e.preventDefault();
  69.                e.stopPropagation();
  70.                canvas1.addEventListener('mousemove', on_mousemove, false);
  71.                canvas1.addEventListener('mouseup', on_mouseup, false);
  72.                canvas1.addEventListener('touchmove', on_mousemove, false);
  73.                canvas1.addEventListener('touchend', on_mouseup, false);
  74.                document.body.addEventListener('mouseup', on_mouseup, false);
  75.                document.body.addEventListener('touchend', on_mouseup, false);
  76.                empty = false;
  77.                var xy = get_board_coords(e);
  78.                context.beginPath();
  79.                pixels.push('moveStart');
  80.                context.moveTo(xy.x, xy.y);
  81.                pixels.push(xy.x, xy.y);
  82.                xyLast = xy;
  83.             };
  84.             function on_mousemove(e, finish) {
  85.                e.preventDefault();
  86.                e.stopPropagation();
  87.                var xy = get_board_coords(e);
  88.                var xyAdd = {
  89.                   x : (xyLast.x + xy.x) / 2,
  90.                   y : (xyLast.y + xy.y) / 2
  91.                };
  92.                if (calculate) {
  93.                   var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
  94.                   var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
  95.                   pixels.push(xLast, yLast);
  96.                } else {
  97.                   calculate = true;
  98.                }
  99.                context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
  100.                pixels.push(xyAdd.x, xyAdd.y);
  101.                context.stroke();
  102.                context.beginPath();
  103.                context.moveTo(xyAdd.x, xyAdd.y);
  104.                xyAddLast = xyAdd;
  105.                xyLast = xy;
  106.             };
  107.             function on_mouseup(e) {
  108.                remove_event_listeners();
  109.                disableSave = false;
  110.                context.stroke();
  111.                pixels.push('e');
  112.                calculate = false;
  113.             };
  114.          }
  115.          canvas1.addEventListener('mousedown', on_mousedown, false);
  116.          canvas1.addEventListener('touchstart', on_mousedown, false);
  117.       },
  118.       save : function(){
  119.          var canvas1 = document.getElementById("newSignature1" );
  120.          // save canvas image as data url (png format by default)
  121.          var dataURL = canvas1.toDataURL("image/png" );
  122.          document.getElementById("saveSignature1" ).src = dataURL;
  123.       },
  124.       clear : function(){
  125.          var parent = document.getElementById("canvas1" );
  126.          var child = document.getElementById("newSignature1" );
  127.          parent.removeChild(child);
  128.          empty = true;
  129.          this.capture();
  130.       },
  131.    }
  132. })()
  133. var Signature1;



Message édité par tetel74 le 02-01-2022 à 20:47:39
Reply

Marsh Posté le 02-01-2022 à 21:12:14    

Bonjour,

 

Sans tester, donc peut-être que ça ne suffit pas pour régler le problème (et je n'ai pas lu tout le code), la ligne suivante ne va pas dans signature1.js :

Code :
  1. var canvasArea1 = document.createElement("canvas1" );


L'élément créé est "canvas" et non "canvas1", on parle ici d'un type d'élément HTML et non de son identification. ;)

 

EDIT : si cela ne résout pas le problème, peut-être que des erreurs sont disponibles dans la console pour identifier plus facilement le hic.


Message édité par MaybeEijOrNot le 02-01-2022 à 21:13:09

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 03-01-2022 à 08:52:55    

J'ai modifié ces 2 lignes:
 

Code :
  1. var parent = document.getElementById("canvas" );
  2.          parent.childNodes[0].nodeValue = "";
  3.          var canvasArea1 = document.createElement("canvas" );


 
Pas de résultat
 
N'y a t il pas un conflit entre les 2 signature.js ?

Reply

Marsh Posté le 03-01-2022 à 12:19:55    

La première ligne fallait garder ce que tu avais fait, l'id du second canvas sera bien "canvas1". Mais sur la troisième ligne, tu crées un élément HTML de type "canvas".


Message édité par MaybeEijOrNot le 03-01-2022 à 12:20:57

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 03-01-2022 à 14:08:11    

Voici les modifs
 

Code :
  1. var Signature1 = (function () {
  2.    var empty = true;
  3.    return {
  4.       //public functions
  5.       capture: function (){
  6.          var parent = document.getElementById("canvas1" );
  7.          parent.childNodes[0].nodeValue = "";
  8.          var canvasArea1 = document.createElement("canvas" );
  9.          canvasArea1.setAttribute("id", "newSignature1" );
  10.          parent.appendChild(canvasArea1);
  11.          var canvas1 = document.getElementById("newSignature1" );
  12.          var context1 = canvas1.getContext("2d" );


 
Pas d'amélioration


Message édité par tetel74 le 03-01-2022 à 14:11:14
Reply

Marsh Posté le 03-01-2022 à 14:46:27    

Cela fonctionne
 
J'ai débuggé avec la console
 
Je me suis fait un peu piégé par les données de navigation
Le vieux signature1.js resté actif
 
Encore merci pour l'aide

Reply

Marsh Posté le 03-01-2022 à 20:14:43    

Au passage, tu n'avais pas besoin de renommer le nom des variables puisque leur portée est limitée à la fonction exécutée.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed