How can I link input textbox and dropdown in html - javascript

I want to use bootstarp select and an input textbox. When I type in textbox it should suggest entries of bootstrap select element. I want to use javascript, jQuery and json. How shall I do this?


I would suggest you to use some plugin for the purpose.
Have a look at https://select2.github.io/examples.html


Include following lines into your head section of page and start coding:
Links:
bootstrap.min.css,
jquery.min.js,
bootstrap.min.js


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script language="javascript">
$(document).ready(function() {
//Write your jquery code here
});
</script>
</head>
<body>
<div class="container">
<h2>Form control: input</h2>
<p>The form below contains two input elements; one of type text and one of type password:</p>
<form role="form">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a>
</li>
</ul>
</div>
</form>
</div>
</body>
</html>

Related

I cant figure out firebase authentication [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am trying to build my own workout tracking tool. I have built my front end with bootstrap studio. I am figuring out how to use firebase and its authentication tool. Its working but only in a plain html file. The one I created with BSStudio doesnt want to work. I hope somebody can help me out.
First I used a js file for every page, but I handle it now from just one file.
Its called backend.js. :
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
// User is signed in.
alert("logged in")
document.getElementById("user_div").style.display = "block";
document.getElementById("login_div").style.display = "none";
document.getElementById("logoutsucceed").style.display = "none";
document.getElementById("logoutfailed").style.display = "block";
var user = firebase.auth().currentUser;
if (user != null) {
var email_id = user.email;
document.getElementById("user_para").innerHTML = "Welcome User : " + email_id;
}
} else {
// No user is signed in.
alert("logged out")
document.getElementById("user_div").style.display = "none";
document.getElementById("login_div").style.display = "block";
document.getElementById("logoutsucceed").style.display = "block";
document.getElementById("logoutfailed").style.display = "none";
}
});
document.getElementById('btlogin').onclick = function () {
login();
};
document.getElementById('btlogout').onclick = function () {
logout();
};
function login() {
alert("try to login")
var userEmail = document.getElementById("email_field").value;
var userPass = document.getElementById("password_field").value;
firebase.auth().signInWithEmailAndPassword(userEmail, userPass).catch(function (error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
alert("Error : " + errorMessage);
// ...
});
}
function logout() {
alert("logged out")
firebase.auth().signOut();
href = "index.html"
}
function register() {
alert("register command")
}
Here is my working page:
<html>
<head>
<title>Firebase Login</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="login_div" class="main-div">
<h3>Firebase Web login Example</h3>
<input type="email" placeholder="Email..." id="email_field" />
<input type="password" placeholder="Password..." id="password_field" />
<button id="btlogin">Login to Account</button>
</div>
<button onclick="window.location.href = 'homepage.html';">Hier klicken</button>
<div>
</div>
<div id="user_div" class="loggedin-div">
<h3>Welcome User</h3>
<p id="user_para">Welcome to Firebase web login Example. You're currently logged in.</p>
<button id="btlogout">Logout</button>
</div>
<script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
[config from firebase]
};
firebase.initializeApp(config);
</script>
<script src="assets/js/backend.js">
</script>
</body>
</html>
And my bsstudio created page (which doesnt work). I have 100% put the same firebase config, so thats not the problem:
<!DOCTYPE html>
<html>
<head>
login()
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Login - FitBy</title>
<meta name="description" content="A gym website by Kevin Kumar. Providing various gym tools from workout tracking to informative blogs.">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Actor">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css">
<link rel="stylesheet" href="assets/fonts/simple-line-icons.min.css">
<link rel="stylesheet" href="assets/css/beautiful-danger-alert.css">
<link rel="stylesheet" href="assets/css/beautiful-success-alert.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
<link rel="stylesheet" href="assets/css/Profile-Card.css">
<link rel="stylesheet" href="assets/css/smoothproducts.css">
<link rel="stylesheet" href="assets/css/untitled.css">
</head>
<body>
<nav class="navbar navbar-light navbar-expand-lg fixed-top bg-white clean-navbar" style="margin-bottom: 0;">
<div class="container"><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1" style="float: right;"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="text-left align-self-start order-1" style="position: absolute;float: left;margin-bottom: 0px;"></div>
<div class="collapse navbar-collapse" id="navcol-1"><span class="navbar-text" style="min-width: 220px;"><a class="navbar-brand logo" href="#" style="margin-right: 0;">FitBy</a><a class="navbar-brand logo" href="#"
style="transform: scale(-1,1);margin-right: 0;margin-left: 0px;padding: 0;font-family: Actor, sans-serif;font-size: 30px;">K</a><a class="navbar-brand logo" href="#"
style="margin-right: 0;margin-left: -2px;font-family: Actor, sans-serif;font-size: 30px;">K</a><a class="navbar-brand logo" href="#" style="margin-left: 2;padding: 0;margin-right: 0;">nowledge</a></span>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/features.html">Features</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/forum.html">Forum</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/blog-post-list.html">Blog</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/about-us.html">About Us</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/contact-us.html">Contact Us</a></li>
<li class="nav-item dropdown show"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="true" href="#">my account</a>
<div class="dropdown-menu show" role="menu">
<div class="col"><img id="userprofileimg" src="assets/img/scenery/image1.jpg" style="margin: 0;padding: 0px;background-position: 100%;margin-left: auto;margin-right: auto;"></div>
<h6 class="dropdown-header" role="presentation">Overview</h6><a class="dropdown-item" role="presentation" href="/userpage.html">My Information</a><a class="dropdown-item #lblogout" role="presentation"
href="/login.html">Login</a><a class="dropdown-item" role="presentation" id="lbregister" href="registration.html">Register</a><a class="dropdown-item" role="presentation" id="lbLogout" href="logout.html">Logout</a>
<h6 class="dropdown-header" role="presentation">Tracking</h6><a class="dropdown-item" role="presentation" href="tracking-dashboard.html">Tracking Dashboard</a><a class="dropdown-item" role="presentation" href="#">Create
Workout</a><a class="dropdown-item" role="presentation" href="#">Excercises</a>
<h6 class="dropdown-header" role="presentation">Blog</h6><a class="dropdown-item" role="presentation" href="#">My Posts</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<main class="page login-page">
<section class="clean-block clean-form dark">
<div class="container">
<div class="block-heading">
<h2 class="text-info">Log In</h2>
<p>Welcome!</p>
</div>
<div id="login_div">
<form>
<div class="form-group"><label for="email">Email</label><input class="form-control item" type="email" id="email"></div>
<div class="form-group"><label for="password">Password</label><input class="form-control" type="password" id="password"></div>
<div class="form-group">
<div class="form-check"><input class="form-check-input" type="checkbox" id="checkbox"><label class="form-check-label" for="checkbox">Remember me</label></div>
</div><button class="btn btn-primary btn-block" id="btlogin" type="button">Log In</button>
</form>
</div>
</div>
<div id="user_div">
<div class="alert alert-success beautiful" role="alert" id="succeed"><Strong>Success!</Strong> You are logged in! To add more details just open your Overview (link)</div>
</div>
</section>
</main>
<footer class="page-footer dark">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>Get started</h5>
<ul>
<li>Home</li>
<li>Sign up</li>
</ul>
</div>
<div class="col-sm-3">
<h5>About us</h5>
<ul>
<li>Company Information</li>
<li>Contact us</li>
<li>Reviews</li>
</ul>
</div>
<div class="col-sm-3">
<h5>Support</h5>
<ul>
<li>FAQ</li>
<li>Help desk</li>
<li>Forums</li>
</ul>
</div>
<div class="col-sm-3">
<h5>Legal</h5>
<ul>
<li>Terms of Service</li>
<li>Terms of Use</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<p>© 2020 Copyright Text</p>
</div>
</footer>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/chart.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script src="assets/js/smoothproducts.min.js"></script>
<script src="assets/js/theme.js"></script>
<script src="assets/js/backend.js"></script>
</body>
</html>

