We Keep Coding

unable to hide/show div tag using jquery

I am trying to hide or show my div tag based on the selection of a value from my dropdown. There are 2 values in the dropdown, select the value 1 will hide the div, selecting the other will show the div. But it is not working, my div tag is always invisible. Please help me, thanks in advance.
Please see the sample code:
#if (Model.Selectedtype == 3)
{
<div id="testDiv" class="form-group col-md-3">
#Html.LabelFor(model => model.testvalue, new { #class = "col-form-label col-form-label-sm text-primary" })
#Html.EditorFor(model => model.testvalue, null, new { htmlAttributes = new { #class = "form-control form-control-sm selectpicker show-tick", data_live_search = true, title = "Select an option", data_icon_base = "fa", data_tick_icon = "fa-check" } })
</div>
}
function incidentChangeHandler(e) {
var selectedText = $(this).find("option:selected").text().toLowerCase();
var elem = $(this).parent();
var selectedValue = e.target.value;
if (selectedValue === '3') {
alert("entered");
$('#testDiv').addClass('d - none');
} else {
alert("else");
$('#testDiv').removeClass('d-none');
}
}

Preserve the hidden or visible state of initially hidden textbox on postback in mvc application

Given below is my script.My problem is I have a textbox which is hidden and is diplayed only when we select "other" from dropdownlist.On display when we enter a value after post back that value gets preserved but that textbox becomes invisible.on postback dropdown list value is however preserved and shown as "others" and only when I select someother value of dropdown and then again change it to "other" then textbox along with text gets displayed..how can I preserve that hidden or visible state of it on postback?
<script type="text/javascript">
$(document).ready(function () {
$('#SelectedCategoryId').change(function () {
if ($('#SelectedCategoryId').val() === '5') {
$('#other').show(1000);
$('#other').change(function () {
var SelectedCategory = $('#other').val().toString();
$('#hiddenId').val(SelectedCategory);
});
}
else {
$('#other').hide(1000);
var SelectedCategory = $('#SelectedCategoryId option:selected').text();
$('#hiddenId').val(SelectedCategory);
}
});
});
</script>
My View
<div id="dropdown" class="form-control dropdown">
#Html.ValidationMessageFor(m => m.SelectedCategoryId, "*")
#Html.LabelFor(m => m.Category, "Department :", new { style = "display:inline;" })
#Html.DropDownListFor(m => m.SelectedCategoryId, new SelectList(Model.Category, "Value", "Text"), "SelectCategory", new { id = "SelectedCategoryId"})
#Html.ValidationMessageFor(m => m.Other, "*")
#Html.TextBoxFor(m => m.Other, new { id = "other", #class = "other" ,style = "display: none;" })
#Html.HiddenFor(m => m.SelectedCategory, new { id = "hiddenId" })
</div>

that's becaue you only check for the value of the select on "change" event. That doesn't happen when you load the page. Do it like that:
function toggleHidden() { //that's your code in a function
if ($('#SelectedCategoryId').val() === '5') {
$('#other').show(1000);
$('#other').change(function () {
var SelectedCategory = $('#other').val().toString();
$('#hiddenId').val(SelectedCategory);
});
}
else {
$('#other').hide(1000);
var SelectedCategory = $('#SelectedCategoryId option:selected').text();
$('#hiddenId').val(SelectedCategory);
}
}
$(document).ready(function () {
toggleHidden(); //execute the toggle on load
$('#SelectedCategoryId').change(toggleHidden); //execute the toggle on change
});

Selecting dropdown value shows a Textbox, but doesn't stores a value passed in it

my view contains
<div class="col-md-3 ">
#{
List<SelectListItem> deformitylevel = new List<SelectListItem>();
deformitylevel.Add(new SelectListItem { Value = "hip", Text = "Hip" });
deformitylevel.Add(new SelectListItem { Value = "knee", Text = "Knee" });
deformitylevel.Add(new SelectListItem { Value = "ankle", Text = "Ankle" });
deformitylevel.Add(new SelectListItem { Value = "other", Text = "Other" });
}
#Html.DropDownListFor(model => model.DeformityLevel, deformitylevel, "--Select Level -", new { #class = "form-control", #onchange = "showdeformitytextbox()", id = "deformitydropdown" })
#Html.ValidationMessageFor(model => model.DeformityLevel, "", new { #class = "text-danger" })
</div>
<div class="col-md-3">
#Html.EditorFor(model => model.DeformityLevel, new { htmlattributes = new { #class = "form-control", id = "deformitytextbox" ,style= "display:none"} })
</div>
My function is
function showdeformitytextbox() {
if ($("#deformitydropdown option:selected").text() == 'Other') {
$("#deformitytextbox").show();
}
else {
$("#deformitytextbox").hide();
}
}
When I select "Other" in dropdownlist it stores 'other' in the database instead of storing a value which is entered in #Html.EditorFor.
What I'm forgetting Help!!

