CODEWITHSUNDEEP
c#javascriptasp.net
user1717270
user1717270

Reputation: 785

Change button attributes after JavaScript validation

I have a search screen where I have a button, which applies search filters when clicked.

When a user clicks the button, its text(caption) is changed from Submit to Retrieving Data, and colour is changed to green from black. This was handled in code-behind by adding button attribute as shown below.

btnSubmit.Attributes.Add("onClick", "this.value='Retrieving
Data...';this.style.color='green';");

On click of this button there were few validations in code behind and error message was displayed in a label.

Now I have moved those validations into javascript(calling a javascript function on click of button) and returning true or false depending upon whether all validations are passed or not.

Below is html code:

asp:Button ID="btnSubmit" TabIndex="110" runat="server" Width="160px"
Font-Names="Tahoma" EnableViewState="False" Text="Submit" 
Font-Bold="True" OnClick="btnSubmit_Click" 
OnClientClick="return Validation();"

Below is my javascript function

function Validations()
{
    if($('#<%=txtEmpName.ClientID%>').val() == "" && $('#<%=txtEmpDescription.ClientID%>').val() == "" ) 
    {
        if($('#<%=ddlDept.ClientID%>').val() == "0" || $('#<%=ddlManager.ClientID%>').val() == "0" ) 
        {
            alert('Please select something');
            return false;
        } 
    }
    return (true);
}

after adding these validations, buttons text and text colour is not getting changed. When I checked rendered HTML code, the Validation() function is called first and then attributes are added. I think after returning true or false attributes are not called or applied.

Is there any workaround?

Upvotes: 0

Views: 630

Answers (1)

nick_w
nick_w

Reputation: 14938

Change your Validations method to this:

function Validations()   
{   
    if($('#<%=txtEmpName.ClientID%>').val() == "" && $('#<%=txtEmpDescription.ClientID%>').val() == "" )    
    {   
        if($('#<%=ddlDept.ClientID%>').val() == "0" || $('#<%=ddlManager.ClientID%>').val() == "0" )    
        {   
            alert('Please select something');   
            return false;   
        }    
    }

    //Change text and color.
    $('#<%= btnSubmit.ClientID %>').val('Retrieving data...').css('color', 'green');

    return (true);   
}

Also, you won't need this bit anymore:

btnSubmit.Attributes.Add("onClick", "this.value='Retrieving Data...';this.style.color='green';");

Upvotes: 1

Related Questions