JQuery on click has no action
Question
I'm trying to make a simple controll with jquery that should show an alert onclick if username and password are not empty.
Actually i've tryed the following code for jquery but it has no effect, no any response in console, nothing.
<label for="username" class="sr-only">Username</label> <input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" /> <label for="inputPassword" class="sr-only">Password</label> <input type="password" id="password" runat="server" class="form-control" placeholder="Password..." /> <input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $('#loginbtn').click(function() { if (!$('#username').val() && !$('#password').val()) { alert("VAI!"); } }); </script>
EDIT: here is full code of the page, in codebehind there is nothing, seems that the javascript just dies when executing the function click.
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="auth.aspx.vb" Inherits="servizigab.auth" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="icon" type="image/png" href="assets/img/favicon.ico" />
<title>Gab Servizi: Login</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link href="/assets/css/bootstrap.min.css" type="text/css" runat="server" rel="stylesheet" />
<link href="/assets/css/modalstyle.css" type="text/css" runat="server" rel="stylesheet" />
<link href="/assets/css/login.css" type="text/css" runat="server" rel="stylesheet" />
</head>
<body class="text-center fade-in">
<form class="form-signin" runat="server">
<img class="mb-2" draggable="false" src="assets/img/gabservizi.png" alt="" width="160" height="160" />
<h1 class="h3 mb-3 font-weight-normal" translate="yes">Accedi a Gab Servizi!</h1>
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" />
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="password" runat="server" class="form-control" placeholder="Password..." />
<input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login"/>
<p class="text-muted mt-2 mb-3">Non hai un profilo? <a href="#" class="text-primary">Richiedilo!</a></p>
<div class="myAlert-bottom alert alert-danger">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Password o nome utente errati!</strong> Riprovare!
</div>
<iframe id="log" class="d-none"/>
</form>
<!-- librerie js -->
<script src="/assets/js/core/jquery.3.2.1.min.js"></script>
<script src="/assets/js/core/popper.min.js"></script>
<script src="/assets/js/core/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#loginbtn').click(function() {
if ($('#username').val() && $('#password').val()) {
alert("VAI!");
}
});
</script>
</body>
</html>
4 answers
solution1
3 ACCPTED 2019-01-30 14:39:11
Problem 1 Your logic is backwards
! means not.
So you are testing if they are both empty (ie There is not a value for username and there is not a value for password) and not that they both have values.
Remove the ! s.
<label for="username" class="sr-only">Username</label> <input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" /> <label for="inputPassword" class="sr-only">Password</label> <input type="password" id="password" runat="server" class="form-control" placeholder="Password..." /> <input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $('#loginbtn').click(function() { if ($('#username').val() && $('#password').val()) { alert("VAI!"); } }); </script>
Problem 2: Your HTML is invalid
Use a validator . It will tell you that your <iframe> is missing its end tag. This puts all the content that follows it (including the script) inside the iframe so the script is treated as alternative content for browsers that don't support iframes and is not executed.
solution2
0 2019-01-30 14:38:17
Use strings length property:
<label for="username" class="sr-only">Username</label> <input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" /> <label for="inputPassword" class="sr-only">Password</label> <input type="password" id="password" runat="server" class="form-control" placeholder="Password..." /> <input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $('#loginbtn').click(function() { //check if both the username and password values have // lengths grater then zero if ($('#username').val().length > 0 && $('#password').val().length > 0) { alert("VAI!"); } }); </script>
Or just delete the ! (not) sign from your own code.
solution3
0 2019-01-30 14:46:29
It is a good idea to bind your events in $(document).ready if you have lots of other javascript code on page. your code works perfectly if there is no other javascript code.
Just bind click event in $(document).ready as shown below
$(document).ready(function() { $('#loginbtn').click(function() { if ($('#username').val() && $('#password').val()) { alert("VAI!"); } }); })
<label for="username" class="sr-only">Username</label> <input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" /> <label for="inputPassword" class="sr-only">Password</label> <input type="password" id="password" runat="server" class="form-control" placeholder="Password..." /> <input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
it will work.
solution4
-1 2019-01-30 14:36:40
if ($('#username').val() && $('#password').val()) {
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.