CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvcforms
Danny Goodall
Danny Goodall

Reputation: 838

Get Input range to show value on page load, and submit slider value as answer?

In my current MVC project, I am using a slider for one question, instead of radio buttons, like all the other questions. Currently, I have some problems getting it to function properly.

What I need is for it to display the current value on the page load, when currently it only displays the current value after the user slides it in any direction.

I also need it to return the current value that it is on when the user clicks a submit button.

Also, I have some Javascript validation which applies for each radio button, which prevents the form from submitting and moving on, if the user has not clicked on a radio button. 

<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()"/>

This is my HTML (with some razor) for the range slider. May have to be changed a lot, which is fine.

In the else part of the if statement, the value=@answer is what is passed to

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

so that will probably have to be incorporated into the slider somehow.

Here is my function that shows up the slider value, but only when the slider slides, when I need it to also show up when the slider loads - this is all done in one view with a few elements that update after each form submit. 

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

Here is the radio button validation, which currently also applies to the slider when it shouldn't because the user could use the default value for the slider as an answer(as long as this default value shows up)

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

Expected Behaviour:

Any help to any one of my problems is appreciated. Thanks!

Edit: Tried the 2 solutions already suggested. None work.

Upvotes: 1

Views: 2643

Answers (1)

Jatin Bhole
Jatin Bhole

Reputation: 186

User defaultValue attribute to set default Value, for Submit use name="answer"

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

Upvotes: 1

Related Questions