Returning (hidden?) values from jquery

Question

I am new to programming in general and jquery in particular. I am building an ASP MVC project that uses the following plugin for a star rating system:

https://github.com/kartik-v/bootstrap-star-rating

However, I am having a difficult time accessing the value for the database once the user selects a rating. My current code is as follows:

            <div class="form-group">
                @Html.LabelFor(model => model.Rating, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <span class="star">
                        <input id="input-id" type="radio" value="alert($('input#input-id').val())" class="rating" data-size="lg">
                    </span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Save" class="btn btn-default" />
                </div>
            </div>
        </div>
} 
    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
    <link href="~/Content/star-rating.css" media="all" rel="stylesheet" type="text/css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
    <script src="~/Scripts/star-rating.js" type="text/javascript"></script>
    <link href="~/Content/theme-krajee-svg.css" media="all" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/theme-krajee-svg.js"></script>

    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")

    }

When I inspect the HTML after loading the page, I can see that the plugin changes:

<input id="input-id" type="radio" value="alert($('input#input-id').val())" class="rating" data-size="lg">

To:

<input id="input-id" type="radio" value=//whatever user rates class="rating hide" data-size="lg">

So it seems maybe I am returning some type of hidden input? I read this link, but nothing worked:

jQuery access input hidden value

I must be doing something wrong. Any help would be much appreciate by this novice!

Answer 1

Actually it is not a hidden field but it is radio field only and the plugin which you are using for star rating adds a hide class to it so it is not visible, but if you want to get the value of it then you can use,

$('input#input-id').val();

but not in its value attribute instead you need to use it in your form submission or in your code when you are posting data to your server.

Answer 2

You can call it on onChange function and get the value of input like below:

 $("#input-id").change(function () {
     var atrvalue = $(this).attr('value'); // get the value
     alert(atrvalue);
 });

check out this fiddle for demo.

Answer 3

The solution was actually very simple. All I had to do is add a name="Rating" attribute and change "type" from radio to number(text works too). Here is the revised line that works for me:

<input id="input-id" type="number" value="1" class="rating" data-size="lg" name="Rating">