How to fill a text field with item selected from a dropdownlist with jQuery in ASP.NET MVC

Question

I'm working on a small customized survey. The Index View is populated with questionList from the database so basically I have a list of questions from the database displayed on the view. The question list now has a dropdown list for each question. The challenge is getting to populate an empty text field with the value for each question and summing up the various values based on the item value selected from each question.

Below is the view to the index action

@model IEnumerable<WorkPlaceBullying.Models.Question>
@{
    ViewBag.Title = "Survey Questions";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Questions</h2>
@if (!Model.Any())
{
    <p>We don't have any Questions yet!.</p>
}

@Html.ActionLink("Question", "New", "Question", "", new { @class = "btn btn-primary" })

@using (@Html.BeginForm("Index", "Question", FormMethod.Get))
{
    @Html.AntiForgeryToken()
    <div class="">
        <table class="table table-striped table-hover ">
            <thead>
                <tr>
                    <td>ID</td>
                    <td>Questions</td>
                    <td>Category</td>
                </tr>
            </thead>
            @foreach (var question in Model)
            {
                <tr>
                    <td>@question.Id</td>
                    <td>
                        @*@Html.ActionLink(@question.SurveyQuestion, "Edit", "Question", new { id = @question.Id }, null)*@
                        @question.SurveyQuestion
                    </td>
                    <td>
                        @question.QuestionCategory.QuestionCat
                    </td>
                    @if (@question.QResponseCategory.Id == 1)
                    {
                        <td>
                            @*@Html.Hidden("Weight", @question.ResponseCategoryId)*@
                            @Html.DropDownList("Weight", (IEnumerable<SelectListItem>)ViewBag.ResponseId, "Select Response", new { @class = "form-control" })
                        </td>
                        <td>
                            <input type="text" id="Weight" name="__Weight" class="form-control col-sm-2" value="">
                        </td>
                    }
                </tr>
            }
        </table>
    </div>
}
@section Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Weight").change(function (evt) {
                $('input[name=__Weight]').val($("#Weight").val());
            });
        });
    </script>
}

I succeeded in getting the value of selected item into the text field but it's populated on all the fields. How do I make each text field unique and have it's own selected value?

Below is the graphical view

From the above image...the weight of the item selected in question 1 is 2. When items are selected for the other questions...it doesn't reflect in the textbox but rather...it reflects the value of the weight for question 1 on all the text boxes.

Answer 1

You need unique IDs

Right now it seems your code is copying the value of the field with ID="Weight" to the field named __Weight - they look to be the same field -

But why the copying? Why not sum on the selects and not have the empty field?

Anyway here is an example using HTML as I guess it might look - which does not care about names - I added a class to your selects instead:

$(function() {
  $(".weightSel").on("change",function (evt) { 
    $(this).closest("td").next().find("input").val(this.value);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>

  <tr>
    <td>Id</td>
    <td>

      SurveyQuestion
    </td>
    <td>
      QuestionCat
    </td>
    <td>
      <select class="weightSel">
        <option value="">Please select</option>
        <option value="1">One</option>
        <option value="2">Two</option>
      </select>
    </td>
    <td>
      <input type="text" name="__Weight" class="form-control col-sm-2" value="">
    </td>

  </tr>
  <tr>
    <td>Id</td>
    <td>

      SurveyQuestion
    </td>
    <td>
      QuestionCat
    </td>
    <td>
      <select class="weightSel">
        <option value="">Please select</option>
        <option value="1">One</option>
        <option value="2">Two</option>
      </select>

    </td>
    <td>
      <input type="text" name="__Weight" class="form-control col-sm-2" value="">
    </td>

  </tr>
  <tr>
    <td>Id</td>
    <td>
      SurveyQuestion
    </td>
    <td>
      QuestionCat
    </td>
    <td>
      <select class="weightSel">
        <option value="">Please select</option>
        <option value="1">One</option>
        <option value="2">Two</option>
      </select>
    </td>
    <td>
      <input type="text" name="__Weight" class="form-control col-sm-2" value="">
    </td>

  </tr>
</table>