The input fields - email and password, have different id in HTML and bsstudio.
In backend.js change var userEmail = document.getElementById("email").value and var userPass = document.getElementById("password").value; and run with bsstudio. Ideally it should work. If it doesn't do post your output( even if it gives error).

Disabling nodejs files in vsCode to client side js files

I am having tremendous difficulty coding with java script. My Java script file is using nodejs, which means i cant perform any DOMS. For examples this code here:
var form = document.getElementsByClassName('nav-item');
console.log(form.length);
There are 4 nav-items which are displayed in the developer tools on the browser but the length is 0, where it should be 4. Why is this happening? Is there a way to disable nodejs or switch ? I know nodejs is server side, so how do i disable it or create another js file that is in client side?
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="boot.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="boot.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Creates the navbar links-->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Subjects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link float-right" href="#">Sign Up</a>
</li>
</ul>
</div>
</nav>
<br>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox">Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
BOOT.JS FILE:
var form = document.getElementsByClassName('nav-item');
console.log(form.length);

Try loading your script at the end of the file instead of the header. The DOM has not loaded when you run the script. Either that or put it inside this event:
document.addEventListener("DOMContentLoaded", function(event) {
var form = document.getElementsByClassName('nav-item');
console.log(form.length);
});

bootstrap drop down not dropping down

