How to I get ID of fields rendered with django-select2?

[Wanjohi Kibui]

Goal
I have a form in which I'm hiding or showing some fields based on the selection as the user fills the form. I'm hiding the fields using JQuery as below;

$("#id_house_code").hide();

I'm trying to get the id of a field in which I have used the Select2Widget widget. How do I do this, please?

[Johannes Maron]

Hi @wanjohikibui I guess you have figured it out by now. But just in case someone else looks for a solution:
Django usually creates ID's for it's inputs following a patterned defined by auto_id. The default pattern is id_%s. You can pass any other pattern when initializing your form or even pass False if you want id to be created for the inputs. In this case Django will also omit labels.
The auto_id pattern is rendered by each widget in their id_for_label method. So one could overwrite this method to change the behavior of a single widget.

I hope that answer helps you and other.

Best
-Joe

[Wanjohi Kibui]

Thanks Hoppe, I appreciate your email on this issue. Been handling it for days but something weird is happening and I can't tell why. When I use Select2Widget on my forms and check my templates, I get something as shown below; <label for="id_litter_code">Litter code:</label> <select name="litter_code" data-allow-clear="true" data-minimum-input-length="0" data-placeholder="" class="form-control django-select2" id="id_litter_code"> Funnily, when I use the id_litter_code in my JQuery to hide the field conditionally, it doesn't hide the field. This is me thinking for days. Would like to resolve this. Will appreciate any help from you on this. Thanks in advance! Kind Regards, *WANJOHI KIBUI* *GIS Consultant - Developer and Trainer* *Mobile: [phone]* *Website: * *w <http://www.lifeingis.com/>ww.lifeingis.com <https://www.lifeingis.com/>www.geosymp.net <https://www.geosymp.net>* *Knowing is not enough, we must apply. **Being willing is not enough, we must do.*

…

On Fri, Aug 30, 2019 at 10:05 AM Johannes Hoppe ***@***.***> wrote: Hi @wanjohikibui <https://github.com/wanjohikibui> I guess you have figured it out by now. But just in case someone else looks for a solution: Django usually creates ID's for it's inputs following a patterned defined by auto_id <https://docs.djangoproject.com/en/2.2/ref/forms/api/#django.forms.Form.auto_id>. The default pattern is id_%s. You can pass any other pattern when initializing your form or even pass False if you want id to be created for the inputs. In this case Django will also omit labels. The auto_id pattern is rendered by each widget in their id_for_label method. So one could overwrite this method to change the behavior of a single widget. I hope that answer helps you and other. Best -Joe — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#567?email_source=notifications&email_token=ABF6DF3AUFFNKAWOF7AUMYDQHDBDLA5CNFSM4IRRZURKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5QYPXQ#issuecomment-526485470>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABF6DF7KNST6RNB55W5DP2LQHDBDLANCNFSM4IRRZURA> .

[Johannes Maron]

@wanjohikibui very good question. This happens because the Select2 input that you see, is not the select-tag. It is an additional div-container created by JavaScript. Maybe you might want to consider just disabling the input, you can find documentation on how to do that over here: https://select2.org/appearance#disabling-a-select2-control

[Wanjohi Kibui]

Hello Hoppe, I'm grateful for this feedback. It's indeed great to learn more about the awesome package. I will try this one out and will let you know my findings. Kind Regards, *WANJOHI KIBUI* *GIS Consultant - Developer and Trainer* *Mobile: [phone]* *Website: * *w <http://www.lifeingis.com/>ww.lifeingis.com <https://www.lifeingis.com/>www.geosymp.net <https://www.geosymp.net>* *Knowing is not enough, we must apply. **Being willing is not enough, we must do.*

…

On Sat, Sep 7, 2019 at 11:20 AM Johannes Hoppe ***@***.***> wrote: @wanjohikibui <https://github.com/wanjohikibui> very good question. This happens because the Select2 input that you see, is not the select-tag. It is an additional div-container created by JavaScript. Maybe you might want to consider just disabling the input, you can find documentation on how to do that over here: https://select2.org/appearance#disabling-a-select2-control — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#567?email_source=notifications&email_token=ABF6DF7F2PSEFCXVZAPMLYLQINP3ZA5CNFSM4IRRZURKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6ETMHY#issuecomment-529085983>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABF6DF4MRJL5VKU4GCIOAWTQINP3ZANCNFSM4IRRZURA> .