javascript - 单击按钮以呈现下一页

Question

在旧代码中，我有一个将各种值作为数字的下拉列表，选择一个值并单击提交按钮将提交页面并呈现下一页。

下拉列表的代码是：

<!--                <h:selectOneMenu name="functions" id="function_dropdown" required="true" value="{loginweb.userorder}">-->
<!--                    <f:selectItem itemValue="0" itemLabel="0"/>-->
<!--                    <f:selectItem itemValue="1" itemLabel="1"/>-->
<!--                    <f:selectItem itemValue="5" itemLabel="5"/>-->
<!--                    <f:selectItem itemValue="10" itemLabel="10"/>-->
<!--                    <f:selectItem itemValue="15" itemLabel="15"/>-->
<!--                    <f:selectItem itemValue="20" itemLabel="20"/>-->
<!--                    <f:selectItem itemValue="25" itemLabel="25"/>-->
<!--                    <f:selectItem itemValue="30" itemLabel="30"/>-->
<!--                    <f:selectItem itemValue="35" itemLabel="35"/>-->
<!--                    <f:selectItem itemValue="40" itemLabel="40"/>-->
<!--                    <f:selectItem itemValue="45" itemLabel="45"/>-->
<!--                    <f:selectItem itemValue="50" itemLabel="50"/>-->
<!--                    <f:selectItem itemValue="55" itemLabel="55"/>-->
<!--                    <f:selectItem itemValue="60" itemLabel="60"/>-->
<!--                    <f:selectItem itemValue="65" itemLabel="65"/>-->
<!--                    <f:selectItem itemValue="70" itemLabel="70"/>-->
<!--                    <f:selectItem itemValue="75" itemLabel="75"/>-->
<!--                    <f:selectItem itemValue="80" itemLabel="80"/>-->
<!--                    <f:selectItem itemValue="85" itemLabel="85"/>-->
<!--                    <f:selectItem itemValue="90" itemLabel="90"/>-->
<!--                    <f:selectItem itemValue="95" itemLabel="95"/>-->
<!--                    <f:selectItem itemValue="100" itemLabel="100"/>-->
<!--                </h:selectOneMenu>-->

提交按钮的代码是：

<h:commandButton 
id="place" value="Place Order" onclick="showWaitDialog()" execute="loginuser.order" render="testOrder">
</h:commandButton>`

现在我用滑块范围替换了下拉列表。代码是：

<div class="main">
                    <input type="range" name="functions" id="function_dropdown" required="true" value="#{loginweb.userorder}" min="0" max="100" />
</div>

而命令按钮的代码保持不变。

ISSUE 是，使用新代码（滑块范围）时，页面在单击时未提交，下拉列表和滑块范围的 VALUE 与提交按钮中的值相同。我做错了什么？

标签： javascriptintellij-ideaxhtmljava-ee-6