Q:

How to populate Html elements with values from the model with javascript

So i have a model that is a collection of custom objects that get displayed in a table. When one of the objects is clicked i want to populate some textboxes and checkboxes with data from the model related to the object selected.
The Table where the object gets selected via a radio button:

<tr>
            <td style="align-content:center">
                <div class="radio">
                    @Html.RadioButtonFor(x => Model.CustomObject[i].WhichSelected, Model.CustomObject[i].ID, new { Id = "CustomObjectRadio", Name = "group1", onClick = "populateData()" })
                </div>
            </td>
            <td style="align-content:center">
                @Html.TextBoxFor(x => Model.CustomObject[i].Title)
                @Html.HiddenFor(x => Model.CustomObject[i].Title)
            </td>

            <td style="align-content:center">
                @Html.TextBoxFor(x => Model.CustomObject[i].BitType.Name)
                @Html.HiddenFor(x => Model.CustomObject[i].BitType.Name)
            </td>
        </tr>

The JavaScript function as it currently stands
function populateData() {  
        $('#title').val(@Model.CustomObject["The object selected"].Title);
        $('#message').val(@Model.CustomObject["The object selected"].Message);
        $('#priority').prop("checked", @Model.CustomObject["The object selected"].IsPriority);
        $('#active').prop("checked", @Model.CustomObject["The object selected"].IsActive);
    };

The elements i want to populate
<ul id="Create/Edit" style="list-style:none;">
        <li>
            Title : <br />
            <input type="text" id="title">
        </li>
        <li>
            Message : <br />
            <textarea id="message" style="width:500px; height:75px;" ></textarea>
        </li>
        <li>
            Is it a Priority? :
            <input type="checkbox" id="priority">
        </li>
        <li>
            Is it Active? :
            <input type="checkbox" id="active">
        </li>                        
    </ul>

Let me know if anything else is needed, thanks in advance

A:

So instead of what i was trying to do i found a work around with a ajax method, allowing my to pass the ID of the CustomObject that the selected radio button was related to. After that i just used the controller to return the chosen CustomObject to the view inside the viewModel. I then used an if statement to allow the textboxes and checkboxes to start empty.
Ajax method
 function populateData() {
        $.ajax({
            url: "@Url.Action("PopulateData", "Configuration")",
            type: 'Post',
            datatype: "html",
            cache: false,
            data: {
                'group1': escape(@i)
            }
        });
    };

Controller Method
[HttpPost]
    public ActionResult PopulateData(string group1)
    {            
        int i = int.Parse(group1);
        viewModel = dataFactory.GetCustomObjects();
        viewModel.ChosenCustomObject = viewModel.CustomObjectList[i];
        return View("~/Views/Configuration/AdminVitalBits.cshtml", viewModel);
    }

View HTML 
 @if (Model.VitalBitToPopulate != new Project._0.Models.CustomObject())
    {
        <ul id="Create/Edit" style="list-style:none;">
            <li>
                Title : <br />
                <input type="text" id="title" value="@Model.CustomObjectToPopulate.Title">
            </li>
            <li>
                Message : <br />
                <textarea id="message" style="width:500px; height:75px;">@Model.CustomObjectToPopulate.Message</textarea>
            </li>
            <li>
                Is it a Priority? :
                <input type="checkbox" id="priority" checked="@Model.CustomObjectToPopulate.IsPriority">
            </li>
            <li>
                Is it Active? :
                <input type="checkbox" id="active" checked="@Model.CustomObjectToPopulate.IsActive">
            </li>                
        </ul>
    }
    else
    {
        <ul id="Create/Edit" style="list-style:none;">
            <li>
                Title : <br />
                <input type="text" id="title">
            </li>
            <li>
                Message : <br />
                <textarea id="message" style="width:500px; height:75px;"></textarea>
            </li>
            <li>
                Is it a Priority? :
                <input type="checkbox" id="priority">
            </li>
            <li>
                Is it Active? :
                <input type="checkbox" id="active">
            </li>
        </ul>
    }

