3

I'm trying to display two signatures in one PHP page, but unfortunately the first signature field is only seems to be working and after adding another signature canvas disappears, see below:

Screenshot of jSignature page here

I've tried change CSS height, however it's not an issue, it's still doesn't work.

It must be something to do with div id as the other div has same id name - "signature" and causes this issue.

I've tried to changed JS: $("#signature") to $('div[id^="signature"]') but the actual canvas breaks and doesn't look like it supposed to be.

Does anyone know how to fix this or had same issue before?

Aleksandr Levcenko
  • 45
  • 1
  • 7
  • Why don't you just try and give it a different id, and apply a jsignature to that one? Btw, this doesn't seem to have anything to do with php.. so don't tag it? – Naruto Jan 20 '16 at 15:10

2 Answers2

1

If you use $('div[id^="signature"]') you will get an array of objects that your jQuery-Selector matched to.

So in order to apply jSignature to all of them, you can use .each to iterate over all of them:

$('div[id^="signature"]').each((index, value) => {
   $(value).jSignature({'UndoButton':true}); . .(rest of code)
}

You should however make sure each div has a different id. You can use id="signature1" and id="signature2" and $('div[id^="signature"]') will still find them.

Sascha Renz
  • 26
  • 1
0

you should initialise jsignature separately for the different signatures. You give different ids to the divs with the signature. For example where if you give them the ids "signature" and "signature2" respectively you can initialise them twice like :

var datapair = $("#signature").jSignature({'UndoButton':true}); . .(rest of code) .

var datapair = $("#signature2").jSignature({'UndoButton':true}); . .(rest of code) .

tjd
  • 3
  • 3