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?
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>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I am creating a Login Page and Registration page.
I Used a "Forgot Password" link.
If the user clicks "Forgot password", a new popup should open.
I am using Bootstrap .When I click "Forgot Password" it doesn't open the pop up. i also tried a different method, it's not working.
<head>
<meta charset="utf-8">
<title>Daily UI - Day 1 Sign In</title>
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700|Lato:400,100,300,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/animate.css">
<!-- Custom Stylesheet -->
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/animate-custom.css" />
<link rel="stylesheet" type="text/css" href="css/Modal.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body style="overflow:hidden;">
<div class="container">
<header>
</header>
<section>
<div id="container_demo">
<a class="hiddenanchor" id="toregister"></a>
<a class="hiddenanchor" id="tologin"></a>
<div id="wrapper">
<div id="login" class="animate form">
<h1>Log in</h1>
<p>
<label for="username" class="uname" data-icon="u" > Your email or username </label>
<input id="username" name="username" required="required" type="text" placeholder="myusername or mymail#mail.com"/>
</p>
<p>
<label for="password" class="youpasswd" data-icon="p"> Your password </label>
<input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" />
</p>
<p class="keeplogin">
<input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
<label for="loginkeeping">Keep me logged in</label>
</p>
<p class="login button">
<input type="submit" id="myBtn" value="Login In" />
<!-- The Modal -->
</p>
<p class="change_link">
Forgot my password
Join us
</p>
</div>
<div id="myModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<p>modal popup</p>
</div>
</div>
</div>
<div id="register" class="animate form">
<h1> Sign up </h1>
<p>
<label for="usernamesignup" class="uname" data-icon="u">Your username</label>
<input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" />
</p>
<p>
<label for="emailsignup" class="youmail" data-icon="e" > Your email</label>
<input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mysupermail#mail.com"/>
</p>
<p>
<label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>
<input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/>
</p>
<p>
<label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>
<input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/>
</p>
<p class="signin button">
<input type="submit" value="Sign up"/>
</p>
<p class="change_link">
Go and log in
</p>
</div>
</div>
</div>
</body>
When I click Forgot password, nothing shows up. Please help me ?
Where am I making a mistake?
How do I fix this issue?
You need to put the jQuery script above the Bootstrap one
Add jQuery library before bootstrap
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
Note:-
Yout HTML code seems very messy (multiple unclosed element along with misplaced element too,please correct them)
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
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="gm.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile.structure-1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script src="assets/custom.js"></script>
<script type="text/javascript" src="assets/ejs_production.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" id="pageregister">
<div data-role="header">
<h1>Sign Up</h1>
</div>
<!-- /header -->
<div data-role="content">
<form action="someurl.html" method="post" id="registerform">
<fieldset>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" />
</div>
<div data-role="fieldcontain">
<label for="email2">Re-type email:</label>
<input type="text" name="email2" id="email2" value=""
/>
</div>
<div data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" name="password" id="password"
value="" />
</div>
<div data-role="fieldcontain">
<label for="password2">Re-type password:</label>
<input type="password" name="password2" id="password2"
value="" />
</div>
<button type="submit"
data-theme="b" name="submit" value="submit-value">Sign Up</button>
</fieldset>
</form>
<script>
$('#pageregister').live('pageshow', function (event) {
var url = baseURL + "users/add.json";
$("registerform").attr("action", url); //THIS HAS NO EFFECT?????
alert(url); //I SEE THIS
});
</script>
</div>
<!-- /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
Search
</li>
<li>
Info
</li>
</ul>
</div>
<!-- /navbar -->
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
Your selector is wrong, you are missing # in id selector.
Change this
$("registerform").attr("action", url);
to
$("#registerform").attr("action", url);
As a side note, always wrap your code inside DOM ready event which will ensure that DOM is available before trying to find the elements.
$(function(){
//Your code goes here
$('#pageregister').live('pageshow', function (event) {
var url = baseURL + "users/add.json";
$("#registerform").attr("action", url);
});
});
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