The label is initialized with the value of the textbox. Upon clicking the label, the textbox is shown. The user can then edit the contents of the textbox. Upon blurring focus, the textbox is hidden and the label shown. Should the user delete the contents of the textbox or only enter whitespace into the textbox, the textbox is not hidden, thus avoiding showing a label with no text. Is there a way to do this ?
Untested, but the general idea should help you out.
HTML:
<asp:TextBox ID="txtA" onblur="txtBlur();" style="display:none;" runat="server"/>
<asp:Label ID="txtA" onclick="txtFocus();" runat="server"/>
Client-side JS:
<script>
var txtA = document.getElementById("<%# txtA.ClientID %>");
var lblA = document.getElementById("<%# lblA.ClientID %>");
function txtBlur()
{
if (txtA.value.trim() != '')
{
lblA.innerText = txtA.value;
lblA.style.display = 'inline';
txtA.style.display = 'none';
}
}
function txtFocus()
{
txtA.value = lblA.innerText;
lblA.style.display = 'none';
txtA.style.display = 'inline';
}
</script>
Check for js validation that textbox is not empty
function Validate()
{
if(document.getElementById("txta").value=="")
{
alert('Please enter the value');
document.getElementById("txta").focus();
return false;
}
}
or you can server side
if (txa.text ="")
{
Response.Write('Text box cannot be empty');
}
Related
My textbox HTML code is:
<asp:TextBox ID="txt_pass"
runat="server" class="txt-box_reg"
onfocus="if (this.value == 'Password')
{
this.value = '';this.type='password';
}"
onblur="if (this.value == '')
{
this.value = 'Password';this.type='text';
}"
value="Password">
</asp:TextBox>
and my javascript code is:
<script type="text/javascript" language="javascript">
function myFocus(element) {
if (element.value == element.defaultValue) {
element.value = '';
}
}
function myBlur(element) {
if (element.value == '') {
element.value = element.defaultValue;
}
}
</script>
All things work fine till the alert message box opens on my page.
When the alert message opens, the password shows and when I close the alert box the password regain its value as...
//More INFORMATION//
When I put textmode="password" then the second textbox shows but I use to show my textbox as 3rd textbox i.e. Confirm Password
Do one thing, try it in your source code.
if(your alert box condition)
{
//your alert box coding
txt_pass.Text = ""; // or make text as you wish.
}
else.....
do this in your .cs page, at where you popup your Alert-box.
You are able to it using jQuery:
$(".txt-box_reg").focus(function (pas) {
$(".txt-box_reg").attr("Type", "Password");
});
I have a WebForm in which i need to place around 30 textboxes mainly to enter barcode scanned data. I am making only the first textbox visible and i want the next textbox to be visible only when the previous textbox is filled with some text. I tried using 'If' condition as well in the textbox on selected change but it doesn't work. Any solutions?
You should use java-script for this because if you will use server side function for this then It will go to server so many times by this your application performance also will decrease.
So create a java-script function that will accept one argument. This argument will take next text box id (text box u want to display).
call this javascript function like this:- onkeyup="calgrid(this,"TextBox2");"
pass nexttextbox id in place of TextBox2...
<script type="text/javascript" language="javascript">
function calgrid(firsttextbox,nexttextbox)
{
var id=firsttextbox.id;
var lastindex= id.lastIndexOf("_");
var strclnt=id.slice(0,lastindex+1);
var txtboxvalue=document.getElementById(firsttextbox).value;
if(txtboxvalue!="")
{
document.getElementById(strclnt+nexttextbox).style.visibility='visible';
}
else
{
document.getElementById(strclnt+nexttextbox).style.display = "none";
}
}
</script>
note:- If you will do visible=false from textbox property then we cannt do visible=true from javascript. So Set style for all textbox style="display:none"
You can resolve your problem by Jquery.
I have make a sample code where i have take four Textbox. Initially only first text box is visible in Web form, when user enter some values in first TextBox next Textbox is automatically display if Previous textbox have a value if not next textbox is not visible.
Sample code is given below :
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
$('input:text:not(:eq(0))').hide()
$('input').on("change paste keyup", function () {
if ($(this).val().length > 0) {
$(this).next().show();
}
else
{
$(this).next().hide();
}
});
I have made sample application for same ,please click on given link for Demo
See Demo application
It's at Client side code so its performance is so fast rather than Server Side.
Please vote me if you feel your problem is resolved by my idea.
I'd name these text boxes similarly like "textbox1", "textbox2", "textbox3" so you can easily find the index of current text box. Then you can use KeyDown event to control what will be shown and what not. This is not a working example but it should give you a good direction.
int currentIndex = 1;
private void TextBox1_KeyDown(object sender, KeyEventArgs e)
{
TextBox t = Controls["TextBox" + (currentIndex + 1).ToString()] as TextBox;
t.Visible = true;
currentIndex +=1;
}
Use can use Keydown event in your first textbox
try this code
initially set flag=1 as first textbox is going to be by default visible
private void visibleTextBox(Control c)
{
int flag = 1;
foreach (Control c1 in c.Controls)
{
if (c1.GetType() == typeof(TextBox))
{
if (flag == 1)
{
((TextBox)c1).Visible = true;
}
else
{
((TextBox)c1).Visible = false;
}
if (((TextBox)c1).Text != "")
{
flag = 1;
}
else
{
flag = 0;
}
}
}
}
Comparatively simple solution in JavaScript. The code should be somehow like this.
Define onchange event on text boxes like this:
<asp:TextBox ID="txt1" runat="server" onchange="show('txt1', 'txt2');"></asp:TextBox>
<asp:TextBox ID="txt2" runat="server" onchange="show('txt2', 'txt3');" Style="visibility: hidden;"></asp:TextBox>
Then use this JavaScript code to show the next TextBox conditionally. Put this code in the head tag of the page:
<script type="text/javascript">
function show(txtCurrent, txtNext) {
var valueCurrent = document.getElementById(txtCurrent).value;
//alert(valueCurrent);
if (valueCurrent.length > 0) {
document.getElementById(txtNext).style.visibility = 'visible';
}
else {
document.getElementById(txtNext).style.visibility = 'hidden';
}
}
</script>
I am trying to slide down content within a div tag (red rectangle) when a user enters atleast one character in a textbox (green rectangle).
If no character is entered then the div content does not show.
Here is a pic of the aspx (design):
And this is the JavaScript I am using to try and achieve this:
function() {
$("#SubmitSection").hide();
inputOne = document.getElementById("<%= TextBox1.ClientID %>");
if (inputOne.value != "") {
$("#SubmitSection").slideDown('slow');
}
else {
$("#SubmitSection").slideUp('slow');
}
}
All the backend code works just fine but both the textbox and the div section show up when deployed.
if i got you right :
$("<%= TextBox1.ClientID %>").change(function(){YoursSlidingFunctionhere();})
.change()
You have to hook up to an event on the textbox. The onchange event only fires after the textbox loses focus, so I suggest the onkeyup event.
<asp:TextBox ID="TextBox1" runat="server" [...] onkeyup="updateSubmitSection()" />
You will have to name your function so that you can call it:
updateSubmitSection = function() {
$("#SubmitSection").hide();
inputOne = document.getElementById("<%= TextBox1.ClientID %>");
// ...
}
In addition to that, you need to call the function during the onload event of the page:
<body onload='updateSubmitSection()'>
The same solution using jQuery:
$(document).ready(function() {
updateSubmitSection();
$('#<%= TextBox1.ClientID %>').change(updateSubmitQuery);
}
You'll need to add this to a section of your javascript that is executed on initialization:
`$("#SubmitSection").hide();`
You could use the body onload attribute:
`<body onload="init()">
<script>
function init()
{
$("#SubmitSection").hide();
}
</script> `
I have a gridview and it has some columns .
For example: Name|Age|Birthday
How can I filter the textbox so if the user is typing a special character it won't be added.
I know I need to use this : ^[^0-9a-zA-Z]*$ , but I don't know how.
Thanks
OnBlur and OnKeyUp Events of TextBox
JavaScript
<script language="javascript" type="text/javascript">
function validation() {
var txt = document.getElementById('<%= txt.ClientID%>').value;
var regex = new RegExp('[^0-9a-zA-Z]+');
while (txt.match(regex)) {
if (txt.match(regex)[0] == "") break;
txt = txt.replace(regex, '');
}
document.getElementById('<%= txt.ClientID%>').value = txt;
}
function onkeyUpEvent() {
validation();
}
function onBlurEvent() {
validation();
}
</script>
MarkUp
<asp:TextBox ID="txt" runat="server" onkeyup="onkeyUpEvent();"
onblur="onBlurEvent();"></asp:TextBox>
var lastValidValue;
input.addEventListener('keydown', function(evt) {
// before change capture current value;
lastValidValue = input.value;
}, false);
function onchange(evt) {
if (/^[^0-9a-zA-Z]*$/.test(input.value))
// if its valid, update preserved field.
lastValidValue = input.value;
else
// otherwise revert to previous data.
input.value = lastValidValue;
}
input.addEventLisenter('keyup', onchange, false);
input.addEventListener('change', onchange, false);
where input is a reference to your textbox.
I have a JavaScript MessageBox that keeps displaying when I click events in a Repeater or refresh the current page.
Here is the function:
public myFunctions()
{
}
/** Display Successs/Error Message **/
public void DisplayUserMessage(string messageType, string messageString, Label ErrorMessageLabel)
{
ErrorMessageLabel.Visible = true;
ErrorMessageLabel.Text = "<b>" + messageType.Substring(0, 1).ToUpper() + messageType.Substring(1).ToLower() + ":</b> " + messageString;
ErrorMessageLabel.CssClass = messageType.ToLower() + "_message";
}
public void HideUserMessage(Label ErrorMessageLabel)
{
ErrorMessageLabel.Visible = false;
ErrorMessageLabel.Text = "";
ErrorMessageLabel.CssClass = "";
}
Here is the jquery to make it fade out:
$(document).ready(function () {
/** Success/Error Messages **/
$('.success_message').animate({ opacity: 1.0 }, 2000).fadeOut('slow');
$('.error_message').animate({ opacity: 1.0 }, 2000).fadeOut('slow');
});
Here it is on the MasterPage:
<!-- Message Box -->
<div id="msgBox" runat="server">
<asp:Label ID="ErrorMessageLabel" CssClass="" runat="server" Visible="false"></asp:Label>
</div>
Here is the script in the code-behind when a success occurs:
Label ErrorMessageLabel = (Label)Master.FindControl("ErrorMessageLabel");
new myFunctions().DisplayUserMessage("success", "Administrator Updated!", ErrorMessageLabel);
Anyone know how I can stop it from continually showing up after I click another button or refresh the page?
Use a hidden input and set the value when success function is called. All the other times reset the value. In your document ready function check the value of the hidden element and then call the animate function.
<input id="txtHidSuccess" type="hidden" runat="server" />
In page load
txtHidSuccess.Value = "0";
In the success/error function
txtHidSuccess.Value = "1";
jQuery
$(function(){
if ($("#txtHidSuccess").val() === "1") {
/** Success/Error Messages **/
$('.success_message').animate({ opacity: 1.0 }, 2000).fadeOut('slow');
$('.error_message').animate({ opacity: 1.0 }, 2000).fadeOut('slow');
}
});
I see where you're calling DisplayUserMessage(), but not HideUserMessage(). My guess is that when you set the ErrorMessageLabel properties, they're stored in the View State persisted across postbacks.
Rather than use an ASP.NET Label control, you could try just wrapping some text with a regular div and use CSS to hide it. When the success event occurs in your app, you can use ClientScriptManager.RegisterStartupScript() to write a script to the client that shows the div. Then, your animate functions can fade out the div if it's visible.
if(IsPostBack)
new myFunctions().HideUserMessage(ErrorMessageLabel);
This worked. Thanks #Harie