HTML hidden not submitting - html

Question

I have been developing a personal project for a couple of weeks now, and over the past week something changed and the HTML Hidden helper function stopped submitting for some reason and I can't find out why.
Here is the view.
#model GolfTracker.ViewModels.NewRoundViewModel
#{
ViewBag.Title = "NewRound";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>New Round</h2>
#using (Html.BeginForm("Finish", "Rounds"))
{
<div class="form-group">
<p>Select course:</p>
#Html.DropDownListFor(m => m.Round.Course, new SelectList(Model.Courses), "Select course", new { #class = "form-control", #id = "courseDropdown" })
</div>
<table class="table-dark" id="scorecard" style="text-align: center; border: 2px solid #00bc8c; table-layout: fixed">
<thead class="table-secondary">
<th style="vertical-align: middle; padding: 0px; border: 0px">
#
</th>
#for (int i = 1; i < 19; i++)
{
<th style="padding-left: 0px; padding-right: 0px; vertical-align: middle; padding: 0px; border: 0px" width="4.5%">
<div>
#i
</div>
</th>
}
<th style="padding: 0px; border: 0px">
Total
</th>
</thead>
<tr class="table-secondary">
<td style="vertical-align: middle">
Par
</td>
#for (int i = 1; i < 19; i++)
{
<td style="padding-left: 0px; padding-right: 0px; vertical-align: middle">
<div id="hole-#i-par">
</div>
</td>
}
<td>
<div id="par-sum">
</div>
</td>
</tr>
<tr class="table-secondary">
<td style="vertical-align: middle">
Yardage
</td>
#for (int i = 1; i < 19; i++)
{
<td style="padding-left: 0px; padding-right: 0px;">
<div id="hole-#i-yardage">
</div>
</td>
}
<td id="yard-sum"></td>
</tr>
<tr id="scores-array" class="table-secondary">
<td style="vertical-align: middle">
Score
</td>
#for (int i = 1; i < 19; i++)
{
Model.Round.Scores.Add(new GolfTracker.Models.HoleScore()
{
Score = 0
});
<td style="padding-left: 0px; padding-right: 0px;" align="center">
#Html.TextBoxFor(m => m.Round.Scores[i - 1].Score, new { #class = "form-control", #id = "tb-h" + i, #style = "padding-left: 0px; padding-right: 0px; text-align: center; display: block" })
</td>
}
<td id="score-sum"></td>
</tr>
<tr id="putts-array" class="table-secondary">
<td style="vertical-align: middle">
Putts
</td>
#for (int i = 1; i < 19; i++)
{
<td style="padding-left: 0px; padding-right: 0px;" align="center">
#Html.TextBoxFor(m => m.Round.Scores[i - 1].Putts, new { #class = "form-control", #id = "tb-p" + i, #style = "padding-left: 0px; padding-right: 0px; text-align: center; display: block" })
</td>
}
<td id="putts-sum"></td>
</tr>
<tr id="uad-array" class="table-secondary">
<td style="vertical-align: middle">
Up-and-Down
</td>
#for (int i = 1; i < 19; i++)
{
<td style="padding-left: 0px; padding-right: 0px; text-align: center; vertical-align: middle;">
#Html.CheckBoxFor(m => m.Round.Scores[i - 1].UAD, new { #class = "form-check-input", #id = "chb-uad" + i, #style = "margin: 0px; position: relative; width: 20px; height: 20px;" })
</td>
}
<td id="uad-sum"></td>
</tr>
<tr id="ss-array" class="table-secondary">
<td style="vertical-align: middle">
Sand Save
</td>
#for (int i = 1; i < 19; i++)
{
<td style="padding-left: 0px; padding-right: 0px; text-align: center; vertical-align: middle;">
#Html.CheckBoxFor(m => m.Round.Scores[i - 1].SS, new { #class = "form-check-input", #id = "chb-ss" + i, #style = "margin: 0px; position: relative; width: 20px; height: 20px;" })
</td>
}
<td id="ss-sum"></td>
</tr>
</table>
<div class="form-group">
#Html.LabelFor(m => m.Round.Date)
#Html.TextBoxFor(m => m.Round.Date, "{0:d MMM yyyy}", new { #class = "form-control", Type = "date" })
</div>
#Html.Hidden("numHoles", Model.Round.Holes)
#Html.Hidden("score", Model.Round.Score)
#Html.Hidden("putts", Model.Round.Putts)
#Html.Hidden("uad", Model.Round.UAD)
#Html.Hidden("ss", Model.Round.SS)
<div class="form-group">
#Html.LabelFor(m => m.Round.Fairways)
#Html.TextBoxFor(m => m.Round.Fairways, new { #class = "form-control" })
</div>
<div class="form-group">
#Html.LabelFor(m => m.Round.GIR)
#Html.TextBoxFor(m => m.Round.GIR, new { #class = "form-control" })
</div>
<button type="submit" class="btn btn-primary" id="save">Save</button>
}
Here are the scripts. By the time the user presses the save button, all the data is already calculated and saved to their respective elements. The hidden inputs do indeed have the data, but they don't send it back to the model on submit.
Edit: I am aware there are multiple repeated scripts that could be created through using a loop, but I tried that and it didn't work because each iteration kept using the final index rather than the correct one. I had to resort to declaring them manually.
#section scripts
{
<script>
$(document).ready(function () {
$("#courseDropdown").change(function () {
$.ajax({
type: "GET",
url: "/api/coursesapi/" + $(this).val(),
contentType: "application/json",
success: function (course) {
$("#scorecard").show();
if (course != null) {
var yardSum = 0;
var holeYardage;
var holePar;
for (var i = 1; i < 19; i++) {
holeYardage = document.getElementById("hole-" + i + "-yardage");
holePar = document.getElementById("hole-" + i + "-par");
holeYardage.innerText = course.Holes[i - 1].Length;
holePar.innerText = course.Holes[i - 1].Par;
yardSum += course.Holes[i - 1].Length;
}
document.getElementById("par-sum").innerText = course.Par;
document.getElementById("yard-sum").innerText = yardSum;
}
}
});
});
$("#save").click(function () {
console.log("numHoles: " + $("#numHoles").val());
console.log("score: " + $("#score").val());
console.log("putts: " + $("#putts").val());
console.log("uad: " + $("#uad").val());
console.log("ss: " + $("#ss").val());
});
$("#scores-array").change(function () {
var score;
var sum = 0;
var numHoles = 0;
for (var i = 1; i < 19; i++) {
if (parseInt($("#tb-h" + i).val()) > 0) {
numHoles++;
}
score = $("#tb-h" + i);
sum += parseInt(score.val());
}
document.getElementById("score-sum").innerText = sum;
$("#score").val(sum);
$("#numHoles").val(numHoles);
});
$("#putts-array").change(function () {
var putts;
var sum = 0;
for (var i = 1; i < 19; i++) {
putts = $("#tb-p" + i);
sum += parseInt(putts.val());
}
document.getElementById("putts-sum").innerText = sum;
$("#putts").val(sum);
});
$("#uad-array").change(uadEval);
$("#ss-array").change(function () {
var sum = 0;
for (var i = 1; i < 19; i++) {
if ($("#chb-ss" + i).is(":checked")) {
sum++;
}
}
document.getElementById("ss-sum").innerText = sum;
$("#ss").val(sum);
});
$("#chb-ss1").change(function () {
if ($("#chb-ss1").is(":checked")) {
$("#chb-uad1").prop("checked", true);
$("#chb-uad1").prop("disabled", true);
}
else {
$("#chb-uad1").prop("checked", false);
$("#chb-uad1").prop("disabled", false);
}
uadEval();
});
$("#chb-ss2").change(function () {
if ($("#chb-ss2").is(":checked")) {
$("#chb-uad2").prop("checked", true);
$("#chb-uad2").prop("disabled", true);
}
else {
$("#chb-uad2").prop("checked", false);
$("#chb-uad2").prop("disabled", false);
}
uadEval();
});
$("#chb-ss3").change(function () {
if ($("#chb-ss3").is(":checked")) {
$("#chb-uad3").prop("checked", true);
$("#chb-uad3").prop("disabled", true);
}
else {
$("#chb-uad3").prop("checked", false);
$("#chb-uad3").prop("disabled", false);
}
uadEval();
});
$("#chb-ss4").change(function () {
if ($("#chb-ss4").is(":checked")) {
$("#chb-uad4").prop("checked", true);
$("#chb-uad4").prop("disabled", true);
}
else {
$("#chb-uad4").prop("checked", false);
$("#chb-uad4").prop("disabled", false);
}
uadEval();
});
$("#chb-ss5").change(function () {
if ($("#chb-ss5").is(":checked")) {
$("#chb-uad5").prop("checked", true);
$("#chb-uad5").prop("disabled", true);
}
else {
$("#chb-uad5").prop("checked", false);
$("#chb-uad5").prop("disabled", false);
}
uadEval();
});
$("#chb-ss6").change(function () {
if ($("#chb-ss6").is(":checked")) {
$("#chb-uad6").prop("checked", true);
$("#chb-uad6").prop("disabled", true);
}
else {
$("#chb-uad6").prop("checked", false);
$("#chb-uad6").prop("disabled", false);
}
uadEval();
});
$("#chb-ss7").change(function () {
if ($("#chb-ss7").is(":checked")) {
$("#chb-uad7").prop("checked", true);
$("#chb-uad7").prop("disabled", true);
}
else {
$("#chb-uad7").prop("checked", false);
$("#chb-uad7").prop("disabled", false);
}
uadEval();
});
$("#chb-ss8").change(function () {
if ($("#chb-ss8").is(":checked")) {
$("#chb-uad8").prop("checked", true);
$("#chb-uad8").prop("disabled", true);
}
else {
$("#chb-uad8").prop("checked", false);
$("#chb-uad8").prop("disabled", false);
}
uadEval();
});
$("#chb-ss9").change(function () {
if ($("#chb-ss9").is(":checked")) {
$("#chb-uad9").prop("checked", true);
$("#chb-uad9").prop("disabled", true);
}
else {
$("#chb-uad9").prop("checked", false);
$("#chb-uad9").prop("disabled", false);
}
uadEval();
});
$("#chb-ss10").change(function () {
if ($("#chb-ss10").is(":checked")) {
$("#chb-uad10").prop("checked", true);
$("#chb-uad10").prop("disabled", true);
}
else {
$("#chb-uad10").prop("checked", false);
$("#chb-uad10").prop("disabled", false);
}
uadEval();
});
$("#chb-ss11").change(function () {
if ($("#chb-ss11").is(":checked")) {
$("#chb-uad11").prop("checked", true);
$("#chb-uad11").prop("disabled", true);
}
else {
$("#chb-uad11").prop("checked", false);
$("#chb-uad11").prop("disabled", false);
}
uadEval();
});
$("#chb-ss12").change(function () {
if ($("#chb-ss12").is(":checked")) {
$("#chb-uad12").prop("checked", true);
$("#chb-uad12").prop("disabled", true);
}
else {
$("#chb-uad12").prop("checked", false);
$("#chb-uad12").prop("disabled", false);
}
uadEval();
});
$("#chb-ss13").change(function () {
if ($("#chb-ss13").is(":checked")) {
$("#chb-uad13").prop("checked", true);
$("#chb-uad13").prop("disabled", true);
}
else {
$("#chb-uad13").prop("checked", false);
$("#chb-uad13").prop("disabled", false);
}
uadEval();
});
$("#chb-ss14").change(function () {
if ($("#chb-ss14").is(":checked")) {
$("#chb-uad14").prop("checked", true);
$("#chb-uad14").prop("disabled", true);
}
else {
$("#chb-uad14").prop("checked", false);
$("#chb-uad14").prop("disabled", false);
}
uadEval();
});
$("#chb-ss15").change(function () {
if ($("#chb-ss15").is(":checked")) {
$("#chb-uad15").prop("checked", true);
$("#chb-uad15").prop("disabled", true);
}
else {
$("#chb-uad15").prop("checked", false);
$("#chb-uad15").prop("disabled", false);
}
uadEval();
});
$("#chb-ss16").change(function () {
if ($("#chb-ss16").is(":checked")) {
$("#chb-uad16").prop("checked", true);
$("#chb-uad16").prop("disabled", true);
}
else {
$("#chb-uad16").prop("checked", false);
$("#chb-uad16").prop("disabled", false);
}
uadEval();
});
$("#chb-ss17").change(function () {
if ($("#chb-ss17").is(":checked")) {
$("#chb-uad17").prop("checked", true);
$("#chb-uad17").prop("disabled", true);
}
else {
$("#chb-uad17").prop("checked", false);
$("#chb-uad17").prop("disabled", false);
}
uadEval();
});
$("#chb-ss18").change(function () {
if ($("#chb-ss18").is(":checked")) {
$("#chb-uad18").prop("checked", true);
$("#chb-uad18").prop("disabled", true);
}
else {
$("#chb-uad18").prop("checked", false);
$("#chb-uad18").prop("disabled", false);
}
uadEval();
});
function uadEval() {
var sum = 0;
for (var i = 1; i < 19; i++) {
if ($("#chb-uad" + i).is(":checked")) {
sum++;
}
}
document.getElementById("uad-sum").innerText = sum;
$("#uad").val(sum);
}
});
</script>
}

Answer 1

I used to do the trick with jquery serialize by unhidden all fields before you getting the value and hide it back after everything complete.

Answer 2

I found the issue. For some reason the HTML hidden() helper functions did not have the correct names for the model binding. I think it worked before because the structure of the viewmodel was different, and when I updated the viewmodel the "name" attributes of the hidden fields weren't pointing to valid variables anymore.