Develop Reference

Remove certain text from text box on click

I have a TextBoxcontrol in my web form, where in I display Height & Width of certain product.
Now I display this as follows :
As you can see, I append a " to show inches, in the string in the following way :
txtH.Text = arrHW[i].ToString() + "\"";
Now, this causes problem while editing! As the user can never always be sure of correctly editing the field by editing the number only and not the " symbol.
I need someway either through JavaScript or C#, that removes the symbol " while the user clicks on the textbox and removes as the focus is changed.
I tried this method, but it doesn't seem to work!
protected void txtH_TextChanged(object sender, EventArgs e)
{
string height = txtH.Text;
char[] splitArr = { '"' };
string[] editH = height.Split(splitArr);
for (int i = 0; i < editH.Length; i++)
{
if (editH[i].ToString().Equals("\""))
{
editH[i].Remove(i);
}
}
}
This is the designer code for the textboxes :
<asp:PlaceHolder ID="plcHW" runat="server">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-arrows-v"></i> Height</span>
<asp:TextBox ID="txtH" runat="server" Width="60px" CssClass="form-control" OnTextChanged="txtH_TextChanged" />
<span class="input-group-addon"><i class="fa fa-arrows-h"></i> Width</span>
<asp:TextBox ID="txtW" runat="server" Width="60px" CssClass="form-control" />
</div>
</asp:PlaceHolder>

You can clear the text box as soon as the focus is on it then add" after the user adds the value to it! This is one way of doing it!
var prev="";
$('#HEIGHT').focus(function() {
prev=$(this).val();
$(this).val(prev.replace("\"", ""));
}).blur(function() {
if($(this).val()==""){
$(this).val(prev)
}
else{
$(this).val($(this).val()+"\"");
}
});

