when change value of checkbox from yes to no or reverse action ApprovalIndex not detect value changed?

Ahmed Abd El Aziz 315 Reputation points
2023-10-15T22:10:09.0333333+00:00

I work on asp.net MVC app . I face issue checkbox value not detected changing value from true to false or reverse .

meaning if I change checkbox Value from Yes to No OR No to Yes nothing detected according to speakstuff property model .

Exactly I need when checkbox check for yes then true and if check box for No will be false .

html script represent yes or No check box

<table style="border: 1px solid black;width:100%;margin-bottom:5px;">

            <tr>
                <td style="width: 50%; font-weight: bold; padding-top: 10px;">
                    @Html.Label("Did You Meet/Speak to Staff", htmlAttributes: new { @class = "control-label col-md-5" })
                    <div class="col-md-7">
                        <input type="checkbox" id="SpeakStuff" name="SpeakStuff" value="true" class="speak-stuff-checkbox" @(Model.SpeakStuff ? "checked" : "") />
                        Yes
                        &nbsp;&nbsp;
                        <input type="checkbox" id="SpeakStuff" name="SpeakStuff" value="false" class="speak-stuff-checkbox" @(!Model.SpeakStuff ? "checked" : "") />
                        No
                    </div>
                </td>
</table>

And below is jQuery to allow only selection with yes or no

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

    $(document).ready(function () {
        $('.speak-stuff-checkbox').on('change', function () {
            $('.speak-stuff-checkbox').not(this).prop('checked', false);
        });
});

I access value from form by java script

<script type="text/javascript">
        function submit() {
            var ResignationRequester = new Object();
            ResignationRequester.SpeakStuff = document.getElementById("SpeakStuff").value;
            
            

</script>

model that represent property SpeakStuff

 public class ResignationRequester
    {
        [Display(Name = "Employee No : ")]
        [Required]
        public int EmpID { get; set; }
        [Display(Name = "Request No")]
        public int RequestNo { get; set; }
        public bool SpeakStuff { get; set; }

    }

and When click approve button and check speakstuff property it still not changed

using (Html.BeginForm("ApprovalIndex", "Resignation", new { id = Model.RequestNo }, FormMethod.Post, htmlAttributes: new { @style = "display:inline;" }))
        {
            

            <a onclick="submit();" class="btn btn-primary" style="min-width: 100px;margin-top:5px;
            margin-left: 1300px;"><i class="glyphicon glyphicon-ok"></i> Approve </a>
            
        }

when debug model ResignationRequester speakstuff property it still true on all cases and if I change check box selection it still without change .

[HttpPost]
      
        public async Task<ActionResult> ApprovalIndex(ResignationRequester REQ)
        {
        }
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,318 questions
0 comments No comments
{count} votes

3 answers

Sort by: Most helpful
  1. SurferOnWww 2,071 Reputation points
    2023-10-16T00:54:14.14+00:00

    Use the Html.EditorFor instead of input type="checkbox".

    The input type="checkbox" submits its value to the server only when it is checked. Nothing is submitted if it is not checked.

    The Html.EditorFor renders not only input type="checkbox" but also input type="hidden" value="false" with the same name.

    See "Note" of the following MDN document:

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox


  2. QiYou-MSFT 4,306 Reputation points Microsoft Vendor
    2023-10-16T08:03:31.2366667+00:00

    Hi @Ahmed Abd El Aziz

    Based on your code, I've modified it to follow the principle of @HTML.Checkbox.

    I didn't change the same part above.

    I changed yours **<a>**to **<input>**submit data. Also set up a @HTML.Textbox to get the data. But this @HTML.Textbox is just a vehicle, I hid it. Its initial value is the initial value of the checkbox "SpeakStuff", and when the value of the checkbox changes, it also changes.

    @using (Html.BeginForm("ApprovalIndex", "Resignation", new { id = Model.RequestNo }, FormMethod.Post, htmlAttributes: new { @style = "display:inline;" }))
            {
    @Html.TextBox("result", "false", new { style = "display:none;" })
    <input type="submit" class="btn btn-primary" style="min-width: 100px;margin-top:5px;
                margin-left: 1300px;">
            }
    
    
    
    <script>
    
        $(document).ready(function () {
            $('.speak-stuff-checkbox').on('change', function (e) {
                $('.speak-stuff-checkbox').not(this).prop('checked', true);
                $('#result').val($('.speak-stuff-checkbox').val());
            });
        });
    </script>
    

    Next we get the value in the background and assign it to ResignationRequester.SpeakStuff.

     public ActionResult ApprovalIndex()
     {
        ResignationRequester resignationRequester = new ResignationRequester();
        string a = Request["result"];
        resignationRequester.SpeakStuff = Convert.ToBoolean(a);
        return View(resignationRequester);
     }
    
    
    

    For demonstration, I output it directly to the page:

    Case1

    Best regards,
    Qi You


    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.

    0 comments No comments

  3. Bruce (SqlWork.com) 58,041 Reputation points
    2023-10-16T19:07:15.4333333+00:00

    the value of a checkbox is always the value attribute whether its checked or not. also element id's are supported to be unique, but getElementById() just return the first match. your code:

                var ResignationRequester = new Object();
                ResignationRequester.SpeakStuff = document.getElementById("SpeakStuff").value;            
    

    the value of ResignationRequester.SpeakStuff is always the string "true". you probably wanted:

                var ResignationRequester = {};
                ResignationRequester.SpeakStuff = document.getElementById("SpeakStuff").checked;            
    

    its not clear why you used two checkboxes, instead of a radio button for mutually exclusive choices.

            <div class="col-md-7">
                <input type="radio" id="SpeakStuffYes" name="SpeakStuff" value="true" class="speak-stuff-radio" @(Model.SpeakStuff ? "checked" : "") />
                            Yes
                            &nbsp;&nbsp;
                <input type="radio" id="SpeakStuffNo" name="SpeakStuff" value="false" class="speak-stuff-radio" @(!Model.SpeakStuff ? "checked" : "") />
                            No
            </div>
    
            var ResignationRequester = {};
            ResignationRequester.SpeakStuff = document.querySelector("[name=SpeakStuff]:checked").value == "true";            
    
    0 comments No comments