As mentioned by others, to make this cleaner, it would be best if you separated the model fields for the drop down and the textbox. Even if you get it to work using the below code, it will lead to more work if you have to return to the page with the other value selected. That said, the following does properly submit the expected value in the textbox. The key concept is to set the dropdown to disabled as you submit.
Assuming your form has an id of submitForm specified as follows:
#using (Html.BeginForm("someActionName", "someControllerName", FormMethod.Post, new { #id="submitForm"}))
Then the following code will ensure that the drop down doesn't submit its value by intercepting the form submission:
$("#submitForm").submit(function () {
if ($("#deformitydropdown option:selected").text() === "Other") {
$("#deformitydropdown").attr("disabled", true);
} else {
$("#deformitydropdown").removeAttr("disabled");
}
});

I would change the names of your current controls and make a hidden form element for DeformityLevel. Then set its value in javascript based on DropdownList and textbox change events.
***Something like this (jq not verified, just for illustration)
<select id="DeformityLevel_DDL">
<option></option>
<option></option>
<option></option>
</select>
<input type="text" id="DeformityLevel_TB" />
<input type="hidden" id="DeformityLevel" name="DeformityLevel" />
<script>
$(document).ready(function () {
$('#DeformityLevel_DDL').change(function () {
if ($(this).val() != 'other') {
$('#DeformityLevel').val(this.val());
}
});
$('#DeformityLevel_TB').on('change', function () {
$('#DeformityLevel').val($(this).val());
});
});
</script>

Well, your function only display the #deformitytextbox input, when the value entered there changes you should also update the model property.
If the form submits automatically on select change you should use preventDefault.

Try now with TextBox, your parameter for htmlAttributes is incorrect. Try:
<div class="col-md-3 ">
#Html.DropDownList("DeformityLevel", deformitylevel, "--Select Level -", new { #class = "form-control", #onchange = "showdeformitytextbox()", id = "deformitydropdown" })
#Html.ValidationMessage("DeformityLevel", "", new { #class = "text-danger" })
</div>
<div class="col-md-3">
#Html.TextBox("DeformityLevel", null, new { #class = "form-control", id = "deformitytextbox", style = "display:none;" })
</div>
<script>
function showdeformitytextbox() {
if ($("#deformitydropdown option:selected").text() == 'Other') {
$("#deformitytextbox").show();
}
else {
$("#deformitytextbox").hide();
}
}
</script>

on specific click of radio button enable text-box/dropdown list in mvc using jquery

I have three radio buttons and one dropdown list.
On click third radio button dropdown list should appear else it should be disabled. how to check condtion on third radio button based on its 'id' property using jquery in mvc. Help me I am very new jquery..
$("document").ready(function () {
//This is to hide and disable dropdown on page load intially
$("#ddSectionlsts").prop("disabled", true);
$("#ddSectionlsts").hide();
$('input:radio').click(function () {
//This is to hide and disable dropdown on any click of radio button
$("#ddSectionlsts").hide();
$("#ddSectionlsts").prop("disabled", true);
if ($(this).val=="radiospecific") { //what is suitable condtion to check
//on success of condition dropdown is enabled for selection
$("#ddSectionlsts").show();
$("#ddSectionlsts").prop("disabled", false);
}
});
});
<body>
<div>
#Html.RadioButtonFor(model => model.Name1, new { #id = "radiocomman", #name="type", #class="test_Css" }) Cheque
#Html.RadioButtonFor(model => model.Name2, new { #id = "radiospecific", #name = "type", #class = "test_css" })Cas
</div>
#*drop down list*#
#{var listItems = new List<ListItem>
{
new ListItem { Text = "Exemplo1", Value="Exemplo1" },
new ListItem { Text = "Exemplo2", Value="Exemplo2" },
new ListItem { Text = "Exemplo3", Value="Exemplo3" }
};
}
#Html.DropDownList("Exemplo", new SelectList(listItems, "Value", "Text"),new{ #id = "ddSectionlsts", #disabled = "disabled"})
</body>

