'a' link without href in bootstrap - javascript

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>

Related

How to Auto Login into third party site by passing the username and password from hidden fields

Following code is working when I am passing a correct session ID to the viewstate. but not working without session ID. Is it possible what I am trying.
What I have tried is:---
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body >
<form id="login" name="login" method="post" action="http://thirdPartySite/jsf/security/login.jsp" >
<input type="hidden" name="login" value="login">
<div >
<input id="userName" type="hidden" name="userName" autocomplete="off" value="yyyyy">
</div>
<div >
<input id="password" type="hidden" name="password" autocomplete="off" value="xxxx" >
</div>
<div >
<input type="submit" name="j_id_jsp_623365074_6" value="Login" ><br>
</div>
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="712612493959427831:-20824210214191552" autocomplete="off">
</form>
</div>
</div>
</div>
</body></html>

jquery click() and on() not working

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>

Parsley JS not validating

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

Submit Button validation not happening in JS. Undefined formGroupExampleInput

I am trying to display two alerts in a simple form. One, if any field is empty other on successful submission. This is a simple form for learning purpose.
It is now showing error that 'Undefined formGroupExampleInput'
Please Help so that the validation can be done.
Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/mycss.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<h1>Welcome to MAC Library!!</h1>
<h2>Registration Page</h2>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">GROUP 4</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>My Account</li>
<li>Register</li>
</ul>
</div>
</nav>
</br>
</br>
<h3 class="myh3">Sign up as new user to receive email updates about upcoming events in the city</h3>
<script type="text/javascript">
function submitForm()
{
if(document.form1.formGroupExampleInput.value==""||
document.form1.formGroupExampleInput2.value==""||
document.form1.exampleInputEmail1.value==""||
document.form1.exampleInputPassword1.value==""){
alert("Enter all fields");
}
else{
document.forms["form1"].submit();
alert("Your Form Successfully Submitted");
}
}
</script>
<div>
<form id="form1">
document.form1.formGroupExampleInput.value
<fieldset class="form-group">
<div class="required">
<label for="formGroupExampleInput">First Name</label>
<input type="text" required="required" class="form-control" id="formGroupExampleInput" placeholder="Enter your first name">
</div>
</fieldset>
<fieldset class="form-group">
<div class="required">
<label for="formGroupExampleInput2">Last Name</label>
<input type="text" required="required" class="form-control" id="formGroupExampleInput2" placeholder="Enter your last name">
</div>
</fieldset>
<fieldset class="form-group">
<div class="required">
<label for="exampleInputEmail1">Email address</label>
<input type="email" required="required" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<small class="text-muted">We'll never share your email with anyone else.</small>
</div>
</fieldset>
<fieldset class="form-group">
<div class="required">
<label for="exampleInputPassword1">Password</label>
<input type="password" required="required" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</fieldset>
<fieldset class="form-group">
<label>Gender</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Female
</label>
</div>
</fieldset>
<button type="button" class="btn btn-primary" onclick="submitForm();">Submit</button>
</form>`enter code here`
</div>
</body>
</html>

Button doesn't seem to take the jquery ui button effect

I am try to apply the jquery ui effect on a button, this is my head
<head>
<title>Bootstrap V3 template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/travelbuddy.css" rel="stylesheet" media="screen">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-selectify.js"></script>
<link rel="stylesheet" href="css/selectify.css" />
<script src="js/myfunctions.js"></script>
</head>
Everything seems to be loaded since there is no error in the Chrome console and I can see the files in the resources of the inspector.
Here is the part where I have my button:
<div class="container" >
<div class="row-fluid" >
<div class="span6" id="MyProfile">
<h1>Your profile</h1>
<form action="" method="post" id="registerform">
<p>
<label for="firstname">Firstname</label>
<input class="inputfields" type="text" name="firstname" id="firstname" />
</p>
<p>
<label for="lastname">Lastname</label>
<input class="inputfields" type="text" name="lastname" id="lastname" />
</p>
<p>
<label for="email">Email</label>
<input class="inputfields" type="email" name="email" id="email" />
</p>
<p>
<label for="phonenumber">Telephone number</label>
<input class="inputfields" type="tel" name="phonenumber" id="phonenumber" />
</p>
<p>
<label for="birthday">Birthday</label>
<input class="inputfields" type="datetime" name="birthday" id="birthday" />
</p>
<p>
<label for="selectgenre">Genre</label>
<select id="selectgenre">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</p>
<p>
<label for="cities">Where do you live?</label>
<input class="inputfields" type="text" name="cities" id="cities" />
</p>
<input id="saveprofile" type="submit" value="A submit button">
</form>
</div>
<div class="span2 offset1" id="MyPhoto">
</div>
</div>
</div>
And in my function I simple have:
$( "#saveprofile" ).button();
I also tried:
jQuery( document ).ready(function( $ ) {
$( "#saveprofile" ).button();
});
but didnt work. Any idea what I am missing?

Categories