How store value of Health Status to Hidden field using jQuery ?

Question

I work on asp.net mvc I face issue i can't store value of health status on hidden field using jQuery then pass hidden field value after get value to approve () function when click agree button click on hidden field i will assign value true when checkbox Yes checked and assign value false when check box No checked then after hidden field get value true or false i will pass it to approve function java script when click button agree i'm not use hidden field before so can you help me please

  <td style="width: 50%; font-weight: bold; padding-top: 10px;">
             @Html.Label("HealthStatus?", htmlAttributes: new { @class = "control-label col-md-5" })
             <div class="col-md-7">
                 <input type="checkbox" id="HealthStatusTrue" name="HealthStatus" value="true" class="healthstatus-checkbox" @(Model.HealthStatus == true ? "checked" : "") />
                 Yes
                 &nbsp;&nbsp;
                 <input type="checkbox" id="HealthStatusFalse" name="HealthStatus" value="false" class="healthstatus-checkbox" @(Model.HealthStatus == false ? "checked" : "") />
                 No
             </div>
         </td>
<a id="approveControlsId" onclick="approve();" class="btn btn-primary" style="min-width: 100px;margin-top:5px;"><i class="glyphicon glyphicon-ok"></i> agree </a>

so how to create hidden field then assign value of Healthstatus to hidden field using jQuery

$('.healthstatus-checkbox').on('change', function () {
   // how to assign value to hidden field 
});

on c# property HealthStatus is Boolean as below 

public class HealthStatusData 
{ 
public bool? HealthStatus {get;set;} 
}

then after that pass to approve function java script

<script type="text/javascript">
  function approve() {
// how to get hidden field value here 
      }
</script>

Answer 1

Hi @Ahmed Salah Abed Elaziz,

According to your description, the following code can be achieved. When the checkbox is not selected or No is selected, the hidden field value is False. When "Yes" is selected for this checkbox, the hidden field value is "True".

@model MvcDemo.Models.HealthStatusData
@{
    ViewBag.Title = "Test";
}

<h2>Test</h2>

<td style="width: 50%; font-weight: bold; padding-top: 10px;">
    @Html.Label("HealthStatus?", htmlAttributes: new { @class = "control-label col-md-5" })
    <div class="col-md-7">
        <input type="checkbox" id="HealthStatusTrue" name="HealthStatus" value="true" class="healthstatus-checkbox" @(Model.HealthStatus == true ? "checked" : "") />
        Yes
        &nbsp;&nbsp;
        <input type="checkbox" id="HealthStatusFalse" name="HealthStatus" value="false" class="healthstatus-checkbox" @(Model.HealthStatus == false ? "checked" : "") />
        No
    </div>
    <input type="hidden" name="HealthStatus" id="myHiddenInput" value="false" />
</td>
<a id="approveControlsId" onclick="approve();" class="btn btn-primary" style="min-width: 100px;margin-top:5px;"><i class="glyphicon glyphicon-ok"></i> agree </a>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $('.healthstatus-checkbox').on('change', function () {
        if ($("input[name='HealthStatus']:checked").val() == 'true') {

            $('#myHiddenInput').val("True");
        }
        else {
            $('#myHiddenInput').val("False");
        }
    });
    function approve() {
        var hiddenvalue = $('#myHiddenInput').val();
        alert(hiddenvalue);
    }
</script>

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Only one checkbox is needed to determine the state of HealthStatus. Can you explain why a hidden field is needed when you can store the value in a variable? Basic example that illustrates the concept.

@model MvcBasic.Models.HealthStatusData
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<td style="width: 50%; font-weight: bold; padding-top: 10px;">
    @Html.Label("HealthStatus?", htmlAttributes: new { @class = "control-label col-md-5" })
    <div class="col-md-7">
        <input type="checkbox" id="HealthStatusTrue" name="HealthStatus" />
        Yes
        &nbsp;&nbsp;
        <input type="checkbox" id="HealthStatusFalse" name="HealthStatus" />
        No

    </div>
</td>
<a id="approveControlsId" onclick="approve();" class="btn btn-primary" style="min-width: 100px;margin-top:5px;"><i class="glyphicon glyphicon-ok"></i> agree </a>

@section scripts
{
    <script>
        var HealthStatus;

        function approve() {
            var HealthStatusTrue = document.getElementById('HealthStatusTrue').checked;
            var HealthStatusFalse = document.getElementById('HealthStatusFalse').checked;

            //XOR 
            if (HealthStatusTrue ^ HealthStatusFalse == false) {
                //Both checkboxes are checked or neither checkbox is checked
                console.log('Null -> No checkboxes are checked or both are checked');
            }
            else {
                //Only one checkbox is needed to determine if HealthStatus is true or false
                HealthStatus = document.getElementById('HealthStatusTrue').checked;
                console.log('HealthStatus = ' + HealthStatus);
            }
        }

    </script>
}