I am trying to get a bootstrap drop down menu to work but I seem to have something going wrong. Here is my html:
<head>
<meta charset="utf-8">
<title>memberpage</title>
<link rel="stylesheet" type="text/css" href="/style/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/style/bootstrap.js">
</head>
<div class="page-header">
<div class="dropdown" style="margin-bottom:10px;">
<button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu test" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="">HTML</a></li>
<li role="presentation"><a role="menuitem" href="">CSS</a></li>
<li role="presentation"><a role="menuitem" href="">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="">About Us</a></li>
</ul>
</div>
</div>
I get the button to show up but when I click it I don't get anything. I am using the default js and css files from bootstrap. I am want it to be just an normal drop down menu.
[EDIT] okay so after adding the jquery here is my code.
<head>
<meta charset="utf-8">
<title>memberpage</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/style/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/style/bootstrap.js">
</head>
<div class="page-header">
<div class="dropdown" style="margin-bottom:10px;">
<button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="">HTML</a></li>
<li role="presentation"><a role="menuitem" href="">CSS</a></li>
<li role="presentation"><a role="menuitem" href="">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="">About Us</a></li>
</ul>
</div>
</div>
I am still getting nothing from the page. I get the button but nothing else. no dropdown nor any response from the page.

You forgot jquery,
Add this before bootstrap.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
Quoting from Bootstrap Javascript ,
Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).
This works well for me:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="page-header">
<div class="dropdown" style="margin-bottom:10px;">
<button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="">HTML</a></li>
<li role="presentation"><a role="menuitem" href="">CSS</a></li>
<li role="presentation"><a role="menuitem" href="">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="">About Us</a></li>
</ul>
</div>
</div>
</body>
I am just using CDN for the files. Fiddle

You did not include js file.Please check all script link, is it ok or not.I just include js file and its working for me.Take a look WORKING FIDDLE.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Bootstrap Dropdown Button Problems

So I have just started playing around with bootstrap, and when I try to fallow the example per Getbootstrap's component page the button doesn't want to work as advertised. I have seen and now tried a number of different solutions to this problem which has me thinking that I maybe over thinking what is wrong here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rubish</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="maindev1.0.0.css" />
<link rel="stylesheet" type="text/css" href="navbardev1.0.0.css" />
</head>
<body>
<div class="navbar-header pull-right">
<button id="menubutton" class="btn btn-default btn-md dropdown-toggle" data-toggle="dropdown"
type="button" aria-expanded="false"><span class="glyphicon glyphicon-list"></span> </button>
</div>
<ul class="dropdown-menu" role="menu">
<li>yadayada
</li>
<li class="divider"></li>
<li>yadayada
</li>
<li class="divider"></li>
<li>yadayada
</li>
<li class="divider"></li>
<li>yadayada
</li>
<li class="divider"></li>
<li>yadayada
</li>
</ul>
</body>
</html>
I can get the button to show up and it looks like its active when I click it but it can not get the drop down to appear. I have tried it with Safari, Chrome, and Firefox with the same result in all three. Is there something that I am forgetting?

You don't say if it is in a navbar or just a normal one. From your code it looks like you are trying top do it in a navbar. I also included a normal dropdown button.
fiddle: https://jsfiddle.net/DTcHh/8607/
<!-- Normal Single Dropdown button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>

select {background-color: blue; color: white; border: 2px solid; border-radius: 6px;}
<select name="yada">
<option value="yada">yada</option>
<option value="yada">yada</option>
<option value="yada">yada</option>
<option value="yada">yada</option>
</select>
Why not just replace the button with a dropdown like this and then style it to look like a button?

Twitter Bootstrap drop down menu is not working

I have included twitter bootstrap css and js files, and then using the following Javascript code, I want to applyn drop down effect to the the HTML markup. But it does not work, neither does show any error in console. Please helpe me.
I have included:
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/game/public/css/bootstrap-responsive.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/game/public/css/bootstrap.min.css">
<script src="http://localhost/game/public/js/bootstrap.min.js"></script>
<script src="http://localhost/game/public/js/bootstrap-datepicker.js"></script>
And this is the Javascript:
<script type="text/javascript">
$(document).ready(function(){
$('.nav').dropdown();
});
</script>
And this is the Markup:
<ul class='nav nav-pills pullright'>
<li class="btn btn-navbar">خانه کاربری</li>
<li class="btn btn-navbar"><a class="dropdown-toggle" href="#">سفارش جدید</a>
<ul class="dropdown-menu nav-collapse">
<li class="btn btn-navbar">سفارش بازی
<ul>
<li class="btn btn-navbar">Counter Strike
</ul>
<li>
</ul>
</li>
<li class="btn btn-navbar">سفارش بازی</li>
<li class="btn btn-navbar">فهرست سفارش ها</li>
<li class="btn btn-navbar" >فهرست پرداخت ها</li>
<li class="btn btn-navbar">ثبت فیش پرداختی</li>
<li class="btn btn-navbar">حساب کاربری</li>
<li class="btn btn-navbar">تغییر رمز عبور</li>
<li class="btn btn-navbar">خروج</li>
</ul>

You don't need any javascript, just include the bootstrap css and js files in your pages.
You can see an example of the dropdown component here :
http://getbootstrap.com/components/#btn-dropdowns

Categories