How to clear a signature field before editing entry or after saving edited entry

By: Jane Onorati | Asked: 01/15/2025
ForumsCategory: Code HelpHow to clear a signature field before editing entry or after saving edited entry
Jane OnoratiJane Onorati asked 1 month ago

I have a profile form and depending on what fields the user edits, they may need to re-sign their waiver agreement on the form. If the user already has a signature in the field, then I need to clear it before they sign it again. I can't find anything in Formidable's support docs that addresses this. It appears what is generated on the form is just a div with the signature in it in the place of the signature field. So maybe it can't simply be cleared, instead the div needs to be replaced by the empty signature field. Just spit-balling here. Has anyone cleared a signature field programmatically before or have any ideas how this might be accomplished?

Jane OnoratiJane Onorati replied 1 month ago

Okay, I looked in the database and found that if a signature has not been created, a row does not exist in the frm_item_metas table. I deleted a row with a signature value in that table and that did the trick. So, now I know I can run an sql command from a php script to delete signatures. I did also find the function delete_entry_meta( $entry_id, $field_id ) in the Codex on the Formidable Masterminds site so will try that first.

5 Answers
Rob LeVineRob LeVine Staff answered 1 month ago

For any field that has a value, regardless of its type, there's a an entry in frm_item_metas and you can either update it to "" or, as you noted, delete the entry. A field can have an empty value, unless it's being inserted, in which case Formidable doesn't even create the empty entry.

Victor Font Staff replied 1 month ago

When I've tested signatures in the past, Formidable stores one of two values, either the text value if the signature was typed, or a link to an image attachment if the signature was e-inked.

Jane OnoratiJane Onorati replied 1 month ago

I'm still working on this. I have found that it is not as simple as just deleting or setting the meta value to "" when it comes to the drawn signatures. The signature image is saved in the uploads folder. When I set the meta value to "", that clears the signature field so I can use it again. However, the new signature does not overwrite the previous signature file. Formidable names signatures using the field ID and entry ID like this: "signature-639-769.png", so if you send another signature it will have the same name. In the database on the server, I found if I delete the file first, then the new signature file can be added. So I'm working on a script to either rename, move, or delete an existing signature file before adding a new one.

Also I'm still trying to figure out why after setting the meta value to "", no new value is added to it when signing again. It's not exactly causing a big problem for me because I'm sending the signature file url to another form to email a signed waiver to the user. I don't need it anymore on the source form where the user signed, and I don't need the previous signature because I'm only interested in keeping the newest signed waiver.

Rob LeVineRob LeVine Staff replied 1 month ago

re: "no new value is added to it when signing again" do you get the same behavior if you delete the meta value rather than setting it to ""?

Jane OnoratiJane Onorati replied 1 month ago

Rob, I haven't been able to successfully delete the meta value record yet via php, so I gave up and have just been setting it to "". I tried "FrmEntryMeta::delete_entry_meta( $entry_id, $signature_field_id );" in a 'frm_setup_edit_fields_vars' filter. I don't know if this is the wrong filter to use it in. I preferred not to get rid of the previous signature until a user actually needed to re-sign. I'd need to do some more testing to see if I can make this work.

Rob LeVineRob LeVine Staff replied 1 month ago

I suggest checking your PHP error logs and checking the return value from delete_entry_meta, because it should absolutely be working. Alternatively you could use native SQL to do it, e.g., delete from wp_frm_item_metas where item_id = $entry_id AND field_id = $signature_field_id, but that should be a last resort. That being said, doing it in frm_setup_edit_field_vars does seem a little strange though I don't know your user scenario well enough to suggest another place to put it. Again, delete_entry_meta should work.

Jane OnoratiJane Onorati replied 1 month ago

I decided to delete the meta value directly from the database and then try, but in doing so saw something that makes me think my signature field is corrupted or something. I'll get back to this later and report what I learn, but need to get outside. It is 45 degrees and sunny in Chicago right now and Sunday the high will be 10 degrees!

Victor Font Staff replied 1 month ago

<p>Jane, use FrmSigAppController::delete_sig_file(). It's in the Codex. The Codex has details for all add-ons available to an Elite license.</p>

Jane OnoratiJane Onorati replied 4 weeks ago

Hey thanks for that Victor. I did not know what to use for arguments so looked in your Codex but did not find it there. I have not done this before, but decided to look in the plug-in files for the signature add-on. I found that I only need to pass the file name. My signature file ID is always 639 but the entry ID is dynamic, so this works for me (the entry ID is passed as an a argument of the function):

$filename = "signature-639-" . $entry_id . ".png";
FrmSigAppController::delete_sig_file($filename);

Jane OnoratiJane Onorati answered 4 weeks ago

I just discovered that there is a setting on signature fields "Allow editing" that will do exactly what I want, except the Clear link must be clicked by the user.
I'd want to click the Clear link programmatically or trigger the action that clicking it makes happen.  This is my signature field's Clear link html from inspection:
<div class="frm-clear-signature-container"><a href="#clear-item_meta[1082]" data-fieldid="1082" class="frm-clear-signature">Clear</a></div>
I've tried but haven't been able to do this yet.

