Andreas Jangefalk Andreas Jangefalk - 3 months ago 16
HTML Question

Show/Hide <div> on page reload and depending on dropdownlist value MVC

I have a problem with hiding and showing the right div when a user is selecting a value in my dropdownlist. I want to show/hide different divs depending on the users choice in the dropdownlist. Right now on page reload the wrong div is showing but the right value in the dropdownlist is there. I know that on page load my Jquery function is saying that show this div and hide that div but i cant figure it out how to solve that problem on some other way.

HTML:

@using (Html.BeginForm("Search", "Logs", FormMethod.Get, new {@class = "merchant-form"}))
{
<div class="left-col">
<div class="form-group">
@Html.LabelFor(model => model.PortalName)
@Html.EnumDropDownListFor(model => model.PortalName, "Välj logg", new {@class = "form-control"})
@Html.ValidationMessageFor(model => model.PortalName, "", new {@class = "text-danger"})
</div>
</div>
<div style="clear: both;" id="clear">
&nbsp;
</div>
<div id="api_logging">
<div class="left-col">
<div class="form-group">
@Html.LabelFor(model => model.PhoneNumber)
@Html.EditorFor(model => model.PhoneNumber, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.OrderNumber)
@Html.EditorFor(model => model.OrderNumber, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.OrderNumber, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.PersonalIdentityNumber)
@Html.EditorFor(model => model.PersonalIdentityNumber, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.PersonalIdentityNumber, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div id="merchant_logging" class="hidden">
<div class="left-col">
<div class="form-group">
@Html.LabelFor(model => model.UserName)
@Html.EditorFor(model => model.UserName, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.PhoneNumber)
@Html.EditorFor(model => model.PhoneNumber, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.PersonalIdentityNumber)
@Html.EditorFor(model => model.PersonalIdentityNumber, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.PersonalIdentityNumber, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.RequestId)
@Html.EditorFor(model => model.RequestId, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.RequestId, "", new { @class = "text-danger" })
</div>

</div>
</div>


JQUERY:

$(document).ready(function (e) {
$('#api_logging').show();
$('#merchant_logging').hide();

$('#PortalName').change(function () {
if ($(this).val() == 1) {
$('#api_logging').show();
$('#merchant_logging').hide();

} else {
$('#merchant_logging').show();
$('#api_logging').hide();
}
});
});


$('#merchant_logging').removeClass('hidden');

Answer

Try this:

$(document).ready(function(e) {
  var portal = $('#PortalName');
  
  toggleElements(portal.val()); // set initial state

  portal.change(function() {
    toggleElements($(this).val());  // set state on change
  });
});

function toggleElements(portalVal) {
  if (portalVal == 1) {
    $('#api_logging').show();
    $('#merchant_logging').hide();
  } else {
    $('#merchant_logging').show();
    $('#api_logging').hide();
  }
}