You are viewing limited content. For full access, please sign in.

Question

Question

Trapping the "form-sig-remove" event for a particular signature field

asked on October 15, 2019 Show version history

Hey all,

I have a form with multiple signatures.  I need to be able to handle the "form-sig-remove" event (user clicks the X to clear the signature), but I need to know which signature field fired the event.  Is there any way to do this?

I've tried something like this, but it doesn't fire

 $(document).on('click', '#q1 a.form-sig-remove',function(){
    alert("#q1 .form-sig-remove");
  });
 

The following fires for all signatures

 

 $(document).on('click', 'a.form-sig-remove',function(){
    alert(".form-sig-remove");
  });
 

 

0 0

Answer

SELECTED ANSWER
replied on October 15, 2019 Show version history

It should be just like you had in your first example, mine works like this:

$('#q8 a.form-sig-remove').click( () => {alert("clicked")} );

I also assigned custom classes to each one and it worked like this:

$('.custom-class-1 a.form-sig-remove').click( () => {alert("clicked")} );

But only after the form is signed.

I think the issue is that we are trying to place an event listener on an element that doesn't exist yet, because the element is only created after the form is signed and the signature preview is there.

You'd have to declare that listener after the form is signed so it has something to attach to.

0 0

Replies

replied on October 15, 2019 Show version history
 $(document).on('click', 'a.form-sig-remove', function(e){
    var clicked = e.target;
    console.log($(clicked));
  });

That will return the element that was actually clicked (the X button). You could attach some classes to each one if you just need to know which one, or traverse up the DOM to get the parent of the parent of the parent...

0 0
replied on October 15, 2019

Thanks for your reply Brian.  I've assigned a class to each signature field via the Laserfiche UI.  The question is, how do I reference these class names in the JQuery function?

0 0
SELECTED ANSWER
replied on October 15, 2019 Show version history

It should be just like you had in your first example, mine works like this:

$('#q8 a.form-sig-remove').click( () => {alert("clicked")} );

I also assigned custom classes to each one and it worked like this:

$('.custom-class-1 a.form-sig-remove').click( () => {alert("clicked")} );

But only after the form is signed.

I think the issue is that we are trying to place an event listener on an element that doesn't exist yet, because the element is only created after the form is signed and the signature preview is there.

You'd have to declare that listener after the form is signed so it has something to attach to.

0 0
replied on October 15, 2019 Show version history

Okay, thanks.  My whole purpose in doing this is to clear the corresponding date field when the signature is cleared.  Unfortunately, when I clear a date field via the handler, it doesn't refresh.  I have to refresh the entire page to get the date field to clear, bizarre.  I've tried all 3 of these variations to force the cleared date field to refresh, but to no avail:

        $('.MyDateField input').val('');  
        $(.MyDateField input')[0].reset();

        $('.MyDateField input').val('');  
        $(.MyDateField input').trigger('create');

        $('.MyDateField input').val('');  
        $(.MyDateField input').trigger('change');

 

 

 

0 0
replied on October 15, 2019

Never mind, pilot error, realized that the "click" event gets fired for the "Sign" button AND the X (remove signature) button.  Everything's good now, many thanks for the help.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.