locked
onload show div RRS feed

  • Question

  • User812858302 posted

    I have created a radio button with javascript hide show div on radio button click.but what I want when I am editing the data at that time radio button is checked unchecked based on previous data and show or hide div on load based on data.

    here is my code. I am getting the selection back on edit page but div is not showing until I clicked<g class="gr_ gr_744 gr-alert gr_gramm gr_inline_cards gr_run_anim Style replaceWithoutSep" id="744" data-gr-id="744">,please</g> suggest something.

    <script type="text/javascript">
        function ShowHideDiv() {
            var N = document.getElementById("N");
            var dvparent = document.getElementById("dvparent");
            dvparent.style.display = N.checked ? "" : "none";
        }
    </script>
    
    <div class="form-group required">
                    <Label asp-for="is_parent_cmp" class="control-label">Is Parent Company </Label>
    
                    <input asp-for="is_parent_cmp" class="custom-radio" name="is_parent_cmp" id="Y" type="radio" value="1"  onclick="ShowHideDiv()" onloadstart="showdiv()"  required="" /> Yes
                    <input asp-for="is_parent_cmp" class="custom-radio" name="is_parent_cmp" id="N" type="radio" Value="0" onclick="ShowHideDiv()" onloadstart="showdiv()"  /> No
                    <span asp-validation-for="is_parent_cmp" class="text-danger"></span>
                </div>
    
    
                <div class="form-group font-weight-bold required" id="dvparent" style="display: none">
                    <label asp-for="num_parent_id" class="control-label">Select Parent</label>
                    @Html.DropDownListFor(model => model.num_parent_id, new SelectList(ViewBag.company, "num_id", "str_cmp_name"), "Select Parent Company", new { @class = "form-control" })
                </div>


    Tuesday, August 14, 2018 8:09 AM

Answers

  • User812858302 posted

    I got my answer through this 

     <div class="form-group font-weight-bold required" id="dvparent0" style="display: none">
                    <label asp-for="num_parent_id" class="control-label">Select Parent</label>
                    @Html.DropDownListFor(model => model.num_parent_id, new SelectList(ViewBag.company, "num_id", "str_cmp_name"), "Select Parent Company", new { @class = "form-control" })
                </div>
    <script type="text/javascript">

    var selected = $("input[name$='is_formula']:checked").val();
    $("div.desc").hide();
    $("#dvfield" + selected).show();
    $('input[value="' + selected + '"]').attr('checked', true);
    $("input[name$='is_formula']").click(function () { var test = $(this).val(); $("div.desc").hide();
    $("#dvparent" + test).show();

    });

    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 17, 2018 10:18 AM

All replies

  • User-893317190 posted

    Hi Surya,

     It seems that you want to let the div show  according to the data from controller on page load.

     If so,you could pass data that represents whether your model is parent to your view and make the div’s display none or block using razor expression.

     Below  is my model.

    public class Company
        {
            public bool isParent { get; set; }
            public int num_id { get; set; }
            public string str_cmp_name { get; set; }
            public int? num_parent_id { get; set; }
    }
    

    My data to represent whether a company is parent is the model’s isParent property .If your data is anything else, that is also ok , you only need to pass the data to view through viewbag.

    My Action.

    public ActionResult GetSelection()
            {
                Company editcompany = new Company
                {
                    num_id = 4,
                    str_cmp_name = "com4",
                    isParent = false,
                    num_parent_id=2
                };
                List<Company> allparentCompanies = new List<Company>
                {
                    new Company{num_id=1,str_cmp_name="com1",isParent=true},
                    new Company{num_id=2,str_cmp_name="com2",isParent=true},
                    new Company{num_id=3,str_cmp_name="com3",isParent=true}
                };
                ViewBag.allparentCompanies = allparentCompanies;
                return View(editcompany);
    
               
            }
    

    And my view.

    <script type="text/javascript">
        function ShowHideDiv() {
            var N = document.getElementById("N");
            var dvparent = document.getElementById("dvparent");
            dvparent.style.display = N.checked ? "" : "none";
        }
    </script>
    
    <div class="form-group required">
        <Label asp-for="is_parent_cmp" class="control-label">Is Parent Company </Label>
    
        <input asp-for="is_parent_cmp" class="custom-radio" name="is_parent_cmp" id="Y" type="radio" value="1" onclick="ShowHideDiv()" onloadstart="showdiv()" required="" @(Model.isParent?"checked":"" ) /> Yes
        <input asp-for="is_parent_cmp" class="custom-radio" name="is_parent_cmp" id="N" type="radio" Value="0" onclick="ShowHideDiv()" onloadstart="showdiv()" @(Model.isParent?"":"checked" ) /> No
        <span asp-validation-for="is_parent_cmp" class="text-danger"></span>
    </div>
    
    
    <div class="form-group font-weight-bold required" id="dvparent" style=" @(Model.isParent?"display:none":"") ">
        <label asp-for="num_parent_id" class="control-label">Select Parent</label>
        @Html.DropDownListFor(model => model.num_parent_id, new SelectList(ViewBag.allparentCompanies, "num_id", "str_cmp_name"), "Select Parent Company", new { @class = "form-control" })
    </div>
    
    
    

    The result.

    And if I change  my data to

    Company editcompany = new Company
                {
                    num_id = 4,
                    str_cmp_name = "com4",
                     isParent = true,
                };
     
    

    The view shows as follows.

    Best regards,

    Ackerly Xu

    Wednesday, August 15, 2018 2:49 AM
  • User812858302 posted

    I got my answer through this 

     <div class="form-group font-weight-bold required" id="dvparent0" style="display: none">
                    <label asp-for="num_parent_id" class="control-label">Select Parent</label>
                    @Html.DropDownListFor(model => model.num_parent_id, new SelectList(ViewBag.company, "num_id", "str_cmp_name"), "Select Parent Company", new { @class = "form-control" })
                </div>
    <script type="text/javascript">

    var selected = $("input[name$='is_formula']:checked").val();
    $("div.desc").hide();
    $("#dvfield" + selected).show();
    $('input[value="' + selected + '"]').attr('checked', true);
    $("input[name$='is_formula']").click(function () { var test = $(this).val(); $("div.desc").hide();
    $("#dvparent" + test).show();

    });

    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 17, 2018 10:18 AM