[Resolved] Hidden Field Not Hidden

[Author]

Posts

[aaronM-9]

I have the following code in one of my CRED forms:

[cred_field field='_wpcf_belongs_product-listing_id' value='' urlparam='param-productid' class='hidden' output='bootstrap']
[cred_field field='subject' value='' urlparam='param-subject' class='hidden' output='bootstrap']
[cred_field field='product-category' value='' urlparam='param-category' class='hidden' output='bootstrap']

The top two field are not showing on the form but the third field is. I cannot think of any differences that would be causing one to work and the other not. Both subject and product-category represent taxonomies, both of which are receiving a value in the URL string, but one is hiding and one is not. This is the first time a form field has not successfully hidden on me.

Another odd thing started happening at the same time (not sure if it's a coincidence), but featured images are now being displayed on some of my pages even though I have them disabled. I will open a separate ticket. And then post a link to it in case they are somehow related.

- Aaron

[aaronM-9]

Here is the other odd thing that I happened to notice at the same time:

https://toolset.com/forums/topic/featured-image-displaying-even-though-disabled/

I doubt their related but figured I'd mention it just in case since both issues seemed to start at once. Not sure if it could be CSS related.

[Christian Cox]

Hi, can I log in and take a look at this in the browser? I'll see if anything stands out. Please provide login credentials in the private reply fields here, and also a URL where I can see the CRED form with the problem.

[Christian Cox]

Okay I see what's happening. When you add the "hidden" class to a field that uses multiple checkboxes, the "hidden" class is not applied to each checkbox/label element. So instead, wrap these cred_field shortcodes in wrapper divs and apply the hidden class there, and manage display on a container level instead of a field level.

Regarding the checkboxes, I see you have custom JS code in your CRED form editor, but you also have a lot of JavaScript errors on the page, so it's difficult for me to troubleshoot. First, please wrap your jQuery code in a window load event handler like this:

jQuery(window).bind('load', function(){
  jQuery('select[name="product-category[]"]').find("option:contains('" + category + "')").attr('selected', 'selected');
  jQuery('select[name="subject[]"]').find("option:contains('" + subject + "')").attr('selected', 'selected');
});

Also, I don't can't recommend using the option:contains selector like this unless you are very sure that you'll never have two options with the same text. For instance, consider the hypothetical options "Serif" and "Sans Serif." Both contain the text "Serif". If you link to ?param-subject=Serif then both of these may be checked. For that reason, it's better to compare option IDs instead of the option label in your links to this page. Is there a good reason to use the labels that I'm not aware of?

[aaronM-9]

Thanks. Great idea on just putting the inputs into a hidden div tag. I should've been doing that from the start on all my forms. Regarding the JavaScript, I had forgotten about that code. When I first built the page, I realized you couldn't pass URL parameters directly into select inputs so Toolset support recommended that code. When I went to make the inputs hidden I inadvertently made them back into checkboxes. I have updated the script as you suggested and also switched the checkbox input fields back to selects, code as pasted below. Thanks also for pointing out all the JavaScript errors - not sure what's causing those!

It does look like the fields are now hidden and it is correctly selecting the right options by default. However, I do like your idea of having the JavaScript key off of ID numbers instead of the value. Do you have any recommendations for cleaning this up? Thanks a million.

CRED FORM:

<div class="hidden">
	[cred_field field='_wpcf_belongs_product-listing_id' value='' urlparam='param-productid' class='hidden' output='bootstrap']
    [cred_field field='subject' display='select' single_select='true' class='hidden' output='bootstrap']
    [cred_field field='product-category' display='select' single_select='true' class='hidden' output='bootstrap']
</div>

JAVASCRIPT:

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
  
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
  
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};
var category = getUrlParameter('param-category');
var subject = getUrlParameter('param-subject');
jQuery(window).bind('load', function(){
  jQuery('select[name="product-category[]"]').find("option:contains('" + category + "')").attr('selected', 'selected');
  jQuery('select[name="subject[]"]').find("option:contains('" + subject + "')").attr('selected', 'selected');
});

[Christian Cox]

I would use the value attribute selector like this:

jQuery('select[name="product-category[]"]').find("option[value='" + category + "']").attr('selected', 'selected');
jQuery('select[name="subject[]"]').find("option[value='" + subject + "']").attr('selected', 'selected');

Then your link will use numeric URL params for the subject and product category like this:
hidden link

[aaronM-9]

Before I give that a try, I just had one more question. When inserting a post's taxonomy value into a page, it only allows you to choose one of the following items:

-- Link to term archive page
-- URL of term archive page
-- Term name
-- Term description
-- Term slug
-- Term post content

So, if I'm to generate a link to the page containing the form and I want to pass the taxonomy ID via the URL, is it possible given these choices? Perhaps this is why I originally thought I couldn't use the ID number.

- Aaron

[Christian Cox]

It's not possible with those choices alone, you'll need another custom shortcode that can output the term ID based on the taxonomy slug and term slug. Here's another ticket where such a shortcode was created for another client: https://toolset.com/forums/topic/create-shortcode-to-output-term-id-from-slug/#post-513469

[aaronM-9]

That did the trick. Working like a charm now. Thanks so much for all your help.

- Aaron