Victor Font Staff replied 4 weeks ago

You can use jQuery:

$(function(){
$('.className').trigger('click');
});

Jane OnoratiJane Onorati replied 3 weeks ago

I tried to post an answer but I get the message that it's awaiting a moderator. When this has happened before, the answer never gets posted. What do I do?

Jane OnoratiJane Onorati answered 3 weeks ago

I'm trying to post this again but will post the code separately to see if that works. 

Jane OnoratiJane Onorati replied 3 weeks ago

Well I don't know what happened to the rest of what I wrote. Very frustrating.

Jane OnoratiJane Onorati replied 3 weeks ago

Here is where I'm at now with this.  I could not get the clear code to work in a JQuery script and don't know why. This is the code I tried:
$(function(){ $('.frm-clear-signature').trigger('click'); });

I tried other methods too but nothing worked. I have a php script that works but not exactly the way I want it to. Not only the original signature meta and file is deleted, but also the new one that is created. It deletes the existing one at the start of editing and then deletes the new one after the Update button is pressed. However, it is not deleted before the new signature url is sent to another form via API, and a signed waiver is created with it and sent to the user! This is what the signature is most needed for, but I'd like to keep the new signature meta and file (when drawn) until the next time the user goes to edit their profile in case the waiver needs to be displayed or resent later.

https://nextleap.app/online-compiler/php-programming/9puzch9wb

Victor Font Staff replied 3 weeks ago

I am puzzled. Now I want to play around with this and see why the jQuery didn't work unless it's a matter of timing. Did you test jQuery('.frm-clear-signature').trigger('click') directly in the console?

Jane OnoratiJane Onorati replied 3 weeks ago

I've never done anything like that before. I figured it out and tried it when editing an entry from the backend and it did not work.

Jane OnoratiJane Onorati replied 3 weeks ago

This works if entered into the console to clear a signature field that already has a signature and allows editing:

jQuery( ".frm-clear-signature" ).get(0).click()

If found this by doing a lot of googling. Apparently this is what works for anchor links which is what I'm dealing with. You'd use jQuery('.clearButton').trigger('click') for the other 'Clear' you see when you are creating an entry and want to clear a signature you have just drawn to start over again. However I can't think of any applications where you'd need that.

Now I am working on integrating this in my jQuery script and testing to see if everything works as desired:

$( ".frm-clear-signature" ).get(0).click();

The script watches for changes to the name, email or children (in a repeater), and then displays the waiver html field and required signature field. This only can happen when a profile is edited as the profile is created by API action from the membership sign-up form.

Jane OnoratiJane Onorati replied 3 weeks ago

One odd thing is that when you enter jQuery( ".frm-clear-signature" ).get(0).click() into the console, it returns "undefined", but works anyway.

gabriella dawn answered 3 weeks ago

Hello
Here’s an approach you could try using JavaScript to handle this:

  1. Target the Signature Field: When the user edits the form, you can use JavaScript to check if the signature field has a value (likely the signature image or div). If it does, replace it with the empty signature field.
  2. Clear the Field Programmatically: You can achieve this by targeting the signature field’s container using its class or ID. For example:

    document.querySelector('.your-signature-field-class').innerHTML = '';

    This will reset the field and allow the user to re-sign.

  3. Reinitialize the Signature Field: If clearing the field breaks the signature functionality, you might need to reinitialize it using Formidable’s JavaScript or a custom script. You can check if Formidable uses a specific library for the signature field and reapply it after clearing.

Alternatively, if you’re handling this server-side after submission, you might need to clear the stored signature value in the database or add logic to determine whether the signature needs to be cleared based on edited fields.

Jane OnoratiJane Onorati replied 2 weeks ago

Hi Gabriella, I could not get your code to work. It may be because I'm not that skilled at jQuery/JS to manipulate html and css. However, signature fields with saved values seem more complicated than this. I did however finally come up with a solution which I will post in my answer - assuming this forum accepts it.

Jane OnoratiJane Onorati answered 2 weeks ago

After a lot of blood, sweat and tears, here is my solution.  You can use this if you have a signature field in a form set up for user editing.  Check the box on the signature field advanced settings to 'Allow editing'.  Put the following script in the "After Fields" section of the Customize HTML settings, and change the field ID 'field_6w5y8' in the script to the field ID of your signature field.This script uses a check to determine how to clear the field because the method is different for typed versus drawn signatures:

jQuery(document).ready(function ($) {
    var clearsig = document.getElementsByClassName("frm-clear-signature");
    if (clearsig.length === 1) {
        //clears saved drawn signature in an editable signature field:
        jQuery(function($) { $('.frm-clear-signature')[0].click(); });
        console.log("Cleared drawn signature.");
    } else if (clearsig.length === 0) {
        //clears saved typed signature in an editable signature field:
        $(document.getElementById('field_6w5y8').value = '');
        console.log("Cleared typed signature.");
    }
});

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right