I'm trying to use the jquery mask to apply to an ASP.NET web form textbox. Nothing I do works... what am I missing?
<script type="text/javascript" src="/js/jquery.maskedinput-1.2.2.js"></script>
<script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function() {
$("#phone").mask("999-999-9999");
});
</script>
This is the text box code:
<asp:TextBox runat="server" ID="phone" CssClass="rightsection" ToolTip="Please enter a phone number."></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="phone" Display="Dynamic" ForeColor="Red" Text="Required field" ValidationGroup="formfields" />
the textbox's id changes when it gets rendered to include the parent containers id, you can get the rendered id with ClientID like this
$("#<%= phone.ClientID%>").mask("999-999-9999");
The ClientID value is generated by concatenating the ID values of each parent naming container with the ID value of the control. In data-binding scenarios where multiple instances of a control are rendered, an incrementing value is inserted in front of the control's ID value. Each segment is separated by an underscore character (_).
This is the solution:
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.js"></script>
Related
Does anyone know if there is a way to prevent the Ajax CalendarExtender from displaying recently selected dates (like the 2018-03-05, etc. in below screenshot)? I also wasn't sure if this was a browser feature, but I have unselected all of the predictive options in my Chrome browser, cleared all history/cache, shut the browser down completely and it's still showing the dates. This is an ASP.NET, C# application.
I've never had much success with getting jQuery to work, but here is what I have so far:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$('tbStartDate').on('click', function(e) {
e.preventDefault();
$(this).attr("autocomplete", "off");
});
$('tbEndDate').on('click', function(e) {
e.preventDefault();
$(this).attr("autocomplete", "off");
});
</script>
<asp:TextBox ID="tbStartDate" runat="server"></asp:TextBox>
<asp:CalendarExtender runat="server" TargetControlID="tbStartDate"></asp:CalendarExtender>
<asp:TextBox ID="tbEndDate" runat="server"></asp:TextBox>
<asp:CalendarExtender runat="server" TargetControlID="tbEndDate"></asp:CalendarExtender>
But I'm getting the "Uncaught TypeError: $(...).on is not a function at VendorFreightCalc.aspx:16, which points at the first jQuery line above.
Please have a look at this question:
Disable autocomplete for all jquery datepicker inputs
Basically, you want to turn off autocomplete for that field.
(UPDATE)
Maybe try the non-jquery options for turning off autocomplete.
<input type="text" name="field1" value="" autocomplete="off" />
So I want to include a mask to my textbox. I have researched for different options and I have tried all of them but none seem to work. Im using VS2013 and C# and I want to be able to use textbox.text on my code too.
I have something like this:
<script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/js/jquery.maskedinput.js"></script>
<script type="text/javascript">
$(function () {
$("#TxtDOB").mask("999-999-9999");
});
</script>
asp:TextBox ID="TxtDOB" runat="server" CssClass="textbox1" Width="130px" />
TextBox won't recognize the mask.
I'm a bit late to the party, but adding ClientIDMode="static" should fix the issue here. By default, .Net will convert the ID ("TxtDOB" in this case) to something other than what you set it to. Adding ClientIDMode="static" tells .Net not to change the ID and make it available as-is on the client-side.
<asp:TextBox ID="TxtDOB" runat="server" ClientIDMode="static" CssClass="textbox1" Width="130px" />
This is the hidden field and the javascript.
<asp:HiddenField ID="hdn" runat="server" />
<script type="text/javascript">
document.getElementById("hdn").value = "helo";
</script>
And i tried to access the hidden field value in the .cs file as string st = hdn.value.
But it shows null when i check the value using linebreaker
Use ClientID instead of server id and also make sure that javascript is executed after the hdn field being added to DOM, you can put the script tag just before the closing body tag.
document.getElementById("<%= hdn.ClientID %>").value = "helo";
If you have .net framework 4 and above you can also set ClientIDMode to static to keep the server id on client unchanged.
HTML
<asp:HiddenField ID="hdn" runat="server" ClientIDMode="static" />
Javacript
<script type="text/javascript">
document.getElementById("hdn").value = "helo";
</script>
I am using 2 separate JavaScript refs...see below...
<script src="../scripts/jsKeyboard.js" type="text/jscript"></script>
<script src="../scripts/DOB_Validate.js" type="text/jscript"></script>
I am calling each Javascript through an onfocus event using two seperate asp:Textbox...see below:
<asp:Textbox id="txtFirstName" runat="server" onfocus="jsKeyboard.focus(this);clean(this);" placeholder="Touch Here To Enter First Name" autofocus top="50%"></asp:Textbox>
<asp:TextBox ID="TextBox1" runat="server" onfocus="board.focus(this);clean(this);" placeholder="MM/DD/YYYY"
maxlength="10" Width="5%"></asp:TextBox>
I have two scripts inside the head of the page that initialize the keyboard with the corresponding .js external ref (see two separate .js scripts above)...
Scripts inside head:
<script type="text/javascript">
$(function () {
board.init("virtualKeyboard");
});
</script>
<script type="text/javascript">
$(function () {
jsKeyboard.init("virtualKeyboard");
});
</script>
However...the second script inside the head is always overriding the other...
How can I fix this issue??? Thank you...
Both of your functions look exactly the same. I am going to assume you want the same functionality for both? If that's the case, you are hooking into the same element 'txtContent'. You need to have the other script hook into 'TextBox1'.
For txtContent:
<script type="text/javascript">
$(function () {
jsKeyboard.init("virtualKeyboard");
$("#txtContent").val(initText);
});
</script>
And TextBox1:
<script type="text/javascript">
$(function () {
board.init("virtualKeyboard");
$("#TextBox1").val(initText);
});
</script>
You also may want to consider changing the name of TextBox1.
I'm using DevExpress develop my website...Now i'm use Aspxtextbox with jquery to display datepicker. I don't use AspxDateEdit because i can't apply my css...Here is my code:
Javascript
$(function () {
$("#<%= txtDate.ClientID %>").datepicker(
{ dateFormat: 'dd/mm/yy', minDate: 0 })
});
ASPX
<dx:ASPxTextBox Native="true" CssClass="span3" runat="server" ID="txtDate">
<ValidationSettings ErrorDisplayMode="Text" ErrorFrameStyle-ForeColor="Red" Display="Dynamic" ErrorTextPosition="Bottom" SetFocusOnError="true">
<RequiredField IsRequired="True" ErrorText="The value is required" />
</ValidationSettings>
</dx:ASPxTextBox>
When i view source code, input id = ContentPlaceHolder1_ctl00_txtDate..What's wrong in my code?
For the datepicker to work you need to reference both jQuery and THEN (note the order) -> jQuery UI.
So it will be something like this:
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/yourapp.js"></script>
I hope this helps.
EDIT
Also, not sure if the textbox ID is actually trimmed, so try to remove the spaces:
$("#<%=txtDate.ClientID %>")