Tag: JavaScript

×Warning: This tutorial was created 1949 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 2033 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 2040 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