Saving radio button selection

Question

I've been playing around with this all day but cannot seem to get it to work the way I want it to :o(

I am writing an application that allows users to select a menu in the canteen. I would like a nice table like this:

The options for the various menus are saved on the document menu which the user selected on the previous screen (listing the week) - this is saved in the data source menu.

The user then selects what s/he wants for that week - they then press save and I need to create a selection document that contains M1, M2 or M3 in the field called Monday (mon), M1, M2 or M3 in the field called Tuesday (tue) etc.

Now matter what I did I could not get the options too line up as I wanted them using what I knew of XPages. I have now ended up with the code below (only added the code for the Monday (Montag) line to give you an idea of what I am doing. The same code is basically repeated for each day of the week (will use a repeat control later down the line). How do I now either 1) attach my XPages field to the variable (as you can see I am using pure BootStrap) or find the value of the selected option in SSJS so I can create a new document using JS?

Any help would be greatly appreciated.

                <!-- ======================== Montag ================================== -->
                <div class="row">
                    <div class="row">
                        <div class="col-md-2">
                            <xp:text escape="true" id="computedField1">Montag</xp:text>
                        </div>

                        <div class="col-md-3">
                            <label class="radio-inline">
                                <input type="radio" name="montag" id="Radios1" value="M1">
                                    <xp:text escape="true" id="computedField3">
                                        <xp:this.value><![CDATA[#{javascript:menu.getItemValueString("mon_1");}]]></xp:this.value>
                                    </xp:text>
                                </input>
                            </label>
                        </div>
                        <div class="col-md-3">
                            <label class="radio-inline">
                                <input type="radio" name="montag" id="Radios2" value="M2">
                                    <xp:text escape="true" id="computedField4">
                                        <xp:this.value><![CDATA[#{javascript:menu.getItemValueString("mon_2");}]]></xp:this.value>
                                    </xp:text>
                                </input>
                            </label>
                        </div>
                        <div class="col-md-3">
                            <label class="radio-inline">
                                <input type="radio" name="montag" id="Radios3" value="M3">
                                    <xp:text escape="true" id="computedField5">
                                        <xp:this.value><![CDATA[#{javascript:menu.getItemValueString("mon_3");}]]></xp:this.value>
                                    </xp:text>
                                </input>
                            </label>
                        </div>
                    </div>
                </div>

changes suggested by Mark:

here the image:

[]

and the code:

                        <div class="col-md-3">
                            <label class="radio-inline">
                                <xp:radio id="Radios1" groupName="mon" value="#{wahl.mon}">
                                    <xp:text escape="true" id="computedField3">
                                        <xp:this.value><![CDATA[#{javascript:menu.getItemValueString("mon_1");}]]></xp:this.value>
                                    </xp:text>
                                </xp:radio>
                            </label>
                        </div>
                        <div class="col-md-3">
                            <label class="radio-inline">
                                <xp:radio id="Radios2" groupName="mon" value="#{wahl.mon}">
                                    <xp:text escape="true" id="computedField4">
                                        <xp:this.value><![CDATA[#{javascript:menu.getItemValueString("mon_2");}]]></xp:this.value>
                                    </xp:text>
                                </xp:radio>
                            </label>
                        </div>
                        <div class="col-md-3">
                            <label class="radio-inline">
                                <xp:radio id="Radios3" groupName="mon" value="#{wahl.mon}">
                                    <xp:text escape="true" id="computedField5">
                                        <xp:this.value><![CDATA[#{javascript:menu.getItemValueString("mon_3");}]]></xp:this.value>
                                    </xp:text>
                                </xp:radio>
                            </label>
                        </div>

Answer 1

If you set up the radio buttons like this, they render according to the specs. Note that I've added a binding to a viewScope parameter.

<div
class="col-md-3">

    <xp:radio
        text="option 1"
        disableTheme="true"
        styleClass="radio-inline"
        id="radio1"
        selectedValue="M1"
        groupName="montag"
        value="#{viewScope.montagSelected}">
    </xp:radio>

</div>

It generates the following HTML (I'm using the default 'Bootstrap3' theme):

<div class="col-md-3">
  <label 
    for="view:_id1:radio1"
    class="radio-inline">
      <input id="view:_id1:radio1" 
        type="radio" 
        name="view:_id1:montag" 
        value="M1" 
        onchangetrigger="early-onclick">
        option 1
  </label>
</div>