Is it possible to transfer data from JS created select tags to the controller? Here is the function responsible for generating the select tags:
function changeFunc() {
var elements = document.getElementsByClassName('selector2');
while (elements.length > 0) {
elements[0].parentNode.removeChild(elements[0]);
}
var selector = document.getElementById('selector');
var selectedValue = selector.value;
console.log(selectedValue);
@foreach (var item in Model.Rooms)
{
<text>
if (@item.RoomID == selectedValue)
{
var selectedValue2 = @item.Capacity;
}
</text>
}
var inputContainer = document.getElementById('for-input');
for (var i = 0; i < document.getElementById('selector').value; i++)
{
var selector2 = inputContainer.appendChild(document.createElement("select"));
selector2.className = "selector2";
var option1 = document.createElement("option");
option1.value = "0";
option1.text = "Choose a client";
option1.defaultSelected = true;
selector2.appendChild(option1);
selector2.tagName = "ClientsIDs";
@foreach (var item in Model.Clients)
{
<text>
var optionz = document.createElement("option");
optionz.value = @item.ID;
optionz.text = he.decode("@item.Name");
selector2.appendChild(optionz);
</text>
}
}
}
I aim to extract the value from the "selector2" element, which has multiple instances due to being inside a loop. My objective is to compile these values into a list. I experimented with setting the "name" attribute to the property of type List, but encountered an obstacle - the loop resides in JS whereas the Model belongs to C#, making accessing the index "i" variable challenging. This was my attempt:
selector2.name("name", @Model.Reservations2.ClientsIDs[i]);
The property in question is as follows:
public List<int> ClientsIDs { get; set; }