[Resolved] Label "for" attribute not correctly set when I use 2 CRED forms on the same page

[Author]

Posts

[michaelB-31]

Hi support,

I have a page with 2 CRED forms (within Bootstrap tabs, so you can switch between them). Those forms are nearly identical and use the same fields for the same custom post type.

Now the problem is, that the "for" attribute for the <label> tags are not set correctly. They are set to random strings (like for="483b"). In my case this is critical, because I use the <label> as a file upload button, so I can hide the ugly default "Choose file..." Button (for anyone interested in this, here a nice tutorial: hidden link). Anyway, that (and other UX details) doesn't work because of the incorrect "for" attribute.

The root cause seems to be, that for both forms the input fields get the same ID.

Is this a bug or just the way it is? Any idea how I can fix this?

Thanks a lot!

EDIT: Ok, did some further testing. It looks like the wrong "for" attribute only happens when the CRED forms are within the Bootstrap tabs. But this does not solve the problem. First, I need them within the tabs. Second, in this case the file uploaded to the second form are attached to the first form.

It really seems that I need unique ID's for the input fields.

[Minesh]

Hello. Thank you for contacting the Toolset support.

This looks like another case that when you add CRED form within the bootstrap elements its causing the issue. I've another user who is reporting that when he adds CRED form within bootstrap modal popup he is experiencing same issue of label "for" attribute.

In order to report this to our Devs I need to reproduce this on my test install. Could you please send me exact step information in order to reproduce this issue.

[michaelB-31]

Thanks for your answer and sorry for my late reply.

I see. Yes, like I have written, it seems that the wrong "for" attribute only happens when I put the forms within the Bootstrap tabs.

BUT: I think we have here 2 separate bugs: The file upload looks like a different problem. In my test I put both CRED forms directly on the same page (to avoid the Bootstrap problem). Then every field gets a unique ID (with correct "for" attribute) as expected, except for the file upload field. Both file upload fields have the same ID (and "for" attribute), which of course doesn't work correctly (the uploaded file gets attached to the wrong form).

Sure, I can give you a short instruction for the Bootstrap "for" attribute problem:
1. Create 2 different CRED forms for the same custom post type (so the forms use the same custom fields, including a checkbox and a file upload field).
2. In my case, put each CRED form on a Bootstrap tab element.
3. Now when you look into the HTML, you'll see that the for attributes are not correctly set.

I don't know if this is enough for you. If it helps, I could give you access to my site.

Best regards,
Michael

[Noman]

Hello Michael,

I am going to take over this ticket since Minesh is on vacations, I hope that’s ok.

1. Inspect the form on frontend and provide screenshot where you see "for" attribute.

2. Please provide temporary access (WP-Admin and FTP Login info) to your staging site.

Your next answer will be private which means only you and I have access to it.

=== Please backup your database and website ===

✙ I would additionally need your permission to de-activate and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important.

✙ Please add the Links to the [CRED Form] Edit Screen and [Page] Edit Screen where you have inserted this Form.

Thank you

[Noman]

Hello Michael,

I have performed the following steps to resolve this issue:

1. Added CSS in Child theme custom css file.

#wpcf-beleg_file {
    cursor: pointer;
    display: inline-block;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 2;
}
.no-class {
	position:relative;
}
.file_selected .beleg-upload-btn {
	display:none;
}

2. Installed this plugin to add custom JS:
https://wordpress.org/plugins/custom-css-js

- Added the JS code here:
hidden link

jQuery(document).ready(function( $ ){
	$("#col_beleg_upload, #col_beleg_upload_2").find("#wpcf-beleg_file").change(function (){
		$(this).parents('.col-beleg-upload').addClass('file_selected');
	});
	$(document).on('click','.wpt-credfile-delete',function(){
		$(this).parents('.col-beleg-upload').removeClass('file_selected');
	});
});

3. Updated the below code in CRED form:

<div id="col_beleg_upload" class="col-sm-2 col-beleg-upload"><div class="no-class">

Please check here:
hidden link

Thank you

[michaelB-31]

Thanks for your help. I think I understand your workaround. Instead of my <label> you designed the <input> tag like the button. I don't understand the JavaScript in detail, but that could work.

Unfortunately I can't verify that at the moment, because I experience the same bug as for example here (nothing happens when I want to submit the form): https://toolset.com/forums/topic/cred-edit-form-in-views-loop-no-longer-working/

And of course, the other problem with the wrong "for" attribute is still there. Is this already officially captured as a bug? Will there be a hotfix or do I have to wait until it is fixed in the next version?

I mean I probably could fix that also with a lot of JavaScript... but I don't think that's worth it...

[Noman]

The above solution is good enough and safe to use. However, "for" attribute issue looks valid and I am going to reproduce this in my WP installation and let you know.

The other ticket issue with Edit Forms is different from this one. Please kindly open a new ticket for this 2nd issue (if you haven't done already) and we would be happy to help. This will help other users with similar problems to find solutions when searching the forum, We do not handle multiple issues in the same ticket as per support policy. https://toolset.com/toolset-support-policy/

I will update you soon, thank you

[Noman]

Hello Michael,

I am now able to reproduce this issue. I have escalated this issue to our 2nd tier support for further review and we will get back to you with an update.

Thank you for your co-operation and patience as we strive hard to resolve this.

[Noman]

We have just released a patch fix for this type of issue with "for" attribute, please take a backup of your site and use this patch: https://toolset.com/errata/wrong-id-in-radio-field-for-attribute-when-used-inside-conditional/

This issue will also be fixed in the next release of Toolset CRED.

Thank you for your cooperation.

[michaelB-31]

Hi Noman,

Thank you for your answers.

1. Regarding the Submit which is not working: I will not open a new ticket, as the devs are already working on it (if it doesn't work, of course I will open another ticket): https://toolset.com/errata/cred-1-9-2-1-types-2-2-17-18-showstopper-when-using-cred-ajax-forms/

2. Regarding the "for" attribute fix: Even though it only says it is for radio buttons within CRED conditional, it seems to fix almost all "for" attributes. Only exception, as far as I can see: The file upload field.

Of course, for the file upload you gave me the workaround. But I wanted to let you know anyway, so this also can be fixed. Can you let me know, if you have any news/hotfix for this?

Beside that, everything seems to be resolved.

Thanks again and best regards,
Michael

[Noman]

Hello,

Thanks for confirmation. For the File Upload field, I have again escalated this issue to our 2nd tier support for further review and we will get back to you with an update.

Thanks

[Beda]

All the issues reported here where meanwhile resolved and released. The latest Toolset Versions should not anymore show any of the reported issues.

Thanks!