I have a dropdown, when i select an item its categoryId is assigned to textbox. Then i Have 2 checkboxes 'IsAnonymous' and 'ShowReport'. I want to implement that is the value in textbox is 1 then both checkbox will be visible and when value will be 2 then 'ShowReport' checkbox must be hidden.
javascript
var ReportDiv = $('#ReportDiv');
$('#cmbCategories').on('change', function () {
if ($(this).val() == '1') {
ReportDiv.hide();
}
else {
ReportDiv.show();
}
});
View
#Html.DropDownListFor(p => p.PollSurveyId, Model.PollSurveyDetails, "Select Poll/Survey", new { #class = "form-control", required = "required", #id= "DDPollName" })
#Html.TextAreaFor(p => p.CategoryID, new {id= "cmbCategories" })
<div class="form-group">
#Html.Label("Is Anonymous")
#Html.CheckBoxFor(p => p.IsAnonymous)
</div>
</div>
<div class="col-lg-3">
<div class="form-group" id="ReportDiv">
#Html.Label("Show Report")
#Html.CheckBoxFor(p => p.ShowReport, new { id= "CBReport" })
</div>
<!-- /.col-lg-6 (nested) -->
</div>
Added a picture to give idea of my page
Related
This is my Cshtml
<div class="field">
#Html.LabelFor(modelItem => modelItem.plateNumber)
#Html.DropDownListFor(m => m.plateNumber, new SelectList(ViewBag.PlateNoList, "Value", "Text"),
"", new { Class = "ui selection dropdown document-type" })
</div>
</div>
<div class="field">
#Html.LabelFor(modelItem => modelItem.FuelType)
#Html.DropDownListFor(m => m.FuelType, new SelectList(ViewBag.FuelType,"Value","Text"),
"", new { Class = "ui selection dropdown fuel-type",#id="FuelType"/*, #disabled = "true"*/ })
</div>
This is my JavaScript
document.getElementById("FuelType").disabled = true;
$('#plateNumber').change(function() {
$('.ui.dropdown').dropdown();
document.getElementById("FuelType").disabled = false;
});
When the plateNumber dropdown is selected, the bottom FuelType dropdown should be available, but it cannot be used even though the plateNumber dropdown is selected, any idea?
Try removing the disabled class from the dropdown as well. This is checked (and added) internally by SUI.
document.getElementById("FuelType").disabled = true;
$('#plateNumber').change(function() {
document.getElementById("FuelType").disabled = false;
$('.ui.dropdown').dropdown();
$('.ui.dropdown').removeClass('disabled');
});
I am trying to hide or show a textbox, in a ASP MVC razor view, now i using javascript to handle when i click the radio button which can help me to do hide or show function.
however, i want to base on database record hide and show the textbox, so if i use below code , i need to click the radio for hide or show a textbox, anyone can give me advise how to hide or show textbox base on database record and no need to click radio button? thanks
<script type="text/javascript">
const { checked } = require("modernizr");
function text(x) {
if (x == 0 ) document.getElementById("name").style.display = "block",
document.getElementById("address").style.display = "none",
else document.getElementById("name").style.display = "none",
document.getElementById("address").style.display = "block",
return;
}
</script>
//radio name
#Html.LabelFor(Model => Model.Type, "A")
#Html.RadioButtonFor(Model => Model.Type, "A" , new { #onclick = "text(0)", #id = "but1" })
#Html.LabelFor(Model => Model.Type, "B")
#Html.RadioButtonFor(Model => Model.Type, "B" , new { #onclick = "text(1)", #id = "but2" })
//textbox(name)
<div class="form-group col-md-6" id="name">
#Html.LabelFor(model => model.name, new { #class = "control-label" })
#Html.TextBoxFor(model => model.name, new { #class = "form-control"e })
</div>
//textbox(address)
<div class="form-group col-md-6" id="address">
#Html.LabelFor(model => model.address, new { #class = "control-label" })
#Html.TextBoxFor(model => model.address, new { #class = "form-control" })
</div>
<script>
// self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
text(#Model.Value);
})();
</script>
This is a document ready function. Your text() method will be called when page is loaded.
Use #Model.Value your initial db value. That way it will work for the first time with the value which is in the db.
I have an array of phones that I loop through in my razor to display them one by one on button click from a partial. Each phone has a dropdown for international and domestic phone values. On change of the dropdown, I need to hide some textboxes and show some others. I got it to work showing and hiding textboxes, but the issue now is that each dropdown will change all phones sections and it should only affect the one within its div.
Here's my view:
#for (int x = 0; x < Model.Phones.Count; x++)
{
#Html.EditorFor(m => m.Phones[x], "_PhonePartial")
}
Here's the code to show the phone partial on the button click, which hides all of them except the first one:
$('.phone-wrapper').hide();
$('.phone-wrapper').first().show();
var count = 1;
$('.add-phone-wrapper').on('click', function () {
$('.phone-wrapper:eq('+ count+')').show();
count++;
});
Here's the partial phone view:
<div class="phone-wrapper">
<div class="col-md-1 domestic-phone">
#Html.TextBoxFor(m => m.AreaCode)
</div>
<div class="col-md-1 domestic-phone">
#Html.TextBoxFor(m => m.code2)
</div>
<div class="col-md-1 domestic-phone">
#Html.TextBoxFor(m => m.code3)
</div>
<div class="col-md-3 international-phone">
#Html.TextBoxFor(m => m.Internationalbox)
</div>
<div class="col-md-3">
<select class="form-control phone-selection">
<option selected="selected" value="domestic">Domestic</option>
<option value="international">International</option>
</select>
</div>
</div>
The Javascript for hiding and showing the textboxes is:
$(function () {
$(".phone-selection").on("change", function () {
var $this = $(this),
$closeDiv = $this.closest(".phone-section");
if ($this.val().toLowerCase() === "domestic") {
$closeDiv.find(".domestic-phone").show();
$closeDiv.find(".international-phone").hide();
} else {
$closeDiv.find(".domestic-phone").hide();
$closeDiv.find(".international-phone").show();
}
});
});
Any help will be greatly appreciated, thanks!
Try this
$(function () {
$(".phone-selection").on("change", function () {
var $this = $(this),
$closeDiv = $this.closest(".phone-section");
if ($this.val().toLowerCase() === "domestic") {
$(".domestic-phone").each(function () {
$(this).show();
});
$(".international-phone").each(function () {
$(this).hide();
});
} else {
$(".domestic-phone").each(function () {
$(this).hide();
});
$(".international-phone").each(function () {
$(this).show();
});
}
});
});
In following code if I select only MonthDropdown value and not YearDropdown it should show a validation message.
If I select YearDropdown value and not MonthDropdown value, it should show a validation message.
If I select both dropdown value, the message should be hidden.
I tried myself but I couldn't get the correct result.
<div class="field field--with-dropdown clearfix" style="height: 50px;">
<label for="field-country" >Expiry date</label>
<div class="select--half" style="padding-top: 10px;">
#Html.Kendo().DropDownListFor(x=>x.ExpiryMonth).BindTo(months).Events(x => x.Change("checkout.onMonthYearDDlChange")).DataValueField("Value").DataTextField("Text").OptionLabel("Valid Till Month").HtmlAttributes(new{ required = "required", data_required_msg = " Expiry Month is Required",#class="expmonth" })
#Html.Kendo().DropDownListFor(x => x.ExpiryYear).BindTo(years).Events(x=>x.Change("checkout.onMonthYearDDlChange")).DataValueField("Value").DataTextField("Text").OptionLabel("Valid Till Year").HtmlAttributes(new { required = "required", data_required_msg = " Expiry date is Required", #class = "expyear"})
#Html.ValidationMessageFor(x=>x.ExpiryMonth, "", new { #class = "text-danger expmonth",id="expirymonth" })
#Html.ValidationMessageFor(x => x.ExpiryYear, "", new { #class = "text-danger", id = "expiryyear" })
</div>
</div>
CSS
<style>
span#expirymonth {
display: none !important;
}
</style>
Javascript
var expMonth = $("#Billing_ExpiryMonth").val();
var expYear = $("#Billing_ExpiryYear").val();
if (expMonth !== "" && expYear !== "") {
$("#expiryyear").hide();
} else {
$("#expiryyear").show();
}
I am submitting the form which has the css dropdownlist for gender how to submit the gender selected value to controller i am getting tht value null
<div class="regi-field-set">
<div id="ddlgender" class='selectBox' tabindex="7">
<span class='selected' id="gender">gender</span>
<span class='selectArrow'>▼</span>
<div id="disableasterisk5" style="padding-bottom:8px"><span class="required">*</span></div>
<div class="selectOptions" id="genderSelectOptions">
<span class="selectOption" id="ddlgen">male</span>
<span class="selectOption" id="ddlgen1">female</span>
</div>
</div>
<div class="regi-field-set">
#Html.TextBoxFor(model => model.DOB, new { #class = "jq_watermark", placeholder = "date of birth", tabindex = "8",id = "DOB",title = "please enter date of birth" })
<div id="disableasterisk7"><span class="required">*</span></div>
<div class="clear"></div>
#Html.ValidationMessageFor(model => model.DOB)
</div>
how to pass both value to controller all other fields in the form are using html.helper fields only gender field is css implemented
Is there any way to pass the entire model and the gender selected value to controller
please help
If I understood your question, the answer of passing to the View both the "model" and a list of something else to use in a dropdown list can be done by the following code:
Controller
....
var model = service.GetMyThing(id);
var genderList= service.GetGenders().Select(p =>
new SelectListItem { Value = p.Id.ToString(), Text = p.Name }).ToList();
ViewBag.GenderList = genderList;
return View(model);
View
....
#Html.DropDownList("GenderId",(IEnumerable<SelectListItem>)ViewBag.GenderList)
....
<div class="regi-field-set">
#Html.TextBoxFor(model => model.DOB, new { #class = "jq_watermark", placeholder = "date of birth", tabindex = "8",id = "DOB",title = "please enter date of birth" })
<div id="disableasterisk7"><span class="required">*</span></div>
<div class="clear"></div>
#Html.ValidationMessageFor(model => model.DOB)
</div>
Note: this is NOT the only solution, custom HTMLHelpers can be used to draw the combo.
using ajax you can achieve this : don't use form & declare your attributes like this in tags:
#Model.idText
<input type="text" id="textValue"/>
<input type="submit" id="btnSubmit"/>
jquery:
$(function (e) {
// Insert
$("#btnSubmit").click(function () {
$.ajax({
url: "some url path",
type: 'POST',
data: { textField: $('#textValue').val(), idField: '#Model.idText' },
success: function (result) {
//some code if success
},
error: function () {
//some code if failed
}
});
return false;
});
});
Hopefully it will help you