Tag: js

×Warning: This tutorial was created 2051 days ago. Some of the information may be out of date with more recent versions of Formidable. Please proceed with caution and always perform a backup before adding custom code.

When autocomplete is enabled on a dropdown field, your standard code will not work to autopopulate it.

If you insert any kind of javascript that intends to alter a dropdown field which has autocomplete enabled, the following code snippet has to be added in order for any changes to be reflected:

$("select[name='item_meta[123]']").trigger("chosen:updated");

where item meta[123] is the dropdown field which you are trying to alter.

That little snippet is required for not just conditionally selecting a default value, but also for conditionally hiding / showing certain dropdown options, etc.

Hope this saves you some time!

×Warning: This tutorial was created 2135 days ago. Some of the information may be out of date with more recent versions of Formidable. Please proceed with caution and always perform a backup before adding custom code.

The JavaScript to do this task is well known. It is simply a case of finding how to deliver it into the web page. Options include

In this first implementation I am using a form.

  1. In your view have the tag <table id="tableId">
  2. Create a new form
  3. Add a hidden field to it (this will not be used)
  4. Settings > General >
    1. On Submit > Redirect to URL = ./
    2. Do not store entries
    3. Check Ajax options
  5. Settings > Form Actions
    1. Delete all
  6. Customise HTML
    1. delete form classes
    2. delete before fields
    3. After fields =
//from https://stackoverflow.com/questions/2044616/select-a-complete-table-with-javascript-to-be-copied-to-clipboard
<script>
function selectElementContents(el) {
  var body = document.body, range, sel;
    if (document.createRange && window.getSelection) {
      range = document.createRange();
      sel = window.getSelection();
      sel.removeAllRanges();
      try {
        range.selectNodeContents(el);
        sel.addRange(range);
      } catch (e) {
        range.selectNode(el);
        sel.addRange(range);
      }

    document.execCommand("copy");
  } else if (body.createTextRange) {
    range = body.createTextRange();
    range.moveToElementText(el);
    range.select();
    range.execCommand("Copy");
}
alert("Table copied to clipboard. You can now paste it into Excel or another application");
}
</script>

4. Submit Button

<div class="frm_submit">
<input type="button" value="Copy table" onclick="selectElementContents( document.getElementById('tableId') );">
</div>
×Warning: This tutorial was created 2137 days ago. Some of the information may be out of date with more recent versions of Formidable. Please proceed with caution and always perform a backup before adding custom code.

In my case, I had a single text field that contained a default text calculation that had HTML. When Formidable started using wp_kses to prevent unwanted HTML in fields as WordPress does, my HTML got stripped. After some investigation by Victor M Font Jr (thanks Victor), it was discovered there were not any hooks or anything available to 'undo' this.

I was trying to avoid changing my field type to HTML, as I would have had to create a whole new field and lose data for hundreds of entries.

So I changed my text field to rich text (which allows some HTML). Then I used the frm_validate_field entry to construct a string of field values and text.

This worked for me because I really did not need the field to be populated as 'default'. It was a field the users were not seeing and just needed to be populated to get passed along after the create entry/post...

If you do need to use default - you will have to do the HTML field - Javascript method as outlined in the Formidable documentation.

×Warning: This tutorial was created 2142 days ago. Some of the information may be out of date with more recent versions of Formidable. Please proceed with caution and always perform a backup before adding custom code.
Make your form update-able in the front end

You need to update the form's Settings to make your form update-able by "logged-in users" in the front end.

Add a Secret Field to your form

Create a field in the form called Secret and in the Dynamic Values section check "Calculate the default value for this field" and paste in this code. It will generate a random 10 digit number.

Math.random() * (1e10-1- 1e9) + 1e9;

https://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range.

Create the update-entry page

This page will be secured using a view. We will call it /update-entry/. Leave the page contents blank for now.

Create a view or email targeting the update-entry page

You now now need to create a view or email which has a link of the form.

/update-entry/?action=edit&entry=[id]&secret=[x]

where id is the entry_id of the record (entry) you want to edit and the secret is the secret you added to the record when it was created.

Create a view to check the URL parameters

Choose an "all entries" type of view. In the Content area put the shortcode for the form to be edited. In the filter area filter

Entry Id "equal to" [get param=entry default=0] and
secret "equal to" [get param=secret default=0]

It is a feature/bug of Formidable that any value is equal to NULL. Therefore we need to set the default of the param Secret to zero if it has been removed by the user.

Add this view to the update page

You now add this view to the page /update-entry.

How it works

When a user clicks your secure link they are taken to the update-entry page. This then loads the view. The tries to select all the entries in the form but only the one that matches the entry_id and secret is returned. When this match happens the view renders the form because you put its shortcode in the content area. The form is editable because of the edit action in the URL.

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