Question

在我目前的MVC项目中，我使用一个滑块来代替一个问题，而不是像所有其他问题一样使用单选按钮。目前，我在使其正常运行方面遇到了一些问题。

我需要的是它在页面加载时显示当前值，当前它只在用户向任何方向滑动后显示当前值。

当用户单击提交按钮时，我还需要它返回当前的值。

另外，我有一些Javascript验证适用于每个单选按钮，如果用户没有点击单选按钮，则会阻止表单提交和继续。

<table cellspacing="10">
    <tr>
        @if ((Model.NextQuestionId - 1) == 5)
        {
            <tr>
                <td><input type="range" id="slider" min="10" max="200" onload="updateSliderValue(this.value)" onchange="updateSliderValue(this.value)" /></td>
            </tr>
            <tr>
                <td id="currentValue"></td>
            </tr>
        }
        else
        {   
            <tr>
                @foreach (string answer in Model.Answers)
                {
                <td><label><input type="radio" name="answer" value="@answer" /><span>@answer</span></label></td>
                }
            </tr>
        }
</table>

<input class="btn btn-success NavigationButtons" id="ForwardButton" type="submit" name="NextPage" value="@Session["ForwardButtonText"]" onclick="RadBtnValidation()"/>

这是范围滑块的HTML（有一些剃须刀）。可能需要改变很多，这很好。

在else语句的if部分，value=@answer是传递给

的内容

[HttpPost]
public ActionResult NextPage(string answer)
{
    //some code
    return RedirectToAction(/*more code*/)
}

因此可能必须以某种方式合并到滑块中。

这是我的函数显示滑块值，但只有当滑块滑动时，当我需要它也会在滑块加载时显示 - 这一切都在一个视图中完成，其中一些元素在每个窗体后更新提交。

function updateSliderValue(val) {
    $("#currentValue").html(val);
}

这是单选按钮验证，它当前也适用于滑块，因为用户可以使用滑块的默认值作为答案（只要显示此默认值）

function RadBtnValidation() {
    if ($('input[name="answer"]:checked').length === 1) {
        return true;
    }
    else {
        alert("Please select an answer");
        event.preventDefault();
        return false;
    }
};

预期行为：

滑块值显示在页面加载上。
滑块值在表单提交时以answer提交。
Slider不使用验证（RadBtnValidation()），因此如果用户未点击滑块，则默认值将用于answer。

对我的任何一个问题的任何帮助表示赞赏。谢谢！

编辑：尝试了已建议的2个解决方案。没有用。

Answer 1

用户defaultValue属性设置默认值，提交使用name =“answer”

<input type="range" **defaultValue="10" name="answer"** id="slider" min="10" max="200" onload="updateSliderValue(this.value)" onchange="updateSliderValue(this.value)"   />

获取输入范围以显示页面加载值，并提交滑块值作为答案？

1 个答案: