Forums

I try to put 2 indepedent sigature pad, in DESIGNER I put 2 signature pad (Image 1 ,2),in SET UP I put in the On load area a Load Signature Pad and a Load CSS (Image 3),when I load the form I only can sign in the first signature pad, can you helpme?

The second signature pad doesnt allow to write the sign
Thanks

Hi angelmorales,

I've never seen this working with the Signature Pad widget - though it may be possible.

I have done it with Thomas Bradey's jQuery Signature pad plugin. I can probably find the code for that if it helps.

Bob

Grey if you can help me with any of the two ways it would be excellent!!!

Any help!?

Grey , dont forget me!!! please!

Hi angelmorales,

Apologies for taking so long to reply, I got badly diverted when the site was hacked :-(

Here is the code that I used in a test form to allow multiple signatures.

First in a Custom Code element in the Setup tab is code to create the HTML

<?php
for ( $i = 1; $i <= 2; $i++ ) {
  echo"
<div class='ccms_form_element cfdiv_custom spad_container_div' id='oc_spad_{$i}' style='height: 200px;'>
  <h3>Signature {$i}</h3>
  <label for='oc_name'>Please print your name</label>
  <input type='text' name='oc_name[{$i}]' id='oc_name_{$i}' class='oc_name' />
  <!-- <p class='typeItDesc'>Review your signature</p> -->
  <!-- <p class='drawItDesc'>Draw your signature</p> -->
  <ul class='sigNav'>
    <!--<li class='typeIt'>
      <a href='#type-it' class='current'>Type It</a>
    </li>-->
    <!--<li class='drawIt'>
      <a href='#draw-it'>Draw It</a>
    </li>-->
    <li class='clearButton'>
      <a href='#clear'>Clear</a>
    </li>
  </ul>
  <div class='sig sigWrapper'>
    <div class='typed'></div>
    <canvas class='pad' id='oc_pad_{$i}' width='400' height='150' ></canvas>
    <input type='hidden' name='oc_sig[{$i}]' id='oc_sig_{$i}' class='output' />
  </div>
</div>
  ";
}
?>

Note that the $i <= 2 sets the number of signature blocks to be added.

Depending on your template you may need to add some CSS to get the separation between the blocks correct.

And in the Setup tab in a Custom Code action before the HTML (Render form) action:

<?php
$jdoc = JFactory::getDocument();
$style = "
.spad_container_div {
  width: 402px;
  height: 260px !important;
}
.sigWrapper {
  height: 152px !important;
}
";
$jdoc->addStyleDeclaration($style);

$jdoc= JFactory::getDocument();
$url = JURI::root().'/components/com_chronoforms5/extras/signature_pad/';
$jdoc->addScript($url.'jquery.signaturepad.min.js');
$jdoc->addScript($url.'json2.min.js');
$jdoc->addStylesheet($url.'jquery.signaturepad.css');
// initialise the Signature pad
$script = "
jQuery(document).ready(function (jQ) {
  var oc_options;
  for ( var i = 1; i <= 2; i++ ) {
    oc_options = {
      defaultAction: 'drawIt',
      lineTop: '100',
      name: '#oc_name[i]',
      output: '#oc_sig_'+i,
      canvas: '#oc_pad_'+i,
      drawOnly: true
    };
    jQ('#oc_spad_'+i).signaturePad(oc_options);
    // can be used to hide some of the signature blocks
/*
    if ( i > 1 ) {
      jQ('#oc_spad_'+i).css('display', 'none');
    }
*/
  }
  // this code is used to change the number of blocks 
  // from a drop-down selection
/*
  jQ('#signature_count').on('change', function(){
    var count, i;
    count = jQ('#signature_count').val();
    // console.log(count);
    for ( i = 1; i <= count; i++ ) {
      jQ('#oc_spad_'+i).css('display', 'block');
    }
  });
*/
}); 
";
$jdoc->addScriptDeclaration($script);
?>

Again the i <= 2 needs to match the number of signature blocks

There are two commented out sections in the script. The first hides all the signature blocks except the first one; the second block re-displays more signature blocks depending on a selection from a drop-down with the id signature_count

Bob

I try with the custome code but when i open the form ,a window appears , and it dont aloud me to use the form, this is going to be an issue to the users, i dont want to be annoying but its there a way to use the signature pad ??
I really think this is a wonderful app, but i need two signatures in my form.

Thanks!!!

Hi angelmorales,

That isn't anything I recognise - there's a JavaScript alert being triggered somewhere. Do you see an alert( in the page source anywhere?

Bob