Good morning!
I have a checkbox in my Razor and it shows a div with a datepicker when the check box is checked.
My error is when I double click the checkbox shows the div with the datepicker when is not checked (Do the opposite of what I need).
Here is my code:
<div class="form-group">
#Html.LabelFor(model => model.SupHUBZoneCertified, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-8">
<div class="checkbox" id="cb1">
<label>
#Html.EditorFor(model => model.SupHUBZoneCertified)
#Html.ValidationMessageFor(model => model.SupHUBZoneCertified, "HUB Zone Certified:")
</label>
</div>
</div>
</div>
<div class="form-group" id="dateCb1" style="display:none">
#Html.LabelFor(model => model.SupCategoryHUBZoneDate, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-8">
#Html.EditorFor(model => model.SupCategoryHUBZoneDate, new { htmlAttributes = new { #class = "form-control datepicker" } })
#Html.ValidationMessageFor(model => model.SupCategoryHUBZoneDate, "", new { #class = "text-danger" })
</div>
</div>
and my javascript:
$("#cb1").click(function () {
$("#dateCb1").toggle(this.checked);
});
Assuming that you're using a jQuery UI datepicker, I can't see the toggle method in the api docs
There are only show and hide methods.
So you should modify your code:
$("#cb1").click(function () {
var action = this.checked ? "show" : "hide";
$("#dateCb1").datepicker(action);
$("#dateCb1").toggle(this.checked);
});
Thank you all I found the error, so basically I can't use the #cb1 as the checkbox ID because I need to use the ID of the input.
The ID for the input is self generated in ASP MVC and use the name declared in the MVC model.
So the code would be
$("#SupHUBZoneCertified").click(function () {
$("#dateCb1").toggle(this.checked);
});
I found the input class name using "Inspect Element in Internet Explorer"
Related
I am trying to passed the value from the MVC form to JavaScript. I am using bootstrap to hide and show field. when I remove the bootstrap hide and show functionality on the form I will get the value in the message box but when the Hide/Show is enable I cannot get the value as shown by the image below. can anyowne tell me where I am going wrong
HTML
#using (Html.BeginForm("SearchPatient","HOME", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<div class="form-group">
#Html.Label("Search Criteria", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.SearchCriteria,
new List<SelectListItem> {
new SelectListItem { Value = "" , Text = "Select Search Criteria" },
new SelectListItem { Value = "1" , Text = "Patient Id" },
}, new { #class = "form-control selectchosen" })
</div>
</div>
<div class="form-group" id="PatientId" style="display:none">
<div class="form-group">
#Html.LabelFor(model => model.PatientId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.PatientId, new { htmlAttributes = new { #class = "form-control " } })
</div>
</div>
</div>
<div class="form-group" id="AllShow" style="display:none">
<div class="form-group">
<div class="col-lg-offset-2">
<input type="button" value="Search" class="btn btn-success" id="btnSubmit" onclick="Enablecontrols();" />
</div>
</div>
</div>
</div>
}
JavaScript
<script type="text/javascript">
$('#SearchCriteria').change(function () {
if ($("#SearchCriteria").val() == 1) {
$("#AllShow").show();
$("#PatientId").show();
ValidateField("PatientId", true);
}
function Enablecontrols() {
$(document).ready(function () {
var patientid = $("#PatientId").val();
if ($("#SearchCriteria").val() == 1) {
alert("I am an alert box! the patient number is" + patientid);
}
}
}
</script>
rather than use the show/hide methods of bootstrap, use toggle. It's more reliable.
If that doesn't work you can also use $('#PatientId').css('display','block');
Issue fixed by changing the ID of the Div to dPatientId
Stupid mistake
Im new on using Summernote Textarea , and Im having difficulties on passing the value on a summernote textarea. Tried using the conventional .html(), .text() and .val() to pass the value of my dropdown and append it inside the textarea. Here is my set of codes
$("#btnAddVariable").click(function (e) {
var eVariable = $("#EmailVariable option:selected").val();
$("#EmailMessage").val(eVariable);
$("#EmailMessage").text(eVariable);
alert(eVariable);
})
My Dropdown
<div class="form-group">
#Html.LabelFor(model => model.EmailVariable, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-6">
#Html.DropDownListFor(model => model.EmailVariable, new SelectList(ViewBag.emailVariables, "Value", "Text"), "Please Select", htmlAttributes: new { #class = "form-control" })
#* #Html.DropDownList(model => model.EmailVariable, new SelectList(ViewBag.emailSender, "Value", "Text"), "Please Select", htmlAttributes: new { #class = "form-control" })*#
</div>
<div class="col-md-2">
<input type="button" id="btnAddVariable" value="Add Variable" class="btn btn-primary chosen" />
</div>
</div>
and my Summernote Textarea
<div class="form-group">
#Html.LabelFor(model => model.EmailMessage, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-8">
<div class="ibox-content no-padding">
#Html.TextAreaFor(model => model.EmailMessage, new { #class = "summernote", rows = "5", cols = "90" })
</div>
</div>
</div>
Hoping someone can help me with this. Thanks in Advance
Here is the solution:
$("#btnAddVariable").click(function (e) {
var eVariable = $("#EmailVariable option:selected").val();
$("#EmailMessage").val(eVariable);
$(".summernote").summernote('code',eVariable); //add text to summernote
alert(eVariable);
});
Try with
$("textarea.note-codable").val(eVariable);
I am new to JavaScript and jquery. I have some Kendo DropDownList that I need to set the list itself to auto expand to the width of the lengthiest item. I have been able to do this per control via the following code:
var dropdownlist = $("#Offeror").data("kendoDropDownList");
dropdownlist.list.css("min-width", $("#Offeror").parent().width());
dropdownlist.list.width("auto");
dropdownlist = $("#ReqCertlevel").data("kendoDropDownList");
dropdownlist.list.css("min-width", $("#ReqCertlevel").parent().width()-6);
dropdownlist.list.width("auto");
The above code works, but I have to set it via each ID. I have several drop down boxes. So, I would rather set the width of all tags with the DD_List class. I tried the following:
$( ".DD_List" ).each(function( index, object ) {
var dropdownlist = object.data("kendoDropDownList");
dropdownlist.list.css("min-width", object.parent().width());
dropdownlist.list.width("auto");
});
It is not working. What am I doing wrong? I am open to a CSS solution as well.
Edit:
Basically I am trying to turn:
Into:
Here is the code in the view:
<div class="form-group">
#Html.LabelFor(model => model.Offeror, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#(
Html.Kendo().DropDownList()
.HtmlAttributes(new { #style = "width: 125px;", #class = "DD_List" })
.Name("Offeror")
.SelectedIndex((int)Model.Offeror)
.BindTo(Enum.GetNames(typeof(EnumQuoteOfferor)).ToList())
)
#Html.ValidationMessageFor(model => model.Offeror, "", new { #class = "text-danger" })
</div>
</div>
When the page is rendered in the browser, here is what the view source has for that control:
<div class="form-group">
<label class="control-label col-md-2" for="Offeror">Offeror</label>
<div class="col-md-10">
<input class="DD_List" data-val="true" data-val-required="The Offeror field is required." id="Offeror" name="Offeror" style="width: 125px;" type="text" />
<script>
jQuery(function () { jQuery("#Offeror").kendoDropDownList({ "dataSource": ["AmptechInc", "AmptechEnergySystemsInc", "AmptechTechnicalServicesInc"], "index": 0 }); });
</script>
<span class="field-validation-valid text-danger" data-valmsg-for="Offeror" data-valmsg-replace="true"></span>
</div>
</div>
The wrong lines are:
var dropdownlist = object.data("kendoDropDownList");
dropdownlist.list.css("min-width", object.parent().width());
This because jQuery#each has two arguments, the second one is a dom element and not a jQuery element.
So, change to:
$( ".DD_List" ).each(function( index, ele) {
var dropdownlist = $(ele).data("kendoDropDownList");
dropdownlist.list.css("min-width", $(ele).parent().width());
dropdownlist.list.width("auto");
});
Well, im trying to do something with javascript and the button is not firing the event, first i tryed to knew how to prevent to posting back, then i used something like this:
<div class="form-group">
#Html.LabelFor(model => model.Requerimentos, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-8">
#Html.TextBoxFor(model => model.Requerimentos,new { id = "Requerimento", #class = "form-control" })
<input type="button" onclick="acrescenteLista();return false;" value="Adicionar" id="Adicionar" />
#Html.ValidationMessageFor(model => model.Requerimentos, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<ul id="Requerimentos">
</ul>
</div>
</div>
the button should call the acrescentaLista() function that is in my script that is called correctly.
Here is my script
function acrescenteLista() {
var texto1 = document.getElementById("Requerimento").value;
var texto = document.getElementById("Requerimentos");
console.log(texto);
console.log(texto2);
}
how can i solve this??
You script works properly here is the fiddle https://jsfiddle.net/ogtnfk75/4/
function acrescenteLista() {
var texto1 = document.getElementById("Requerimento").value;
var texto = document.getElementById("Requerimentos");
console.log(texto1);
console.log(texto);
}
Console.log(texto2) ? you dont have that variable in your script
My example form:
#using (#Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-group">
#Html.LabelFor(model => model.Server)
#Html.TextBoxFor(model => model.Server, new { #class = "form-control", id = "serverTextbox" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Username)
#Html.DropDownListFor(model => model.Username, Enumerable.Empty<SelectListItem>(), new { #class = "form-control", id = "usersCombo" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Password)
#Html.PasswordFor(model => model.Password, new { #class = "form-control" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Database)
#Html.DropDownListFor(model => model.Database, Enumerable.Empty<SelectListItem>(), new { #class = "form-control", id = "databaseCombo" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Company)
#Html.DropDownListFor(model => model.Company, Enumerable.Empty<SelectListItem>(), new { #class = "form-control", id = "companyCombo" })
</div>
<div class="form-group">
<input type="submit" id="LogOn" value="Log In" class="btn btn-default" />
</div>
<div>
#Html.ValidationSummary(true)
</div>
}
So when a user changes their server entry (first input), I'm looking to implement an .change() event listener (i think), to clear the other dependant forms (drop down & input) without the use of an actual reset button.
Any help is appreciated
You can use form reset like this
$('input .form-control').on('change',function()
{
$("#form")[0].reset();
})
You can also write your custom implementation which will explicitly reset the values like
function clearForms()
{
JQuery(".form-control").attr('value',' ');
//do this for all controls and call this function
}
Options presented so far will also erase the server value, which I supose is not desirable.
A better option, not jQuery dependant, would probably be:
var serverInput = document.getElementById("serverTextbox");
var form = document.getElementsByTagName("form")[0];
serverInput.addEventListener("change", function() {
var temp = this.value;
form.reset();
this.value = temp;
});