TransWikia.com

HTML hidden not submitting

Stack Overflow Asked by Connor Gaymon on December 14, 2020

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>
}

2 Answers

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.

Correct answer by Connor Gaymon on December 14, 2020

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.

Answered by Pakawat Smutkun on December 14, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP