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)
Related
I try to create bootstrap form which will after wrong submission change the color of the borders to the red. The Problem is that textbox it will always stay in red. Any ideas how can I set the textbox borders red after wrong input. Is there any class in bootstrap that will automatically output that borders in red color after wrong input?
if ($('#TextBoxID').val() == '') {
$('#TextBoxID').css('border-color', 'red');
} else {
$('#TextBoxID').css('border-color', '');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<div class="sign-up container">
<h2>Sign Up</h2>
<p>Please fill this form to create an account.</p>
<form action="" method="post">
<div class="form-group">
<label>Username</label>
<input id="TextBoxID" type="text" name="username" class="form-control" value="">
<span class=" text-danger"></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" value="">
<span class="text-danger"></span>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" value="">
<span class=" text-danger"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit">
<input type="reset" class="btn btn-default" value="Reset">
</div>
<p>Already have an account? Login here.</p>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
The Problem is that textbox it will always stay in red.
It is because of this line if ($('#TextBoxID').val() == ''). You need to check this on form submit
function formSubmit(e) {
e.preventDefault();
if ($('#TextBoxID').val() == '') {
$('#TextBoxID').css('border-color', 'red');
} else {
$('#TextBoxID').css('border-color', '');
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<div class="sign-up container">
<h2>Sign Up</h2>
<p>Please fill this form to create an account.</p>
<form action="" method="post">
<div class="form-group">
<label>Username</label>
<input id="TextBoxID" type="text" name="username" class="form-control" value="">
<span class=" text-danger"></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" value="">
<span class="text-danger"></span>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" value="">
<span class=" text-danger"></span>
</div>
<div class="form-group">
<button onclick="formSubmit(event)" type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default" value="Reset"></button>
</div>
<p>Already have an account? Login here.</p>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
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>
How to write code for modal? I tried as semantic documentation but i can't get result.
I include:-
<link rel="stylesheet" type="text/css" href="css/semantic.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/semantic.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.js"></script>
<script type="text/javascript">
$('.ui.modal').modal('show');
});
</script>
Here is my code:-
<div class="ui modal">
<form class="ui form">
<div class="field">
<label>Old password</label>
<input type="text" name="oldpass" placeholder="old password">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="newpass" placeholder="new password">
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>I agree to the Terms and Conditions</label>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>
</div>
Please give some idea. Advance Thanks..
There are two problems in your code:
You're trying to get the .ui.modal before it's declared in the HTML. You must place the script tag before closing the body tag, but after all the other tags. Or you must use some ready event.
Your code has a sintax error. You must remove that }); at the end of your script.
Take a look at the example below working:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/components/modal.min.js"></script>
<div class="ui modal">
<form class="ui form">
<div class="field">
<label>Old password</label>
<input type="text" name="oldpass" placeholder="old password">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="newpass" placeholder="new password">
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>I agree to the Terms and Conditions</label>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>
</div>
<script type="text/javascript">
$('.ui.modal').modal('show');
</script>
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?
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);
});
});