SIGN UP

Get value from field in real time

By: Gabriel Lima | Asked: 08/08/2022
Forums › Category: General questions › Get value from field in real time
0 Vote Up Vote Down
Gabriel Lima asked 2 years ago
Hey! I'm trying to make a form work with the Counter widget on Elementor.   I've made a number field that calculates the values of each selected dropbox, and the calculation is working correctly, but I don't know to make the result go on the Counter widget. I've been trying to use the shortcode [frm-field-value field_id=71rhl user_id=current] but no success, and I tried to use only [71rhl] to get the result from the field, but it didn't work too because it isn't in the form, but on another widget.   I am wondering if it's possible or not, since I've been trying this for days and couldn't find any answer for this problem on Google or Formidable Forms documentation, do you guys know something about this and how can I do it?
Bobby Clapp replied 2 years ago

Is it possible that there is more than one entry (multiple values) in this form for the current user?

Gabriel Lima replied 2 years ago

There's 2 fields in this form. One is a checkbox with multiple values, and the second one is a read-only Number field that calculates these values from the Checkbox field.

There's no entries in this form, I want it to calculate automatically when the user interacts with those checkboxes, the Number field is working correctly, but I need to update the Counter Widget with the value from the Number field without having the user to click the Submit button

Bobby Clapp replied 2 years ago

You'll likely need to create a jquery event for such a thing (something like the onblur event when the field is exited or onkeyup for every time a key on the keyboard releases). That is a bit out of scope for these forums. If you'd like to find paid help, you can check out a list of developers here -> https://formidable-masterminds.com/developers-directory/

2 Answers
3 Vote Up Vote Down
Best Answer
Walter JonesWalter Jones answered 2 years ago

I'm am not sure if you using the Elementor Counter Widget is necessary for your design?  But you can basically accomplish this with just a form itself and some CSS styling.  See this link for an example I whipped up.
https://joneswebdesigns.com/dev/counter/

1 Vote Up Vote Down
Chris AdamsChris Adams answered 2 years ago
As a general rule, shortcodes (like the frm-field-value shortcode) are executed on page load so won't work if you want the counter to update in real time. You can update anything on the page with a form field value with jQuery quite easily like this: 
<script>
jQuery(document).ready(function($){
  $('#field_ht4d3').change(function(){
    var val1 = $(this).val();
    $("#YOUR-COUNTER-ID").html(val1);
  });
});
</script>
Change ht4d3 to the field KEY of your number field and #your-counter-id to the ID of the element in the counter that you want to update. I don't know how the elementor counter works so it might need to be adjusted a bit to work with that specifically but the above will take a value from a field whenever it's updated and insert it into another element on the page.
Chris AdamsChris Adams replied 2 years ago

I've added a quick demo here: https://development.fdmdigital.co.uk/test-form/

Type something in the text box and it will display in BLUE under the page title (outside of the form).

I also addded a keyup event to the demo so the changes happen as you type but you may not need that in your version.

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