If you're using dojo form inputs and want to have labels for them like that:

<label for="???">Email</label>
<input
  type="text"
  name="email"
  dojoAttachPoint="email"
  dojoType="dijit.form.TextBox"
/>

the label is not clickable, because there is no way of knowing the id of the input before it's rendered.

Does there exist a solution for this other than hacking an id in that dojo generates for that element?

UPDATE

It's actually even more difficult than I thought, because the input field in dojo gets rendered as

<div class="dijit dijitTextBox" id="widget_dijit_form_TextBox_0">
  <input class="dijitReset dijitInputField" value="Χ" type="text" tabindex="-1">
  ...
</div>

and the underlying input field doesn't have an id

If you're using dojo form inputs and want to have labels for them like that:

<label for="???">Email</label>
<input
  type="text"
  name="email"
  dojoAttachPoint="email"
  dojoType="dijit.form.TextBox"
/>

the label is not clickable, because there is no way of knowing the id of the input before it's rendered.

Does there exist a solution for this other than hacking an id in that dojo generates for that element?

UPDATE

It's actually even more difficult than I thought, because the input field in dojo gets rendered as

<div class="dijit dijitTextBox" id="widget_dijit_form_TextBox_0">
  <input class="dijitReset dijitInputField" value="Χ" type="text" tabindex="-1">
  ...
</div>

and the underlying input field doesn't have an id

• javascript
• dojo

4 Answers 4

Did you try giving an id to the input?

<label for="myIdComesHere">Email</label>
<input
  id="myIdComesHere"
  type="text"
  name="email"
  dojoAttachPoint="email"
  dojoType="dijit.form.TextBox"
/>

If I recall correctly, this id can be used both by dojo.byId (to fetch the domNode aka the input tag) and by dijit.byId (to fetch the dijit Widget instance)

If you're creating the form inside of a widget, you can use this.id to get the id of that instance of the widget.

If your widget is called my.form, the ID of the widget will be my_form_0 and will increment for each new form widget created.

To create a unique ID for your form elements, use

var id = this.id + '_email';

'<label for="' + id + '"/>'
'<input type="text" id="' + id + '"/>'

That will give you

<label for="my_form_0_email"/>
<input type="text" id="my_form_0_email"/>

If you're creating the input using the dijit.form.TextBox, that textbox will ALWAYS have a unique ID on your page. The actual <input> dom element inside the widget will have the ID that's found by grabbing the ID of the widget.

If you create the TextBox programatically, you can do the following:

var tb = new dijit.form.TextBox(),
    label = dojo.create("label", {for: tb.id});

If you don't care about patibility with IE, you can place the input inside the label:

<label><input type=checkbox>hello</label>

As Brian Mathews says the trick is use the id of the widget, but is not necessary do it in javascript, you can do when declaring the widget template

<label for="${id}_email"/>
<input type="text" id="${id}_email"/>