XForms and multiple inputs for same model tag

Question

I apologize ahead of time if I am not asking this properly.. it is hard to put into words what I am asking..

I have XForms model such as:

<file>
    <criteria>
        <criterion></criterion>
    </criteria>
</file>

I want to have multiple input text boxes that create a new criterion tag.

user interface such as:

<xf:input ref="/file/criteria/criterion" model="select_data">
    <xf:label>Select</xf:label>
</xf:input>

<xf:input ref="/file/criteria/criterion" model="select_data">
    <xf:label>Select</xf:label>
</xf:input>

<xf:input ref="/file/criteria/criterion" model="select_data">
    <xf:label>Select</xf:label>
</xf:input>

And I would like the XML output to look like this (once user has entered in info):

<file>
    <criteria>
        <criterion>AAA</criterion>
        <criterion>BBB</criterion>
        <criterion>CCC</criterion>
    </criteria>
</file>

The way I have it doesn't work, as it sees the 3 input fields to be referring all to the same criterion tag. How do I differentiate?

Thanks! I hope that made some sense!

BEGIN FIRST EDIT

Thanks for the responses for the basic text box!

However, I now need to do this with a listbox. But for the life of me, I can't figure out how. I read somewhere to use with the xforms:select and deselect events.. but I didn't know where to place them, and the places I tried gave me very weird behaviour.

I am currently implementing the following:

<xf:select ref="instance('criteria_data')/criteria/criterion" selection="" appearance="compact" >  
        <xf:label>Choose criteria</xf:label>
        <xf:itemset nodeset="instance('criteria_choices')/choice">
            <xf:label ref="@label"></xf:label>
            <xf:value ref="."></xf:value>
        </xf:itemset>
    </xf:select>

However when multiple choices are submitted, all selection values are inserted into the same node, separated by spaces.

For example:

If AAA and BBB and FFF were selected from listbox, it would result in the following XML:

<criterion>AAA BBB FFF</criterion>

How do I change my code to have each selection be in a separate node?

i.e. I want it to look like this:

<criterion>AAA</criterion>
<criterion>BBB</criterion>
<criterion>FFF</criterion>

Thanks!

END FIRST EDIT

BEGIN SECOND EDIT:

For the listboxes (ie xf:select appearance="compact") I ended up allowing the spaces to occur in the same node and then just transformed that xml using xsl to generate a properly formatted new xml doc (with separate individual nodes). Unfortunately, I did not find a less cumbersome solution by inserting them originally into separate nodes.

The selected answer works very well for text boxes however, hence why I selected it as the answer.

END SECOND EDIT

Answer 1

If three criterions are enough for you, then you should use index in brackets:

<xf:input ref="/file/criteria/criterion[1]" model="select_data"> 
    <xf:label>Select</xf:label> 
</xf:input>

<xf:input ref="/file/criteria/criterion[2]" model="select_data"> 
    <xf:label>Select</xf:label> 
</xf:input>

<xf:input ref="/file/criteria/criterion[3]" model="select_data"> 
    <xf:label>Select</xf:label> 
</xf:input>

But if you use xf:repeat instead, you can add as many criterions you need:

<xf:group ref="/file/criteria" mode="select_data">
    <xf:repeat nodeset="criterion">
        <xf:input ref="."> 
            <xf:label>Select</xf:label> 
        </xf:input>
    </xf:repeat>
    <xf:trigger>
        <xf:label>Insert new row</xf:label>
        <xf:insert nodeset="criterion" position="after" at="last()" ev:event="DOMActivate"/>
    </xf:trigger>
    <xf:trigger>
        <xf:label>Delete last row</xf:label>
        <xf:delete nodeset="criterion" at="last()" ev:event="DOMActivate" />
    </xf:trigger>
</xf:group>

Beware: this example with repeat needs some polishing, so that you can't delete the last row in table, and possibly hide the last row, that is duplicated when you insert a new. See http://en.wikibooks.org/wiki/XForms#Tabular_and_Repeating_Data for additional examples.