Use keys, not IDs in jQuery to reference checkboxes, radio buttons and dropdowns

By: Jane Onorati | Asked: 11/14/2023
ForumsCategory: Code SnippetsUse keys, not IDs in jQuery to reference checkboxes, radio buttons and dropdowns
Jane OnoratiJane Onorati asked 8 months ago
I have a jQuery function with things like this in it: var adults = $("input[name='item_meta[1605]']:checked").val(); Formidable says to reference checkboxes, radio buttons and dropdowns using item_meta, but I want to use keys instead of ids in all my code. The frm_item_metas database table does not contain keys, so how can I do this? Thanks -Jane
Rob LeVineRob LeVine replied 8 months ago

The key for all fields is in the Advanced section of the field's "Field Options". The keys are rendered in the HTML as "field_" + the field key in Formidable (so you can always inspect the page elements to find the keys as well). I will take this chance to advise you to make your field keys "readable" and "organizable" rather than using the unique keys that Formidable automatically assigns. With any type of coding, it's easier to read when you have a field named "employee_last_name" vs. "8dxop". Especially when using jQuery (as well as PHP) it came come in very handy to have fields that have something in common as it can shorten the amount of code you need to write and make the code work for future cases, without needing to change the code. One method I use is to take the form key, e.g., "employee" and append the field keys, e.g., "employee_last_name", "employee_first_name" etc. and use that for all the fields in the form. btw, the field keys are stored in the frm_fields table.

Jane OnoratiJane Onorati replied 8 months ago

Rob,

I know where to find keys and about best practices for naming fields. I want to know how replace ids with keys in my jQuery code and field defaults. Are you are saying that if 'myfieldkey' is a radio field key in the example below, this syntax should work?
var adults = $("input[name='item_meta[field_myfieldkey]']:checked").val();

I have not tried it yet but did not expect it to work since keys are not in the frm_item_metas table.

I have the same question about calculation expressions. I have expressions for default values like ([23] - [33] < 0) ? (0) : ([23] - [33]), but want to use keys instead of ids.

-Jane

Victor Font replied 8 months ago

Jane, the syntax is $("input#field_myfieldkey :checked").val();

Rob LeVineRob LeVine replied 8 months ago

You can also use $("[id^='field_myfieldkey']:checked").val();

Regarding the calculation expressions, according to the documentation "You can use the field ID or key synonymously in a calculation." See https://formidableforms.com/knowledgebase/field-calculations/

I'm not sure why you're concerned about keys being in the frm_item_metas table. That's not relevant.

Jane OnoratiJane Onorati replied 8 months ago

Thanks Rob. I was familiar with the method using item_meta, but did not know about the two methods that you provided.

Jane OnoratiJane Onorati replied 8 months ago

Oh, say, if I want to do something on change of a checkbox, radio button, or dropdown in my jQuery, do I do it like this?

$('input#field_myfieldkey').change(function() {};

Rob LeVineRob LeVine replied 8 months ago

Just so we're clear, this is no longer a Formidable issue, rather it's jQuery. To do what you want, this is what I've used in the past:
$("[id^='field_myfieldkey']").change(function() {});

Jane OnoratiJane Onorati replied 8 months ago

That's good to know. I have gotten in a bad habit because Formidable snippets provided on their website use ids instead of keys quite a lot. I'm trying to fix my Formidable stuff now globally because I am going to be migrating it all to a redesigned website.

Rob LeVineRob LeVine replied 8 months ago

Victor wrote an article "Writing Transportable Code: Keys vs. IDs". It might be worth your time to read it. https://formidable-masterminds.com/writing-transportable-code-keys-vs-ids/

Jane OnoratiJane Onorati replied 8 months ago

Exactly why I'm doing this. Wish I had known what was explained in Victor's article from the get-go.

I have another item I don't know how to change - a paragraph in an HTML field that displays a field value on the previous page of the same form:
Your new expiration date after renewal will be 12/31/[256].

Do you know what I can do with this to make it use a field key?

Rob LeVineRob LeVine replied 8 months ago

Can you provide a link to the page and steps?

Jane OnoratiJane Onorati replied 8 months ago

Just go to this page and click on the Next button. You don't need to check or select anything. It should be self-explanatory.

https://dev.minnesotamycologicalsociety.org/test-form/

Victor Font replied 8 months ago

Hi Jane,

I've stepped through your form and think I understand what you're trying to do, so I want to step through the logic as I read it. I have questions.

input#field_sse5h2 is populated using a php snippet. How? Is it a custom shortcode or a filter callback? What's the process for populating that field's value?

div#frm_field_1701_container is the HTML field, I presume? If so, your trying to match the value of input#field_sse5h2 using that field's shortcode in the HTML field. Am I understanding that right?

What I am not understanding why you are populating the input in a PHP snippet. Doesn't that field have a value in the database? What does the PHP snippet do?

BTW, I've been impressed with your drive to develop your code the right way. I'm on these boards a lot and notice things. You're doing a good job!

Jane OnoratiJane Onorati replied 8 months ago

Victor,

I did find a solution that uses the field key instead of id using some JS. The Expires field (#field_sse5h2) is calculated by a filter. We have some complicated rules for what the expiration year will be. It's determined by the date the Minnesota State Fair starts which is always 10 days before Labor Day! The HTML field is ID 1701 and my goal is to display the value of field ss5h2 in it.

Do you know of any other ways that do not require JS?

Jane OnoratiJane Onorati replied 8 months ago

This is the code:

jQuery(document).ready(function($){
//Display calculated expiration date
var field_expires = $("#field_sse5h2").val();
var expires_text = 'Using the Key in of the Expires field in After Fields (JS): Your new membership will expire at the end of: ' + field_expires + '.';
document.getElementById("field_expires_div").innerHTML = expires_text;
});

Victor Font replied 8 months ago

This forum doesn't do a good job for code posting. I recommend creating a pastebin or gist and posting the link here.

As for jQuery, I use it only when necessary. When I have a complex coding requirement that requires calculations, I use the formula everywhere that needs to display the calculated value. In your case, I would create a custom shortcode that returns the HTML you want with the same value calculated in the same way. The same function that you use as the filter callback can be used to generate the HTML value for the shortcode. That's one set of rules and a single function for both display values.

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