I have a checkboxfor and a textboxfor. If a user enters text into the textboxfor I would like the corresponding checkboxfor to be automatically checked for the user. With the option of course to un-check it if they change their mind.
#Html.CheckBoxFor(m => m.FirstPledge)
#Html.TextBoxFor(m => m.FirstPledgeText, new { #class = "textBoxSize" })
You may listen to the keyup event, check the content in textbox is valid and set the checked property of the checkbox to true.
Here is the code to do so using jQuery.
$(function () {
$("#FirstPledgeText").keyup(function () {
if($.trim($(this).val())!=="")
{
$("#FirstPledge").prop("checked", true);
}
});
})
If you want to uncheck the checkbox when the textbox is empty, add an else part to the if condition and set false for the checked property.
You can do the same in vanilla JavaScript as well if you prefer that.
Related
I want to show/hide a div when I select a date in the datepicker, or when the textbox associated changes its value.
I'm trying to intercept with jquery the selection, but it just won't fire. I attach some code to make myself clear.
Here's the html with the textbox and the datepicker div:
<div class='input-box margin-top10 div-data-and' data-role="data-input-div">
<div class="icona calendario-img"></div>
#Html.TextBoxFor(m => m.DepartureDate, new
{
#class = "inp-data-and",
placeholder = HttpUtility.HtmlDecode(Html.DisplayName(Resx.Index.DepartureDate).ToHtmlString()),
data_role = "data-input",
#readOnly = "true"
})
</div>
<div class="ui-datepicker-div" data-role="data-div"></div>
Looks also like I can't use $ as selection for Jquery but I assume I can do with 'jq11' the same thing, seeing that this code below actually works:
jq11(document).ready(function () {
init('#lcid');
initLocalEvents();
window.loader.hide();
selectionTrigger('#ViewBag.Selection');
});
Thanks in advance.
As I am aware, the showModal() method runs the following steps which end up focusing elements within an HTML dialog (emphasis mine) :
Let subject be the dialog element on which the method was invoked.
If subject already has an open attribute, then throw an "InvalidStateError"
DOMException.
If subject is not connected, then throw an
"InvalidStateError"
DOMException`.
Add an open attribute to subject, whose value is the empty string.
Set the dialog to the centered alignment mode.
Let subject's node document be
blocked by the modal
dialog subject.
If subject's node document's top
layer does not already
contain subject, then
add subject to
subject's node document's top
layer.
Run the dialog focusing steps for subject.
So the last step, 8, will run the following dialog focusing steps on the dialog. From my understanding (which could be completely wrong), these three steps from the dialog focusing-steps section of the spec specify that the element should only be focused if the element is not inert and is auto-focusable:
If subject is inert, return.
Let control be the first descendant element of the subject, in tree order, that is not inert and has the autofocus attribute specified.
If there isn't one, then let control be the first non-inert descendant
element of subject, in tree order.
If there isn't one of those either, then let control be subject.
Run the focusing steps for control.
...
So, to me, it seems as though if my button below (see snippet) has the inert attribute or is not auto-focusable then it shouldn't get focused when the dialog opens. However, when I try and apply both attributes, it still ends up being focused.
Attempt with the inert boolean attribute (which I thought would've made the dialog focusing steps return above, hence performing no focusing):
const dialog = document.querySelector("#dialog");
document.querySelector("#open-btn").addEventListener('click', () => {
dialog.showModal();
});
document.querySelector("#close-btn").addEventListener('click', () => {
dialog.close();
});
#close-btn:focus {
background: red;
}
<button id="open-btn">Open</button>
<dialog id="dialog">
<button id="close-btn" inert="inert">×</button>
</dialog>
Attempt with the autofocus boolean attribute set to false (I believe this is how you set it to false, I also tried autofocus="false" which didn't work either):
const dialog = document.querySelector("#dialog");
document.querySelector("#open-btn").addEventListener('click', () => {
dialog.showModal();
});
document.querySelector("#close-btn").addEventListener('click', () => {
dialog.close();
});
#close-btn:focus {
background: red;
}
<button id="open-btn">Open</button>
<dialog id="dialog">
<button id="close-btn" autofocus="">×</button>
</dialog>
With both of these failing to work, I searched SO and found this answer which suggested that I might also be able to use tabindex="-1", which didn't work either.
I'm aware that I can blur the button once it is focused using .blur(), but my question specifically is:
Why don't the two fiddles above disable the button from being automatically focused?
Is there an HTML attribute of some sort that I can use to stop my button from being focused?
Disabled elements cannot be focused on. You could add the disabled attribute to close-btn.
But, disabled elements cannot be clicked. Add the onclick attribute to open-btn. Set the onclick to this: setTimeout(function(){document.getElementById('close-btn').disabled = false}). This just enables the button 1 millisecond after the button is clicked. The timeout is required so that it does not enable close-btn before the dialog is opened.
If the dialog is re-opened, The button is automatically focused. We could add another onclick attribute to close-btn. Set onclick on close.btn to this: this.disabled = true. This disables close-btn when it is clicked.
Final result:
const dialog = document.querySelector("#dialog");
document.querySelector("#open-btn").addEventListener('click', () => {
dialog.showModal();
});
document.querySelector("#close-btn").addEventListener('click', () => {
dialog.close();
});
#close-btn:focus {
background: red;
}
<button id="open-btn" onclick='setTimeout(function(){document.getElementById("close-btn").disabled = false})'>Open</button>
<dialog id="dialog">
<button disabled id="close-btn" inert="inert" onclick='this.disabled = true'>×</button>
</dialog>
How do I stop an Html.EditorFor element from displaying previous entered values in a drop down when I click in it. Below the html for this element I am using:
#Html.EditorFor(model => model.CreateDate,
new
{
htmlAttributes = new
{
#class = "form-control datepicker",
#id = "id-CreateDatePicker"
}
})
The automatic dropdown of previous values keeps covering the popup calendar which is preventing a user from selecting a date. The below picture shows the drop down of previous values that I need to stop showing when a user clicks in the box:
Thanks in advance.
When a user starts typing in an HTML form field, browsers, by default, enable the autocomplete feature. Numerous users let their browsers collect form data allowing using autocomplete in forms in the future.
To disable or enable autocomplete of text in forms, use the autocomplete attribute of <input> and <form> elements. This attribute contains two values:
on (specifies that autocomplete is enabled, this is the default
value)
off (specifies that autocomplete is disabled)
This can be done in a <form> for a complete form or for specific <input> elements:
Add autocomplete="off" onto the <form> element to disable autocomplete for the entire form.
Add autocomplete="off" for a specific <input> element of the form.
Example :
#Html.EditorFor(model => model.CreateDate,
new
{
htmlAttributes = new
{
#class = "form-control datepicker",
#id = "id-CreateDatePicker",
#autocomplete="off"
}
})
I was trying to display Kendo UI text editor when check box is checked.
However it's not working, can you help me out..
#if (Model.IsAlert!=true)
{
<td>
#(Html.Kendo().Editor().Name("Explanation").HtmlAttributes(new { style = "display:show" }))
</td>
}
Your current approach will only render that/evaluate Model.IsAlert on the initial load of screen.
I would suggest removing the if statement, and defaulting this td to hidden, then change that depending on the properties in the model via a onChange event handler mapped to your checkbox control.
<td id="thingToHide" hidden="hidden">
#(Html.Kendo().Editor().Name("Explanation").HtmlAttributes(new { style = "display:show" }))
</td>
and some jquery code:
<script type="text/javascript">
$(document).ready(function () { // On page load method, check model and show textbox if needed
var model = #Html.Raw(Json.Encode(Model)); // get model example is taken from http://stackoverflow.com/questions/16361364/accessing-mvcs-model-property-from-javascript
if (model.IsAlert) { // If model IsAlert is true, show Explanation field
$("#thingToHide").show();
}
});
$("#YourCheckBoxId").on("change", function() {
$("#thingToHide").toggle();
});
</script>
Good luck Radha!
I've this code for a view (ASP.NET MVC3), and I'm trying to add a for attribute on both the labels
#Html.RadioButtonFor(m => m.Sanctioned, true, new { #checked = "checked"})
<label For="">Yes</label>
#Html.RadioButtonFor(m => m.Sanctioned, false, new { })
<label For="">No</label>
I know it can be assigning an ID to both the radio buttons and refer them in For attribute of Labels respectively, but the situation here is, when I'm setting the IDs other than default, my Model is not getting posted back to controller. So, is there any way or work around to assign For attribute of Label control to point to the Radio buttons? Any suggestion or Feedback is highly appreciated.
This always works normal for me without "For" attribute and Label:
#Html.RadioButtonFor(m => m.Sanctioned, true, new { #checked = "checked"}) Yes
#Html.RadioButtonFor(m => m.Sanctioned, false) No
May be I don't understand your question currectly, but why you really need it?