in the below code click() is not working
what is the problem i have tried $("login").on("click",function(){}); function also not still not working
<html>
<head>
<!--- Links --->
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<!--html-->
<title>Test Page</title>
<script>
$("#login").click(function() {
alert("hai");
});
</script>
</head>
<body onload="$('#reg').toggle();">
<div id="user-area">
<div class="btn-area">
<button id="btnlgn" class="btn btn-outline-primary" onclick="toggleReg()">Login /Register</button>
</div>
<div id="forms">
<div class="form" id="reg">
<form class="form-sigin" id="register">
<input type="text" class="form-control" placeholder="Email" id="email">
<input type="name" class="form-control" placeholder="Full Name" id="name">
<input type="password" class="form-control" placeholder="password" id="password">
<input type="password" class="form-control" placeholder="Re-enter password" id="conPassword">
<input type="tel" class="form-control" placeholder="Mobile Number" id="number">
</form>
<button class="btn" id="register">Register</button>
</div>
<div class="form" id="lgn">
<form class="form-sigin" id="sigin">
<input type="text" class="form-control" placeholder="Email" id="emaillgn">
<input type="password" class="form-control" placeholder="password" id="passwordlgn">
</form>
<button class="btn" id="login">Login</button>
</div>
</div>
</div>
</body>
</html>
i am trying to display an alert when the button is pressed
<script>
$("#login").on("click", function() {
alert("hai");
});
</script>
this is also not working
You're executing your jQuery before the elements exist on the page. Either move your code to the end of the page before the closing </body> tag, or wrap it in a document ready call:
$( document ).ready(function() {
$("#login").click(function() {
alert("hai");
});
});
You should write javascript codes end of the body tags. If you use between head tags, use below.
<script>
$(function() {
$("#login").click(function() {
alert("hai");
});
});
</script>
Related
I'm using bootstrap for a login page, I've seen people use the tag without the 'href' in bootstrap but it's not working for me, any ideas?
I'm just trying a simple alert atm before finishing, I will have the link switch between login and sign-up pages when I can get this working. At the moment it just appears as plain text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Secret Diary</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="login">
<div class="container">
<div class="center">
<div class="col-md-12 mx-auto">
<h1>Secret Diary</h1>
<h2>Store you thoughts</h2>
<div class="error"><?php echo $error; ?></div>
<form method="post" id="signupForm">
<input type="email" class="form-control" name="email" id="email" placeholder="email">
<input type="password" class="form-control" name="password" id="password" placeholder="password">
<div class="checkbox">
<label>
<input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
</label>
</div>
<input type="hidden" name="signUp" value="1">
<input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Sign Up!">
<p><a id="showLogInForm">Log In</a></p>
</form>
<form method="post" id="loginForm">
<input type="email" class="form-control" name="email" id="email" placeholder="email">
<input type="password" class="form-control" name="password" id="password" placeholder="password">
<div class="checkbox">
<label>
<input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
</label>
</div>
<input type="hidden" name="signUp" value="0">
<input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Log in!">
</form>
</div>
</div>
</div>
</section>
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript">
$("#showLogInForm").click(function(){
alert("hi!");
});
</script>
</body>
</html>
Try this:
Log In
You have to use <button> with some classes
<button class="btn btn-link p-0">Button</button>
You probably need need a href attribute, most browsers' default styling is setup to display a tags without href as plain text.
<a>some link</a>
<br />
some other link
you can just use the a tag without href like this:
<a id="showLogInForm">Log In</a>
please refer to the code below for details:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Secret Diary</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="login">
<div class="container">
<div class="center">
<div class="col-md-12 mx-auto">
<h1>Secret Diary</h1>
<h2>Store you thoughts</h2>
<div class="error"><?php echo $error; ?></div>
<form method="post" id="signupForm">
<input type="email" class="form-control" name="email" id="email" placeholder="email">
<input type="password" class="form-control" name="password" id="password" placeholder="password">
<div class="checkbox">
<label>
<input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
</label>
</div>
<input type="hidden" name="signUp" value="1">
<input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Sign Up!">
<p><a id="showLogInForm">Log In</a></p>
</form>
<form method="post" id="loginForm">
<input type="email" class="form-control" name="email" id="email" placeholder="email">
<input type="password" class="form-control" name="password" id="password" placeholder="password">
<div class="checkbox">
<label>
<input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
</label>
</div>
<input type="hidden" name="signUp" value="0">
<input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Log in!">
</form>
</div>
</div>
</div>
</section>
<script>
$( document ).ready(function() {
$("#showLogInForm").click(function(){ alert("hi!"); });
});
</script>
</body>
</html>
I am trying to validate my form using parsley.js, I am working as the official good book says to do so but due to some reasons (that I obviously don't know right now), it is not working.
Here is the code
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Parsley JS Form Validation</h2>
<form data-validate="parsley">
<label>Name </label>
<input type="text" name="fname" class="form-control" required />
<label>Email </label>
<input type="text" name="email" class="form-control" data-type="email" data-trigger="change" required />
<label>Password </label>
<input type="text" name="lname" class="form-control" data-type="password" required />
<br />
<input type="submit" class="btn btn-success" value="Submit">
</form>
</div>
</div>
</div>
Here is the Plunkr link.
I dont know how to save it so I'm posting it here:
I changed the jquery version, the parsley version (you used an old one), and also added the css from parsley site. Your tag attributes were wrong. this works:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Parsley JS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://parsleyjs.org/src/parsley.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.3.4/parsley.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Parsley JS Form Validation</h2>
<form data-parsley-validate="parsley">
<label>Name </label>
<input type="text" name="fname" class="form-control" required="true" />
<label>Email </label>
<input name="email" class="form-control" type="email" data-parsley-trigger="change" required="true" />
<label>Password </label>
<input name="lname" class="form-control" type="password" required="true" />
<br />
<input type="submit" class="btn btn-success" value="Submit">
</form>
</div>
</div>
</div>
</body>
</html>
The problem was is was using data-required instead I have to use data-parsley-required and also instead of data-validate="parsley" it should be data-parsley-validate="parsley"
Plunkr modified
My code to call a jquery function when a form is submitted is never being called. I've checked the format of the code over and over again, and everything seems in order.
Any clue how to fix this?
Thanks
HTML:
<form class="form" role="form" id="experimentform">
<label for="name">Study Name</label>
<input class="form-control" type="text" name="name" placeholder="Experiment Name" id="name">
<label for="description">Study Description</label>
<textarea class="form-control" name="description" rows="4" cols="20" id="description" placeholder="description"></textarea>
<label for="numparticipants">Number of Participants</label>
<input class="form-control" type="number" name="numparticipants" id="numparticipants">
<input class="btn btn-success" type="submit" name="submit" value="Create">
</form>
jQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
$(document).ready(function() {
$("#experimentform").submit(function(event) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
});
</script>
You absolutely cannot put code between <script></script> tags while also including an external file within the same <script> tag.
Should be...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#experimentform").submit(function(event) {
event.preventDefault();
alert( "Handler for .submit() called." );
});
});
</script>
Note: Typically, the .preventDefault() is the very first item within the function. See: event.preventdefault documentation
$(document).ready(function() {
$("#experimentform").submit(function(event) {
event.preventDefault();
alert("Handler for .submit() called.");
});
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="form" role="form" id="experimentform">
<label for="name">Study Name</label>
<input class="form-control" type="text" name="name" placeholder="Experiment Name" id="name">
<label for="description">Study Description</label>
<textarea class="form-control" name="description" rows="4" cols="20" id="description" placeholder="description"></textarea>
<label for="numparticipants">Number of Participants</label>
<input class="form-control" type="number" name="numparticipants" id="numparticipants">
<input class="btn btn-success" type="submit" name="submit" value="Create">
</form>
I have this code below which validates a form. However, there is a bug in this code. When I enter something in username and leave the password blank, the form accepts it. It shouldn't be accepting it. Any idea why?
<html>
<head> <link type = "text/css" type="text/javascript" rel="stylesheet" href="css/bootstrap.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script src="js/bootstrap.js"> </script>
<script>
$(document).ready(function() {
$('form').validate({
submitHandler: function(form) { // for demo
alert('valid form');
return false;
}
});
});</script>
</head>
<body>
<form class="well span6">
<label>Username</label>
<input type="text" id="myName" class="span3 required" placeholder="Type your username here..." /> <br/>
<label>Password</label>
<input type="text" id="myPassword" class="span3 required" placeholder="Type your password here..." /> <br/>
<input type="submit" class ="btn btn-primary">
<!-- <button class=""> Clear <br/></button><br/> -->
</form>
</body>
</html>
I'm pretty sure this validation plugin like a 'name' attribute on the field.
I've added name="myName and name="myPassword on each input and it seems to work in this jsfiddle
<form class="well span6">
<label>Username</label>
<input name="myName" type="text" id="myName" class="span3 required" placeholder="Type your username here..." /><br/>
<label>Password</label>
<input name="myPassword" type="text" id="myPassword" class="span3 required" placeholder="Type your password here..." /><br/>
<input type="submit" class="btn btn-primary">
</form>
Try to by adding the "name" attribute, to the password and username fields.
I'm trying to write a sign up form using CodeIgniter and want to use the jquery datepicker for DOB, but the following isn't working. This is the entire page:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="http://localhost/cc/css/style.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="http://localhost/cc/jquery/css/dot-luv/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://localhost/cc/jquery/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<title>CC - Card Central</title>
</head>
<body>
<script>
$(function() {
$( ".datepicker" ).datepicker();
});
</script>
<fieldset>
<legend>Create a new account!</legend>
<fieldset>
<legend>Personal Information</legend>
<form action="http://localhost/cc/index.php/account/create_account" method="post" accept-charset="utf-8">
<input type="text" name="firstname" value="" placeholder="First Name" />
<input type="text" name="middlename" value="" placeholder="Middle Name" />
<input type="text" name="lastname" value="" placeholder="Last Name" />
<input type="text" name="dob" value="" placeholder="Date of Birth" class="datepicker" />
</fieldset>
<fieldset>
<legend>Account Information</legend>
<input type="text" name="username" value="" placeholder="Username" />
<input type="text" name="password" value="" placeholder="Password" />
<input type="text" name="passwordconfirm" value="" placeholder="Password Confirm" />
<input type="submit" name="submit" value="Done!" />
</fieldset>
</fieldset>
</body>
</html>
You've forgotten to include the jQuery library :-)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Put that before the script tag that references jQuery UI and you should be good to go