保存单选按钮选择

Question

我整天都在玩这个，但似乎无法让它按照我想要的方式工作:o(

我正在编写一个允许用户 select 食堂菜单的应用程序。我想要一个像这样的漂亮 table:

各种菜单的选项保存在用户select在上一个屏幕（列出周）中编辑的文档菜单中 - 这保存在数据源中 menu。

用户然后 select那周 s/he 想要什么 - 然后他们按保存，我需要创建一个 selection 文档，其中包含 M1、M2 或 M3称为星期一（mon）的字段，称为星期二（tue）等的字段中的M1，M2或M3

现在无论我做什么，我都无法使用我对 XPages 的了解来获得我想要的选项。我现在已经结束了下面的代码（只添加了星期一（Montag）行的代码让你了解我在做什么。相同的代码基本上在一周中的每一天重复（将使用重复控件稍后下线。我现在该怎么做 1) 将我的 XPages 字段附加到变量（如您所见，我使用的是纯 BootStrap）或在 SSJS 中找到 selected 选项的值所以我可以使用 JS 创建一个新文档？

如有任何帮助，我们将不胜感激。

                <!-- ======================== 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>

马克建议的更改：

这里是图片：

[]

和代码：

                        <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

如果您像这样设置单选按钮，它们将根据 specs 呈现。请注意，我已将绑定添加到 viewScope 参数。

<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>

它生成以下 HTML（我使用的是默认 'Bootstrap3' 主题）：

<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>

保存单选按钮选择

Saving radio button selection

xpages

xpages-ssjs