$('input[name=type]').click(function(){
if ($(this).attr('id")=="radiospecific") {
$("#ddSectionlsts").show();
$("#ddSectionlsts").prop("disabled", false);
} else {
$("#ddSectionlsts").hide();
$("#ddSectionlsts").prop("disabled", true);
}
});

Your radio buton
#Html.RadioButtonFor(model => model.Name1, "Cheque", new { #id = "radiocomman", #name="type", #class="test_Css" }) Cheque
#Html.RadioButtonFor(model => model.Name2, "Cas", new { #id = "radiospecific", #name = "type", #class = "test_css" })Cas
Your Js
$('input:radio').click(function(){
var radioVal = $('input:radio[name=type]:checked').val();
if (radioVal == 'Cheque') {
$("#ddSectionlsts").prop("disabled", false).show();
}
else if (radioVal == 'Cas'){
$("#ddSectionlsts").prop("disabled", false).hide();
}});
In your Model
public string type { get; set; }

HTML
<input type="radio" name="rb" class="mrb" id="rButton1" value="rb1">Radio Button 1 <br>
<input type="radio" name="rb" class="mrb" id="rButton2" value="rb2">Radio Button 2 <br>
<input type="radio" name="rb" class="mrb" id="rButton3" value="rb3">Radio Button 3
Now add a click event by class name and inside of it put you condition whether the clicked button id match with the third button or not. If yes then put your desire action inside of the loop.
$('.mrb').click(function(){
if ($(this).attr('id') == 'rButton3') {
// put your desire action
}
});

For two radio buttons I found this and its working correctly
$(document).ready(function () {
$("#ddSectionlsts").prop("disabled", true);
$("#ddSectionlsts").hide();
$('input:radio').click(function () {
$("#ddSectionlsts").prop("disabled", true);
$("#ddSectionlsts").hide();
if ($(this).attr('id') == 'radiospecific') {
$("#ddSectionlsts").show();
$("#ddSectionlsts").prop("disabled", false);
$('#radiocomman').prop('checked', false);
}
else
$('#radiospecific').prop('checked', false);
});
});
<div>
#Html.RadioButtonFor(model => model.Name1, "Cheque", new { #id = "radiocomman", #name = "type", #class = "test_Css" })
#Html.RadioButtonFor(model => model.Name2, "Cas", new { #id = "radiospecific", #name = "type", #class = "test_css" })
</div>
#*drop down list*#
#{var listItems = new List<ListItem>
{
new ListItem { Text = "Example1", Value="Example1" },
new ListItem { Text = "Example2", Value="Example2" },
new ListItem { Text = "Example3", Value="Example3" }
};
}
#Html.DropDownList("Example", new SelectList(listItems, "Value", "Text"),new{ #id = "ddSectionlsts", #disabled = "disabled"})

Dropdownlist Change event with javascript, when using an EditorTemplate

I have an EditorTemplate - which works great. Inside it, I have a dropdownlist which i decorate with a Class, and 2 divs
<div>
#Html.DropDownListFor(m => m.Type, (SelectList)ViewData["TypeList"], "-- Select --", new { #class = "TypeSelector" })
#Html.ValidationMessageFor(m => m.Type)
</div>
<div class="EmailDiv">EmailStuffHere</div>
<div class="CalendarDiv">CalendarStuffHere</div>
Im trying to show the 1 of the 2 divs based on the selection of the dropdown list
the dropdownlist populates fine, as is shown as a dropdown list with 2 items "Calendar" and "Email"
I have the following Javascript:
function checkSelection() {
$(".EmailDiv").hide();
$(".CalendarDiv").hide();
var selectedItem = $(this).val();
if (selectedItem == "Email") {
$(".EmailDiv").show();
} else if (selectedItem == "Calendar") {
$(".CalendarDiv").show();
}
};
var myobject = new checkSelection();
$(document).ready(function () {
checkSelection();
$(".TypeSelector").change(checkSelection);
checkSelection.apply($(".TypeSelector"));
});
The javascript file loads (I can see it in my firefox debugger)
But doesn't get hit for some reason.
Either of the divs do not show.
What am i doing wrong?

Enclose the html for each item in a container to make it easier to select relative elements
<div class="container"> // add this or similar
<div>
#Html.DropDownListFor(m => m.Type, (SelectList)ViewData["TypeList"], "-- Select --", new { #class = "TypeSelector" })
#Html.ValidationMessageFor(m => m.Type)
</div>
<div class="EmailDiv">EmailStuffHere</div>
<div class="CalendarDiv">CalendarStuffHere</div>
</div>
and the css
.EmailDiv, .CalendarDiv {
display:none;
}
Then the script (in the main view)
$(document).ready(function () {
// Set initial visibility
$('.TypeSelector').each(function(index, item) {
var container = $(this).closest('.container');
if ($(this).val() == 'Calendar') {
container.find('.CalendarDiv').show();
} else if ($(this).val() == 'Email') {
container.find('.EmailDiv').show();
}
});
// Update visibiity on selection
$('.TypeSelector').change(function() {
var container = $(this).closest('.container');
if ($(this).val() == 'Calendar') {
container.find('.CalendarDiv').show();
container.find('.EmailDiv').hide();
} else if ($(this).val() == 'Email') {
container.find('.EmailDiv').show();
container.find('.CalendarDiv').hide();
} else { // this may or may not be necessary
container.find('.EmailDiv').hide();
container.find('.CalendarDiv').hide();
}
});
}