locked
Java to refresh @Html.RadioButtonFor RRS feed

  • Question

  • User-1774690363 posted

    I have a page that I need on load to refresh a @Html.RadioButtonFor. This shows / hides a <div> I can get it to work for everything but RadioButttons. The code works when toggling to radio buttons but just not on page load.

    Below is my code on how I am trying.

     $("input[name='LType']").on("change", function () {
    if ($(this).val() == "New") {
    	//document.getElementById("div5").style.display = 'none';
    	$('#div10').hide();
    				}
    	 else if ($(this).val() == "Consumer") {
    	//document.getElementById("div5").style.display = 'none';
    	$('#div10').show();
    	
    }
    });
    	
    @Html.RadioButtonFor(model => model.LType, "New", new { Checked = "checked" })&nbsp;New&nbsp; &nbsp;
    @Html.RadioButtonFor(model => model.LType, "Old", false)&nbsp;Old
    
    $(function () {
    $("input[name='LType']").change()
    });



    Thursday, November 5, 2020 9:07 PM

All replies

  • User475983607 posted

    Below is a basic example.

    namespace MvcBasic.Controllers
    {
        public class ViewModel
        {
            public string LType { get; set; }
        }
        public class BasicFormsController : Controller
        {
            // GET: BasicForms
            [HttpGet]
            public ActionResult Index()
            {
                ViewModel vm = new ViewModel() { LType = "New" };
                return View(vm);
            }
        }
    }
    @model MvcBasic.Controllers.ViewModel
    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <div>
        @Html.RadioButtonFor(model => model.LType, "New") New <br />
        @Html.RadioButtonFor(model => model.LType, "Old") Old
    </div>
    <div id="New" style="display:none">
        New
    </div>
    <div id="Old" style="display:none">
        Old
    </div>
    
    @section scripts {
        <script>
            var theDiv = '#' + $('input[name=LType]:checked').val();
            $(theDiv).show();
        </script>
    }

    Thursday, November 5, 2020 9:42 PM
  • User1686398519 posted

    Hi ksrc101, 

    ksrc101

    else if ($(this).val() == "Consumer") {

    According to the code you provided, the value of your second RadioButton is Old, not Consumer.

    You can modify your code like this:

    else if ($(this).val() == "Old") {
        $('#div10').show();
    }

    More details, you could refer to below code:

    Model

        public class TestLTypeModel
        {
            public bool LType { get; set; }
        }

    Controller

    public ActionResult Index()
    {
         TestLTypeModel test = new TestLTypeModel { LType=false};
         return View(test);
    }

    View

    @model DailyMVCDemo2.Models.TestLTypeModel
    <div id="div10" style="display:none">test</div>
    @Html.RadioButtonFor(model => model.LType, "New", new { Checked = "checked" })&nbsp;New&nbsp; &nbsp;
    @Html.RadioButtonFor(model => model.LType, "Old", false)&nbsp;Old
    @section scripts{
        <script>
            $(function () {
                $("input[name='LType']").on("change", function () {
                    if ($(this).val() == "New") {
                        $('#div10').hide();
                    }
                    else if ($(this).val() == "Old") {
                        $('#div10').show();
                    }
                });
            }); </script> }

    Here is the result.

    Best Regards,

    YihuiSun

    Friday, November 6, 2020 9:43 AM
  • User-474980206 posted

    Just trigger the change on the checked rather than first radio button

    $(function () {
        $("input[name='LType']:checked").change()
    });
    Friday, November 6, 2020 3:38 PM