I have an editorfor field that is a checkbox and when it is changed from false to true and the form is submitted i need to track that the checkbox was changed and is marked true. Also it has to be a javascript or jquery function.
<div class="editor-field">
#Html.EditorFor(model => model.IsPublic)
</div>
If i need to explain this better please tell me. I just cant think of how else to explain.Thanks
Hope following code will do it:
#Html.HiddenFor(model => model.IsPublicChanged) #*create special model field for handling change event*#
$().ready(function () {
//catch change event and assign value to hidden field
$("input[name=IsPublic]").on("change", function () {
$("input[name=IsPublicChanged]").val('true');
});
});
Or some different js-code if you want to see if value of checkbox was changed comparing to it's initial value:
$().ready(function () {
var trackValue = $("input[name=IsPublic]").prop("checked");
$("form").on("submit", function () {
var actualValue = $("input[name=IsPublic]").prop("checked");
if (actualValue != trackValue) {
$("input[name=IsPublicChanged]").val('true');
}
});
});
Related
My code is in C#. I have a span with id change. I need to change the text onmouseover to a value from the database. I got the value and assign it to a label and I made it hidden. Now on mouseover I want to get the value of the hidden label.
Here is my script.
<script>
$(document).ready(function () {
$("#change").mouseover(function () {
$('#change').text("value of label");
});
$("#change").mouseout(function () {
$('#change').text("Investor");
});
});
</script>
How can I do it?
Solved By Me :)
I have solved the issue. It was because I had visible=false in the label properties and I should replace it with style="display:none;" .
.Regarding my Script. It is as below .
$(document).ready(function () {
var originalText = $('#change').text();
$('#change').mouseover(function () {
var hiddenVar = $('[id$="NewAccountsLabel"]').html();
$('#change').text(hiddenVar);
});
$('#change').mouseleave(function () {
$('#change').text(originalText);
});
});
Why don't you use the label value , your label should have the id
$(document).ready(function () {
Var lblvalue = $('#label').val();
$("#change").mouseover(function () {
$('#change').text(lblvalue);
});
$("#change").mouseout(function () {
$('#change').text("Investor");
});
The jQuery events are mouseover and mouseleave events. More on this here
// save the previous value in javascript variable
var originalText = $('#change').text();
//mouse event on mouseover the span
$('#change').mouseover(function() {
// read the value from the hidden label
var hiddenVar = $('#NewAccountsLabel').text();
// assign the new value from the hidden var
$('#change').text(hiddenVar);
});
//mouse event when mouse leaves the span
$('#change').mouseleave(function() {
// assign the original value when it leaves
$('#change').text(originalText);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<span id="change"> Investor</span>
<label id='NewAccountsLabel' hidden> value from DB </label>
I have some code to set the value of a hidden field so I can access it in the code behind but the value is always empty in the code behind. The value for the effectiveDate is being set but I doesn't look like the hidden field property Value is being set.
<input id="appEffectiveDate" type="text" />
<label id="effectiveDateLabel" for="appEffectiveDate">App Effective Date</label>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<asp:HiddenField ID="appEffectiveDateToSetForUserRole" runat="server" Value="" Visible="false" />
<script>
$(function () {
var SelectedDates = {};
$('#appEffectiveDate').datepicker({
beforeShowDay: function (date) {
var Highlight = SelectedDates[date];
if (Highlight) {
return [true, "Highlighted", Highlight];
}
else {
return [true, '', ''];
}
}
});
$("#effectiveDateLabel").hide();
$("#appEffectiveDate").hide();
$('input[value="85"]').click(function () {
if($(this).is(':checked'))
{
$("#effectiveDateLabel").show();
$("#appEffectiveDate").show();
}
});
$("#appEffectiveDate").change(function () {
var effectiveDate = $("#appEffectiveDate").val();
$(":asp(appEffectiveDateToSetForUserRole)").prop('value', effectiveDate);
});
});
</script>
In the code behind the value is empty for the hidden field:
if (!string.IsNullOrEmpty(appEffectiveDateToSetForUserRole.Value))
{
// this is never called because .Value is empty
}
If Visible is set to false, the control will not be rendered by ASP.NET in the markup at all, which means that jQuery won't be able to find it because it doesn't exist. Just remove the visible=false part. It'll stay hidden.
I have following HTML code under Requisition.cshtml
foreach (var item in Model.RequisitionWorks)
{
<tr>
<td><div class="radio"><label name="#string.Format("Option_{0}", item.OptionNumber)">#item.OptionNumber</label></div></td>
<td>
<div class="radio">
<label>#Html.RadioButton(string.Format("Option_{0}", #item.OptionNumber),
"0", #item.IsOptionChecked("0"), new { #class = "OptionClass", id = string.Format("Option_None_{0}", #item.ToothNumber) }) #MyModelEntities.Properties.Resource.None
</label>
</div>
</td>
And I generate lots of radiobuttons...
So I would like to bind some jQuery event at the moment of rendering that code.
$("#Option_None_" + optionNumber).change(function () {
});
I need it because I generate id of html tag on fly.
Is it possible to do?
Why not apply using the class of the option instead of an id?
$(document).ready(function(){
$(".OptionClass").change(function () {
});
});
You can do this by using the .on jquery method (http://api.jquery.com/on/). To accomplish this you would select your containing div and then set the onchange for the inputs within it.
$('div.radio').on('change', 'input', function() {});
Edit: it's a lot easier to do what you want to if you give the radio buttons a common class and use the above method. Generally it's not necessary use something unique like the id to attach the same event handler to each one.
I have two Kendo DropDownLists, I want to disable second DDL when the value of the first DDL is loaded and bounded to the value of my viewmodel.
So I have such code:
#(Html.Kendo().DropDownList()
.Name("FormGroupId")
.HtmlAttributes(new { style = "width:250px" })
.OptionLabel("Select form group...")
.Template("#= data.Name # - #= data.Version #")
.DataTextField("Name")
.DataValueField("Id")
.Events(events =>
{
events.Change("onFormGroupChanged");
events.Select("onFormGroupSelected");
events.Cascade("onFormGroupCascaded");
})
.DataSource(source =>
{
source.Read(read => { read.Route(RouteConfig.GetFormGroupNames.Name); });
})
)
and
#(Html.Kendo().DropDownList()
.Name("Schema")
.HtmlAttributes(new { style = "width:250px" })
.OptionLabel("Select schema...")
.DataTextField("SchemaName")
.DataValueField("SchemaId")
.DataSource(source =>
{
source.Read(read =>
{
read.Route(RouteConfig.FilterFormSchemas.Name).Data("filterSchemas");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("FormGroupId")
)
I subscribe to the Cascade event on first DDL and try to disable second DDL from there, but it doesn't work.
JS:
function onFormGroupCascaded(e) {
$("#Schema").data("kendoDropDownList").enable(false);
}
You are already doing that.
Add events to first drop-down list:
.Events(e =>
{
e.Change("change").Select("select").Open("open").Close("close").DataBound("dataBound");
})
Using JavaScript, handle the change event
<script>
function change() {
// get a reference to the dropdown list
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
// disable the dropdown list
dropdownlist.enable(false);
};
</script>
Looks like you are already doing this. What kind of error are you getting?
This is an old question, but binding to the CascadeFrom event will not prevent the drop down from being enabled. This is due to code in the Kendo library re-enabling it later in the execution order.
Instead, bind to the DataBound event to disable the drop down. This event occurs later in the execution stack and disables the input after the Kendo code enables it.
This code works in angular directive configuration
dataBound: function (e) {
this.enable(false);
}
I have this code
$(document).ready(function () {
$("#<%= chkSpecialIntegration.ClientID %>").click(function () {
if (this.checked) {
document.getElementById('<%=ddlTypeSpecialIntegration.ClientID %>').style.visibility = 'visible'; }
});
});
When this is checked then a textbox is no longer required. How can I do this?
If all you want to do is make ddlTypeSpecialIntegrationvisible when chkSpecialIntegration is checked, you can just do:
$(document).ready(function () {
$("#<%= chkSpecialIntegration.ClientID %>").toggle(function() {
$("#<%= ddlTypeSpecialIntegration.ClientID %>").show();
}, function() {
$("#<%= ddlTypeSpecialIntegration.ClientID %>").hide();
});
});
There are two ways that an html textbox can be forced to be required. You should implement both.
The first is to validate the data prior to form submission. You can accomplish this in javascript by hooking into the onsubmit event. An example is at http://www.w3schools.com/js/js_form_validation.asp
Inside that method you will need to test if your checkbox is selected or not. If it isn't, then see if they typed something in your textbox.
The second is to validate it server side after form submission. For this you could simply provide some validation code in your button's server side onclick method.
I say to implement both because you will want to provide immediate feedback when something is required client side and you want to enforce it server side in case javascript is turned off.
Of course, if JS is turned off then they will probably never see the textbox to begin with.
Why do you need JS for that?
Isn't something like this enough?
<input<% if some_condition %> required="required"<% endif %> name="field" />
Give id for textbox like
<%: Html.TextBoxFor(model => model.FirstName, new { #tabindex = "1", maxlength = "50" ,id="Name"})%>
$(document).ready(function () {
$("#<%= chkSpecialIntegration.ClientID %>").click(function () {
if (this.checked) {
document.getElementById('<%=ddlTypeSpecialIntegration.ClientID %>').style.visibility = 'visible';
$("#Name").hide;
}
});
});