I have got a problem with making textbox empty using JavaScript function.
If checkbox is unchecked the asp:Textbox should make disabled and empty.
It happens, but in code behind all the time is visible previous value which was entered before in that textbox.
<asp:RadioButton ID="radio_fx_no" runat="server" Text="NO" GroupName="optradio1" onclick="CheckBoxChangedDisableFx(this);" />
<asp:RadioButton ID="radio_fx" runat="server" Text="YES" GroupName="optradio1" onclick="CheckBoxChangedAbleFx(this);" />
<asp:TextBox ID="txt_fx" ClientIDMode="Static" runat="server" Enabled="false" />
<script>
function CheckBoxChangedAbleFx(checkbox) {
if (checkbox.checked == true) {
document.getElementById('<%= txt_fx.ClientID %>').disabled = false;
}
}
function CheckBoxChangedDisableFx(checkbox) {
if (checkbox.checked == true) {
document.getElementById('<%= txt_fx.ClientID %>').value = "";
document.getElementById('<%= txt_fx.ClientID %>').disabled = true;
}
}
</script>
Any ideas what is wrong in my code?
This problem is called the Cacheing the browser data. You can try three things in this case:
1) Clear value of textbox in pageload event at every postback:
if (IsPostBack)
{
txt_fx.text = "";
}
and in your aspx code make text="":
<asp:TextBox ID="txt_fx" Text="".../>
2) Set AutoComplete property of textbox to off for html input
or disable autocompletetype property of asp textbox
<asp:TextBox ID="txt_fx" autocompletetype="disabled".../>
3) or Set AutoComplete of your FORM tag of your page to "off"
If you want to clear actual value of textbox on server side without postback then you need to use AJAX.
Hope it will help you..!!
in .cs file,Page_Load method,plus such code:
if(!Page.IsPostBack)
{
radio_fx.Attributes.Add("onClick", "return CheckBoxChangedState(this,false);");
radio_fx_no.Attributes.Add("onClick", "return CheckBoxChangedState(this,true);");
}
and in .aspx file,change as follows:
<script type="text/javascript">
function CheckBoxChangedState(checkbox, state) {
if (checkbox.checked == true) {
document.getElementById('<%= txt_fx.ClientID %>').value = "";
document.getElementById('<%= txt_fx.ClientID %>').disabled = state;
}
}
<asp:RadioButton ID="radio_fx_no" runat="server" AutoPostBack="false" Text="NO" GroupName="optradio1" />
<asp:RadioButton ID="radio_fx" runat="server" AutoPostBack="false" Text="YES" GroupName="optradio1" />
Related
I just want to ask why my form validation for my asp textboxes is not working. It should be like when the user does not input a text in the textbox, a description in the paragraph tag will display to please input a text. But it is not working.Please help me on solving this.
Here is the javascript code:
function checkForm() {
var errors = [];
if ($("#itemBrand").value == "") {
errors[0] = "Please input a text!";
}
if ($("#itemModel").value == "") {
errors[1] = "Please input a text!";
}
if (errors.length > 0) {
if (errors[0] != null) {
document.getElementById("itemBrandValidate").innerHTML = errors[0];
}
if (errors[1] != null) {
document.getElementById("itemModelValidate").innerHTML = errors[1];
}
return false;
}
return true;
}
And here is the aspx:
<asp:TextBox ID="itemBrand" runat="server" BackColor="#FFFF66"
BorderColor="Black" BorderWidth="1px" Height="20px" Width="300px">
</asp:TextBox><br />
<p id="itemBrandValidate"></p>
<asp:TextBox ID="itemModel" runat="server" BackColor="#FFFF66"
BorderColor="Black" BorderWidth="1px" Height="20px" Width="300px">
</asp:TextBox><br />
<p id="itemModelValidate"></p>
<asp:Button ID="Button1" runat="server" CssClass="submitButton" Text="Save
Item" OnClick="Button1_Click" OnClientClick="return checkForm()"/>
Add ClientIdMode = "Static" on your textboxes. Otherwise the .NET platform generates an Id which is not the same as the server ID property and your Jquery selector is not working as expected.
For example:
<asp:TextBox ID="itemBrand" ClientIDMode="static" runat="server" BackColor="#FFFF66"
BorderColor="Black" BorderWidth="1px" Height="20px" Width="300px">
</asp:TextBox>
Client side id of asp.net server controls is different from server side id.
You may use ClientIDMode = "Static" (introduced in .NET 4.0) or you might use ClientID as shown below , also I've tried to re-write your validation function a bit.
function checkForm() {
var success = true;
var itemBrandID = "<%= itemBrand.ClientID %>" ;
if ($("#" + itemBrandID).value == "") {
success = false;
document.getElementById("<%= itemBrandValidate.ClientID %>").innerHTML = "Please input a text!";
}
var itemModelID = "<%= itemModel.ClientID %>" ;
if ($("#" + itemModelID).value == "") {
success = false;
document.getElementById("<%= itemModelValidate.ClientID %>").innerHTML = "Please input a text!";
}
return success;
}
Also suggest you to read this excellent post by Rick Strahl on A generic way to find ASP.NET ClientIDs with jQuery
Hope this helps !
I have a hidden field that I assign a disabled check box value to for after post back. Works just fine in Chrome and Firefox. IE, however, does not hold this value after post back. Suggestions?
ASPX.VB
Page_PreRender:
chkbxEmailPhone.Attributes.Add("onChange", "fnDisableChkBox(this);return buttonClick(this);")
If hidChkBxValue.Value = String.Empty Then
hidChkBxValue.Value = "false"
End If
chkbxEmailPhone.Checked = CBool(hidChkBxValue.Value)
ASPX
<asp:CheckBox ID="chkbxEmailPhone" runat="server" Text="Include Telephone & E-Mail" AutoPostBack="true" CssClass="bold tdfont10" Value=""></asp:CheckBox>
<asp:HiddenField ID="hidChkBxValue" runat="server" Value="" />
function fnDisableChkBox(){
if(document.getElementById("chkbxEmailPhone").checked == true){
document.getElementById("hidChkBxValue").value = "true";
}
else{
document.getElementById("hidChkBxValue").value = "false";
}
document.getElementById("chkbxEmailPhone").disabled = true;
}
</script>
I want to highlight text in control when validation occurs.
How can I achieve this?
<script language="javascript" type="text/javascript">
function changeColor(source, args) {
var txt = document.getElementById('<%= txtAge.ClientID %>');
if (args.Value.length >= 3) {
txt.style.background = '#66CCFF';
args.IsValid = false;
}
else {
txt.style.background = 'none';
args.IsValid = true;
}
}
</script>
<asp:TextBox ID="txtAge" runat="server" ></asp:TextBox>
<asp:RequiredFieldValidator ID="rfldtxtAge" ErrorMessage="enter the value" ControlToValidate="txtAge" runat="server" Display="Dynamic" SetFocusOnError="true" ForeColor="Red"></asp:RequiredFieldValidator>
<asp:CustomValidator ID="ctmtxtAge" runat="server" ClientValidationFunction="changeColor" ControlToValidate="txtAge" ErrorMessage="CustomValidator1" ></asp:CustomValidator>
I use this code for highlighting background of control, but I need to highlight the text of control.
Please help me.
Please use
txt.select();
instead of
txt.style.background = '#66CCFF';
please let me know if this does not work.
txt.style.color= '#66CCFF' instead of txt.style.background = '#66CCFF';
use this thing to change the color of the text
I am having some serious issues with this. I have a two fields like this, both of them being assigned datepickers with jquery.
<asp:TextBox ID="RTRP" runat="server" CssClass="textEntry" Width="120"></asp:TextBox>
<asp:CustomValidator runat="server" ID="CustomValidator3"
ControlToValidate="RTRP"
Text="No date selected"
ValidateEmptyText="True"
ClientValidationFunction="clientValidate"
Display="Static">
</asp:CustomValidator>
<asp:TextBox ID="ContEd" runat="server" CssClass="textEntry" Width="120"></asp:TextBox>
<asp:CustomValidator runat="server" ID="CustomValidator1"
ControlToValidate="ContEd"
Text="No date selected"
ValidateEmptyText="True"
ClientValidationFunction="clientValidate"
Display="Static">
</asp:CustomValidator>
With the following javascript to validate it.
$("#<%=RTRP.ClientID %>").datepicker();
$("#<%=ContEd.ClientID %>").datepicker();
function clientValidate(sender, args) {
args.IsValid = args.Value.length > 0;
}
Both get their datepickers, but the validation function simply refuses to be fired and always allows the form to submit. I am completely lost here, what am I doing wrong?
You are checking if a string's length is less than 0 (what is never true) here:
function clientValidate(sender, args) {
if (args.Value.length < 0) {
args.IsValid = false;
} else {
args.IsValid = true;
}
}
I'm not sure if this is what you want(you could simpy use a RequiredFieldValidator), but...
function clientValidate(sender, args) {
args.IsValid = args.Value.length > 0;
}
If you assign $.datepicker() behaviour to any text, and run page.. you will find that textbox on which you override jQuery datepicker had css set display : none.. so that might be the reason that custom validation not getting for that textbox...
why dont you use
<asp:RequiredFieldValidator id="id" controltovalidate="controlname" erormessage="please enter the dates">
</asp:RequiredFieldValidator>
correct me i am wrong
Change you method to this.and try again
function clientValidate(sender, args)
{
if(Page_ClientValidate())
{
if (args.Value.length < 0)
{
args.IsValid = false;
} else
{
args.IsValid = true;
}
}
}
I have asp.net form having 4 check boxes. not check box list. these 4 check boxes having the ValidationGroup property with same name say "chkValied". I have added Custom Validator there. now want to check at least on check box should be check out of these. what to do ?
You can use CustomValidator to validate input at client-side or server-side code.
aspx markup
<asp:CheckBox ID="CheckBox1" runat="server" />
<asp:CheckBox ID="CheckBox2" runat="server" />
<asp:CheckBox ID="CheckBox3" runat="server" />
<asp:CheckBox ID="CheckBox4" runat="server" />
<asp:CustomValidator
ID="CustomValidator1"
runat="server"
ErrorMessage="put here error description"
ClientValidationFunction="clientfunc"
OnServerValidate="CheckValidate">
</asp:CustomValidator>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
.cs (code-behind)
protected void CheckValidate(object source, ServerValidateEventArgs args)
{
args.IsValid=false;
if (CheckBox1.Checked)
args.IsValid = true;
if (CheckBox2.Checked)
args.IsValid = true;
if (CheckBox3.Checked)
args.IsValid = true;
if (CheckBox4.Checked)
args.IsValid = true;
}
protected void Button1_Click(object sender, EventArgs e)
{
if (IsValid)
{
//valid
}
else
{
//Invalid
}
}
JavaScript code
<script type="text/javascript">
function clientfunc(sender, args) {
args.IsValid = false;
if (document.getElementById("CheckBox1").checked)
args.IsValid = true;
if (document.getElementById("CheckBox2").checked)
args.IsValid = true;
if (document.getElementById("CheckBox3").checked)
args.IsValid = true;
if (document.getElementById("CheckBox4").checked)
args.IsValid = true;
}
</script>
Try this article
http://weblogs.asp.net/samirgeorge/archive/2009/05/02/checkboxlist-client-side-validation-using-jquery.aspx
https://web.archive.org/web/20211020153246/https://www.4guysfromrolla.com/webtech/tips/t040302-1.shtml
If you are using custom validator such thing could be achieved with an or-statement:
if (chkBox1.Checked || chkBox2.Checked || chkBox3.Checked)
{
// At least 1 checkbox was checked.
}
This applies to all languages (although || is not universal all languages has a representation of it). In JavaScript you'd want .Value instead of .Checked.