CODEWITHSUNDEEP
jqueryasp.netbuttonclick
BumbleBee
BumbleBee

Reputation: 10789

.click() not working. Jquery

In my login.aspx I am trying to perform simple client side validation (check Username and password fields are empty or not) on the click of the button. But the .click() in the jquery is not firing. Where am i going wrong.

Note : I have an event LoginButton_Click on the code behind which has some functionality.

<script src="Scripts/Login.js" type="text/javascript"></script>

 <td align="right" colspan="2">
     <asp:Button ID="LoginButton" runat="server"  Text="Log In" 
       onclick="LoginButton_Click" class ="validateForm" />
</td>

My login.js file :

$(function () {

  $('#LoginButton').click(function () {

            var username = $('#txtUserName');
            var pwd = $('#txtPassword');
            if (username.val().length <= 0) {
                alert("User Name is required.");
                return false;
            }
            if (pwd.val().length <= 0) {
                alert("Password is required.");
                return false;
            }

        });
});

Thanks in advance

BB

Upvotes: 1

Views: 1807

Answers (5)

Michael D. Irizarry
Michael D. Irizarry

Reputation: 6302

This should not give you any problems, using jquery selectors we select it by its id attribute which ends with LoginButton.

$(function () {
  $("input[id$=LoginButton]").click(function () {

            var username = $("input[id$=txtUserName]");
            var pwd = $("input[id$=txtPassword]");
            if (username.val().length <= 0) {
                alert("User Name is required.");
                return false;
            }
            if (pwd.val().length <= 0) {
                alert("Password is required.");
                return false;
            }

        });
});

Upvotes: 2

Chamika Sandamal
Chamika Sandamal

Reputation: 24312

$("#<%= LoginButton.ClientID %>") does not work on external JavaScript files. If you want to use an external file, create a global variable in the aspx file and access it in the JavaScript file.

Edit:

create global variable in aspx file.

var loginButtonId = <%= LoginButton.ClientID %>;

use it in the JavaScript File

$("#" + loginButtonId ).click(function () {...});

note: variable should declare before adding the reference to JavaScript file.

Upvotes: 4

Joel Etherton
Joel Etherton

Reputation: 37533

#LoginButton doesn't exist. When the asp button gets rendered it will get rendered into a specialized ID related to the ASP controls that contain it like ctrl00_mycontrol_panelid_LoginButton. What you need to do in order to bring this into an external file is use a global variable:

var loginButtonID;
var txtUserNameID;
var txtPasswordID;

$(function () {

  $(loginButtonID).click(function () {

            var username = $(txtUserNameID);
            var pwd = $(txtPasswordID);
            if (username.val().length <= 0) {
                alert("User Name is required.");
                return false;
            }
            if (pwd.val().length <= 0) {
                alert("Password is required.");
                return false;
            }

        });
});

Then in the file that includes this login.js file, you need to set these variables by calling:

<script type="text/javascript">

loginButtonID = '<%=LoginButton.ClientID%>';
txtUserNameID = '<%=txtUserName.ClientID%>';
txtPasswordID = '<%=txtPassword.ClientID%>';

</script>

Be sure not to redeclare these with new "var" modifiers. That may ruin the scope and screw up your script.

Upvotes: 1

mikey
mikey

Reputation: 5160

I think you want onclientclick.

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.button.onclientclick.aspx

Just in case someone out there cares...

<script src="Scripts/Login.js" type="text/javascript"></script>

 <td align="right" colspan="2">
     <asp:Button ID="LoginButton" runat="server"  Text="Log In" 
       onclick="LoginButton_Click" onclientclick="validateLogin()" class ="validateForm" />
</td>

login.js file :

function validateLogin() {

            var username = $('#txtUserName');
            var pwd = $('#txtPassword');
            if (username.val().length <= 0) {
                alert("User Name is required.");
                return false;
            }
            if (pwd.val().length <= 0) {
                alert("Password is required.");
                return false;
            }

            return true;
}

Upvotes: 1

Amr Elgarhy
Amr Elgarhy

Reputation: 68912

because in your .js file, javascript couldn't read the value of this: $("#<%= LoginButton.ClientID %>")
You need to: - Put this code at the end of your html page.
OR
- Put a fixed selector in the js file

Upvotes: 1

Related Questions