Answered eForm - Pre-populate select options with Child MenuTitle + ID

- 953 Posts
iusemodx Reply #1, 11 years, 8 months ago
My set-up:

Parent
-- Child 1
-- Child 2
-- Child 3
-- Child 4

What I would like to do is pre-populate a selection with the child documents as the options and the value should be the childs ID e.g.
```
<select>
  <option value="1">Child 1</option>
  <option value="2">Child 2</option>
  <option value="3">Child 3</option>
  <option value="4">Child 4</option>
</select>
```
I have seen a small tutorial in the forum where the select is pre-populated using a TVs content, so I am wondering if anyone has done something like this before.

All help is welcome and appreciated.
This question has been answered by iusemodx. See the first response.
Download the latest Evo release
Report an issue about Evo
Read the Evo documentation
discuss.answer
- 953 Posts
iusemodx Reply #2, 11 years, 7 months ago
No takers never mind sussed it myself. For those who are interested, Ditto is yet again the answer (I Love Ditto):
```
<select name="myoptions" id="myoptions" eform="Options:listbox:0">
  [[Ditto? &parents=`1` &orderBy=`pagetitle ASC` &tpl=`eform-options` &showPublishedOnly=`1`]]
</select>
```
&parents Set to the parent document whose children you want to list
&orderBy I used alpha + ascending (a - z not z - a)
&tpl Set up a Ditto template for your options - see below
&showPublishedOnly Self explanatory

My Ditto Template:
```
<option value="[+menutitle+]">[+menutitle+]</option>
```
Note here - you can add any TV to the option so long as the value is the same, otherwise you get an "invalid" error from eForm.

If you need to have a multiple selection you have to modify the select a little more - you have to add "multiple".

To note here is that eForm rips out the HTML single variant of "multiple", so you must use the XHTML long version, as shown below.
```
<select name="myoptions" id="myoptions" multiple="multiple" eform="Options:listbox:0">
  [[Ditto? &parents=`1` &orderBy=`pagetitle ASC` &tpl=`eform-options` &showPublishedOnly=`1`]]
</select>
```
What I found out with this is when the form was sent, only one of the selected options would be in the eForm report. This took ages to work out, but the answer is so simple.

After searching and testing a variety of suggestions I found one that said add "[]" to the name and ID of the select, so I did:
```
<select name="myoptions[]" id="myoptions[]" multiple="multiple" eform="Options:listbox:0">
  [[Ditto? &parents=`1` &orderBy=`pagetitle ASC` &tpl=`eform-options` &showPublishedOnly=`1`]]
</select>
```
This works - don't ask me why, but it works perfectly. If someone could explain why it works that would be great.

TIP:
This is great for reservations, prices or pretty much anything else, an example. Lets say we have a list of products and they all have different prices. Each product has the same TV set-up => Name, Price, Stock, Available (y/n).

Now we want the form to output the page ID as a SKU, The Name and if it's available.
```
<select name="myoptions" id="myoptions" eform="Options:listbox:0">
  [[Ditto? &parents=`1` &orderBy=`id ASC` &tpl=`product-options` &showPublishedOnly=`1`]]
</select>

Ditto TPL:
<option value="SKU[+id+] [+menutitle+] [+availability+]">SKU[+id+] [+menutitle+] ([+availability+])</option>
```
Download the latest Evo release
Report an issue about Evo
Read the Evo documentation