Formidable Forms provides an easy way to update a field value with a click on a link. However one of its shortcomings is, if the value being updated by the link is visible on the page, it is not updated to its new value as shown below.
In this post, we are going to fix it by introducing a custom shortcode which utilizes existing Formidable code where possible and enhance it where it is required.
Step 1:
Create a new shortcode frm_city_entry_update_field which replaces the Formidable Javascript function frmUpdateField in the link with a modified function frmCityUpdateField. Add this to functions.php or use Code Snippets plugins which is our preferred method for adding custom scripts.
add_shortcode('frm-city-entry-update-field', 'frm_city_entry_update_field');
function frm_city_entry_update_field( $atts ) {
//Call Formidable forms function which is used by original shortcode
$link = FrmProEntriesController::entry_update_field($atts);
//Inject enhanced version of Javascript code which supports page refresh and confirmation message options.
if(!empty($link)) {
preg_match('/(?<=frmUpdateField)\([^\)]*\)/', $link, $matches);
if($atts['confirmation_msg']){
$confirm_script = "onclick=\"if(confirm('" . $atts['confirmation_msg'] . "')){frmCityUpdateField" . $matches[0] . ";}return false;\"";
} else {
$confirm_script = "onclick=\"frmCityUpdateField" . $matches[0] . "; return false;\"";
}
$link = preg_replace('/onclick=\"[^\"]*\"/', $confirm_script, $link);
}
return $link;
}Step 2:frmCityUpdateField Javascript function is identical to frmUpdateField function except it refreshes the page upon successfully updating the field. Here we used Code Snippet plugin to inject Javascript code. If you use a different approach, you may have to copy only the Javascript part which starts with <script> and end with </script>
add_action( 'wp_head', function () { ?>
<script>
function frmCityUpdateField(entry_id, field_id, value, message, num) {
jQuery(document.getElementById("frm_update_field_" + entry_id + "_" + field_id + "_" + num)).html('<span class="frm-loading-img"></span>');
jQuery.ajax({
type: "POST",
url: frm_js.ajax_url,
data: {
action: "frm_entries_update_field_ajax",
entry_id: entry_id,
field_id: field_id,
value: value,
nonce: frm_js.nonce
},
success: function() {
if (message.replace(/^\s+|\s+$/g, "") === "")
jQuery(document.getElementById("frm_update_field_" + entry_id + "_" + field_id + "_" + num)).fadeOut("slow");
else
jQuery(document.getElementById("frm_update_field_" + entry_id + "_" + field_id + "_" + num)).replaceWith(message);
location.reload();
}
})
}
</script>
<?php } );Step 3:
Use the new shortcode frm-city-entry-update-field in place of frm-entry-update-field shortcode. All attributes of the shortcode will work as usual.
e.g. [frm-city-entry-update-field id=[id] field_id=205 value="Open" label="Open this venue"]
Bonus:
As an added bonus, frm-city-entry-update-field provides an optional confirmation_msg attribute to which prompts the user to confirm before updating the field value.
e.g.
[frm-city-entry-update-field id=[id] field_id=205 value="Open" label="Open this venue" confirmation_msg="Are you sure want to Open this Venue?"]
Top you are my hero!
Exactly what I needed. Your code should be integrated in Formidable Forms by Plugin. Great work!
-Thx from Germany – Tom
Hi Tom,
Glad to hear that it helped you. Yes, I agree that this should be part of the Formidable core.
Hey bro,
Great article! I am trying to replicate this inside a ‘paragraph’ field. The Update button is visible but on clicking, it appears that the js code is not loaded. Instead, the page ‘jumps’ to the top like a normal #link. Literary scratched off my hair for this! It however works swiftly inside a post/page. Please consider helping out, thanks.
Hi danstan,
What do you mean by inside a paragraph field? If you have a public link to your form, please share so I can take a look. Thanks
This is an excellent walkthrough and I have learnt a lot from it. Something I have been trying to figure out (with very little help from Formidable support despite the hefty price of the top package), is, updating 2 fields when the link is clicked. I’ve studied numerous code samples but can’t figure it out. They (FF support) tell me that these shortcodes can only update one field which I think is a substantial restriction. Are you aware of any code examples of doing more than updating a single field? Thanks again for this tutorial.
Hi Martin,
Did you find any solution to updating 2 fields when the link is clicked?
This is really interesting. I wonder if we can do something similar but instead of reloading when a field is updated, to reload the page when an entry is updated.
I ask because I’m having a strange issue when I update an entry on the front end of a view, the Update form stays visible, and the original form disappears. So as a workaround I was thinking maybe a page reload would solve the issue.
Hi,
Would this also work for a dropdown to auto submit?
I have a form with a view which shows a certain table, based on the selection in the dropdown.
Hi, this works perfect.
But I need a different view about this issue.
in Javascript I have replaced
location.reload();
with
window.location.assign(“https://example.com/entry/” + entry_id);
and it updates the entry and redirects the detailed page.
but with this it will be only used for specific action. I cannot use “frm-city-entry-update-field” shortcode in any other place because it will always try to redirect “https://example.com/entry/” + entry_id
Is it possible to add a class for this in order to make a specific redirections?