Without any jquery:
(function($el) {
"use strict";
$el.addEventListener("focus", adjust, true);
$el.addEventListener("blur", adjust, true);
function adjust($e) {
var e = $e.type;
if (e === "focus") $el.value = $el.value.replace(/\"/g, "");
if (e === "blur") $el.value = $el.value + '"';
}
})(document.getElementById("height"));
http://jsfiddle.net/dlizik/5cb7g8te/

You can do it as
$(document).ready(function(){
$("TextBoxId").focus(function(){
var tval = $(this).val();
$(this).val(tval.replace(/\"/g, ""));
});
$("TextBoxId").focusout(function(){
var tval = $(this).val();
$(this).val(tval.replace(/\"/g, "")+ '\"');
});
});

I have tried solving your issue with this Fiddle: http://jsfiddle.net/akd7r31a/1/
$(document).ready(function(){
$('#username').focus(function(){
var txtValue = $(this).val();
var charTest = txtValue.substr(txtValue.length - 1);
if(charTest == '"'){
var showString = txtValue.slice(0, -1);
$(this).val(showString);
}
});
$('#username').focusout(function(){
var txtValue = $(this).val();
var charTest = txtValue.substr(txtValue.length - 1);
if(charTest != '"'){
var newVal = $(this).val() + '"';
$(this).val(newVal);
}
});
});

How to use 'onKeyUp' attribute in asp.net?

Message 1: Validation (ASP.Net): Attribute 'onkeyup' is not a valid attribute of element 'TextBox'. E:\ABC\ABCD.aspx 83 66 ABCD
I want dropdown to change the Display list according to the value typed in TextBox.I have written the following query for it
var ddlText, ddlValue, ddl, lblMesg;
function CacheItems() {
ddlText = new Array();
ddlValue = new Array();
ddl = document.getElementById("=STCDropDownList.ClientID");
lblMesg = document.getElementById("=Label1.ClientID");
for (var i = 0; i < ddl.options.length; i++) {
ddlText[ddlText.length] = ddl.options[i].text;
ddlValue[ddlValue.length] = ddl.options[i].value;
}
}
window.onload = CacheItems;
function FilterItems(value) {
ddl.options.length = 0;
for (var i = 0; i < ddlText.length; i++) {
if (ddlText[i].toLowerCase().indexOf(value) != -1) {
AddItem(ddlText[i], ddlValue[i]);
}
}
lblMesg.innerHTML = ddl.options.length + " item(s) found.";
if (ddl.options.length == 0) {
AddItem("No item found.", "");
}
}
function AddItem(text, value) {
var opt = document.createElement("option");
opt.text = text;
opt.value = value;
ddl.options.add(opt);
}
The below following are Textbox and DropDownlist i am using.
<asp:TextBox ID="STCTextBox" runat="server" onkeyup="FilterItems(this.value)"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style3">Service Tax Code</td>
<td class="auto-style3">
<asp:DropDownList ID="STCDropDownList" runat="server" AutoPostBack="True" DataSourceID="STCSqlDataSource" DataTextField="ServiceTaxCode" DataValueField="ServiceTaxCode"></asp:DropDownList>
<asp:Label ID="Label1" runat="server" Text="Entered Comm Code Already Registered" Visible="False"></asp:Label>

Simple jQuery Function
.keyup()
Explore https://api.jquery.com/keyup/

From What i see
Replacing Function FilterItems with this can help
var txtBox=document.getElementById("=STCTextBox.ClientID");
txtBox.onkeyup=function() {
var value=txtBox.value;
ddl.options.length = 0;
for (var i = 0; i < ddlText.length; i++) {
if (ddlText[i].toLowerCase().indexOf(value) != -1) {
AddItem(ddlText[i], ddlValue[i]);
}
}
lblMesg.innerHTML = ddl.options.length + " item(s) found.";
if (ddl.options.length == 0) {
AddItem("No item found.", "");
}
}

Rather use jQuery:
$("#id").keyup(function(){<br/>
// Your Code <br/>
});

No value is present in hidden field after page load

In the below code i have coded in page load.In this i have store regular expressions in hidRegExp.Value. Now i have to store this value in the hidden field.Now in javascript i have to validate the user input in textbox.But when i enter a value it shows blank alert.But i want to display the regular expression in alert.Pls help me to do this.
code behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (FieldTypeInfo == FieldType.TextBox)
{
TblSearch.Visible = false;
TblDate.Visible = false;
tblDropd.Visible = false;
TblChk.Visible = false;
lblText.Text = FieldLabel;
//txtreq.Enabled = this.IsMandatory;
string strRegularExp = string.Empty;
if (ListOfRegularExpression != null)
{
for (int iRow = 0; iRow < ListOfRegularExpression.Count; iRow++)
{
strRegularExp += ListOfRegularExpression[iRow].ToString() + "~~";
hidRegExp.Value = strRegularExp;
if (iRow == ListOfRegularExpression.Count - 1)
{
strRegularExp = strRegularExp.TrimEnd("~~".ToCharArray());
txtField.Attributes.Add("onblur", "javascript:ValidateRegExp('" + txtField.ToString() + "');");
}
}
}
hidRegExp.Value = strRegularExp;
lbl.Text = "The value of the HiddenField control is " + hidRegExp.Value + ".";
}}
code:
<script type="text/javascript">
function ValidateRegExp(txtInput) {
var hiddenValue = document.getElementById("<%=hidRegExp.ClientID%>").value;
alert("hiddenValue" + hiddenValue+".");
var mySplitResult = new Array();
mySplitResult = hiddenValue.split("~~");
for (i = 0; i < mySplitResult.length; i++) {
//document.write("<br /> Array[" + i + " ]= " + mySplitResult[i]);
var re = new RegExp(mySplitResult[i]);
if (txtInput.match(re)) {
alert("Successful match");
} else {
alert("No match");
}
}
}
</script>
<asp:HiddenField ID="hidRegExp" runat="server" EnableViewState= "true" >
</asp:HiddenField >
<asp:Label ID="lbl" runat="server"></asp:Label>

Initially ListOfRegularExpression will be null so control will not enter into if (ListOfRegularExpression != null) and HiddenField.Value wont be set.

I have had the problem before. Honestly, I don't remember how I resolved it, but I tried a few things. Here they are:
For displaying the hidden field, add ClientIdMode as static on your hidden field like
<asp:HiddenField ID="hidRegExp" runat="server" EnableViewState="true" ClientIDMode="Static"></asp:HiddenField>
and in the JavaScript, use:
document.getElementById("hidRegExp");
If this does not work, try your approach with these below:
1) Try moving your hidden field before the script.
2) Try making it a label and use that in the JavaScript.
Hope this helps.

Enable Button during certain day & time

I am trying to enable a button ONLY during 5PM to 10PM every day, except Monday.
When the button is disabled, <p></p> should show up (like a notification to the visitor why it is disabled.)
I did try to write the JavaScript on my own, but it seem not to work correctly. I don't know anything about that language and did the script with aid of different sites.
Here is my script:
<input class="submit" type="submit" id="checktimer" value="Check"/>
<p id=timer style="display: none;">Lorem ipsum</p>
<script type="text/javascript" defer="defer">
<!--
var enableDisable = function(){
var UTC_hours = new Date().getUTCHours() +1;
var day = new Date().getDay();
if (day == 1){
document.getElementById('checktimer').disabled = true;
document.getElementById('timer').style.display = 'block';
}
else{
if (UTC_hours > 16 && UTC_hours < 22){
document.getElementById('checktimer').disabled = false;
document.getElementById('timer').style.display = 'none';
}
else
{
document.getElementById('checktimer').disabled = true;
document.getElementById('timer').style.display = 'block';
}
}
};
setInterval(enableDisable, 1000*60);
enableDisable();
// -->
</script>

This would work:
var enableDisable = function(){
var UTC_hours = new Date().getUTCHours(); //Don't add 1 here
var day = new Date().getUTCDay(); //Use UTC here also
if (day != 1 && UTC_hours >= 17 && UTC_hours < 22){
document.getElementById('checktimer').disabled = false;
document.getElementById('timer').style.display = 'none';
}else{
document.getElementById('checktimer').disabled = true;
document.getElementById('timer').style.display = 'block';
}
};
setInterval(enableDisable, 1000*60);
enableDisable();
Cheers

DEMO
Try setting the attribute on the element, instead of a property on the element object:
document.getElementById('checktimer').setAttribute('disabled');
To remove it, use
document.getElementById('checktimer').removeAttribute('disabled');
As others have mentioned, you should cache the checktimer element in a variable, instead of looking it up each time.
A couple of other minor things I changed:
Removed those Javascript comment things you had. You don't need those.
Added quotes around the value of the id attribute for your p element.

Actually, you shouldn't enable or disable the button based on JavaScript DateTime because it gets the client machine's date, meaning that if the user changes it's system date the button will be enabled. You should verify it on the server-side code, such as PHP or ASP. There, you can check for datetime validation, and write the button on the page, or not.

Just get rid of the HTML comment <!-- or comment it with //
<script type="text/javascript">
//<!--
var enableDisable = function(){
var UTC_hours = new Date().getUTCHours() +1;
var day = new Date().getDay();
if (day == 1){
document.getElementById('checktimer').disabled = true;
document.getElementById('timer').style.display = 'block';
}
else{
if (UTC_hours > 16 && UTC_hours < 22){
document.getElementById('checktimer').disabled = false;
document.getElementById('timer').style.display = 'none';
}
else
{
document.getElementById('checktimer').disabled = true;
document.getElementById('timer').style.display = 'block';
}
}
};
setInterval(enableDisable, 1000*60);
enableDisable();
// -->
</script>
Your script should then work normally

How do I ensure inserted date stays inserted until checked box is unchecked?

Per this code below, when users check a box, date is automatically inserted into a textbox control called cDate. This works great:
function ClickBox(cb) {
var tr = cb;
while (tr.tagName != "TR") {
tr = tr.parentNode;
if (tr == null) return; // something went wrong
}
var inps = tr.getElementsByTagName("input");
for (var i = 0; i < inps.length; ++i) {
var inp = inps[i];
if (inp.name.indexOf("cDate") >= 0) {
inp.value = rightDate();
break;
}
}
}
These are the affected controls:
<ItemTemplate>
<asp:CheckBox ID="myrecord" runat="server" onclick="ClickBox(this)" />
</ItemTemplate>
<ItemTemplate>
<asp:TextBox runat="server" style="border: none;" ID="cDate"></asp:TextBox>
</ItemTemplate>
The issue users are currently having is that once a checkbox is checked and date is inserted, only way to remove the inserted dates is the click the Reset button.
They would prefer to have the inserted dates disappear once a checked box is unchecked.
This modified code below isn't working. I am not getting any errors, however, whenever I am checking a box or unchecking it, nothing is happening - no date is getting inserted anymore.
function ClickBox(cb) {
var tr = cb;
var inps = tr.getElementsByTagName("input");
if(cb.checked == 1){ // CheckBox checked condition
while (tr.tagName != "TR") {
tr = tr.parentNode;
if (tr == null) return; // something went wrong
}
for (var i = 0; i < inps.length; ++i) {
var inp = inps[i];
if (inp.name.indexOf("cDate") >= 0) {
inp.value = rightDate();
break;
}
}
}
else{
for (var i = 0; i < inps.length; ++i) {
var inp = inps[i];
inp.value = '';
}
}
}
I am not sure what I am doing wrong.
Thanks for your assistance.

Here's a very simple solution that works for me:
ASP.NET Markup:
<div>
<asp:CheckBox ID="cbDate" runat="server" onclick="ClickBox(this)" />
<br />
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
</div>
JavaScript:
function ClickBox(checkbox) {
var dateCheckbox = checkbox;
var dateTextBox = document.getElementById("txtDate");
if (dateCheckbox.checked === true) {
dateTextBox.value = "TODAY";
} else {
dateTextBox.value = "";
}
}
Hope this helps.