Bootstrap Modal is not Displaying Login Window - javascript

How do I display a Login Modal using Bootstrap having included a that needs to be done but still it is not displaying.
enter code here
How do I make this modal to display given the code below:
BOOTSTRAP LINKS:
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
MODAL STYLING:
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color: white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
Navigation Bar Containing the Link so as to display the Login Modal:
<nav class="navbar navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> </a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Departments</li>
<li>Clubs & Sports</li>
<li>Contact US</li>
<li><a data-toggle="modal" href="#login">Login</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="register.php"><img alt="" src="images/person2.png">
Sign Up</a></li>
<li><img alt="" src="images/login2.png">Login</li>
</ul>
</div>
</div>
</nav>
Container For the Login Modal:
<div class="container">
<div class="modal fade" id="login" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding: 35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>
<span class="glyphicon glyphicon-lock"></span> Login
</h4>
</div>
<div class="modal-body" style="padding: 40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span>
Username</label> <input type="text" class="form-control"
id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span>
Password</label> <input type="text" class="form-control"
id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-success btn-block">
<span class="glyphicon glyphicon-off"></span> Login
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left"
data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancel
</button>
<p>
Not a member? Sign Up
</p>
<p>
Forgot Password?
</p>
</div>
</div>
</div>
</div>
Javascript code to enable the Login Modal:
<script>
$(document).ready(function(){
$("#login").click(function(){
$("#myModal").modal();
});
});
</script>


Your Javascript is trying to address elements that don't exist because they do not have an id, or the wrong id.
Try this.
Add an id to the link that is supposed to bring up the modal.
<li><img alt="" src="images/login2.png">Login</li>
This is not required, but I would recommend changing the id of your modal to be more descriptive.
<div class="modal fade" id="loginModal" role="dialog">
Now adjust your JavaScript to address the correct elements.
$(document).ready(function(){
$("#loginLink").click(function(){
$("#loginModal").modal();
});
});

Related

Tabs show as per button not working using bootstrap 5?

I'm using bootstrap 5 i have one modal for login and register but but there is two bootstrap tabs inside one modal and i want to display tab as per button click but this is not working.
When i click on login button then inside modal login tab should be active and if i click on register button then inside modal register tab should be active.
Giving this error in console:-
Uncaught TypeError: Cannot read property 'show' of null
My Code:
$('.register-btn').click(function() {
$('#loginModal').modal('show');
var triggerEl = document.querySelector('[data-bs-target="#register"]')
bootstrap.Tab.getInstance(triggerEl).show()
})
$('.login-btn').click(function() {
$('#loginModal').modal('show');
var triggerE2 = document.querySelector('[data-bs-target="#login"]')
bootstrap.Tab.getInstance(triggerE2).show()
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary register-btn">
Register
</button>
<button type="button" class="btn btn-primary login-btn">
Login
</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleloginModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div class="row m-0">
<div class="col-md-6 p-0">
<img src="images/login-img.png" class="img-fluid" alt="">
</div>
<div class="col-md-6">
<div class="login-right-body">
<ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true">Login</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab" aria-controls="register" aria-selected="false">Register</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<form>
<div class="form-group custom-form-group">
<label>Mobile Number</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Login</button>
</div>
</form>
</div>
<div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
<form>
<div class="form-group custom-form-group">
<label>Full Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks for your efforts!

You can trigger the click to simulate clicking the tab.
$(".register-btn").click(function () {
$("#register-tab").trigger("click");
$("#loginModal").modal("show");
});
$(".login-btn").click(function () {
$("#login-tab").trigger("click");
$("#loginModal").modal("show");
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary register-btn">
Register
</button>
<button type="button" class="btn btn-primary login-btn">
Login
</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleloginModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div class="row m-0">
<div class="col-md-6 p-0">
<img src="images/login-img.png" class="img-fluid" alt="">
</div>
<div class="col-md-6">
<div class="login-right-body">
<ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true">Login</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab" aria-controls="register" aria-selected="false">Register</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<form>
<div class="form-group custom-form-group">
<label>Mobile Number</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Login</button>
</div>
</form>
</div>
<div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
<form>
<div class="form-group custom-form-group">
<label>Full Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Iterate Through Multiple Input Fields with JQuery

I have a simple modal that, when opened, allows a user to add multiple names by clicking the plus icon via JQuery.
The issue that I am currently having is that I need to capture the data entered into all of the name fields and format them into a JSON array so I can post the data. I can log out the first field, but none of the additional fields. The simplified code is listed below but the full version can be viewed here.
<div class="modal-body">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="users-tab" data-toggle="tab" href="#users" role="tab" aria-controls="users" aria-selected="true">Users</a>
</li>
<li class="nav-item">
<a class="nav-link" id="groups-tab" data-toggle="tab" href="#groups" role="tab" aria-controls="groups" aria-selected="false">Groups</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<!-- Content for the users tab -->
<div class="tab-pane fade show active" id="users" role="tabpanel" aria-labelledby="users-tab">
<div class="wrapper">
<div class="users">
<u><h6>Name</h6></u>
<form id="input" action="modal.php" method="post">
<span id="name"></span>
</form>
</div>
<div class="permissions">
</div>
</div>
</div>
<!-- Content for the groups tab -->
<div class="tab-pane fade" id="groups" role="tabpanel" aria-labelledby="groups-tab">
Group Level Permissions
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="new_rule"><i class="fas fa-plus"></i></button>
<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#saved" id="save">Save</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#new_rule").click(function(){
var input = "<input type='text' name='name' placeholder='name' class='form-control' id='name_input'>";
$("#name").prepend(input);
});
$("#save").click(function(){
var value = $("#name_input").val();
console.log(value);
});
});
</script>

try below code snippet.
capture the data entered into all of the name fields
var value = $("input[name='name']")
.map(function() {
return $(this).val();
}).get();
format them into a JSON array
var jsonStr = JSON.stringify(value);
$(document).ready(function() {
$("#new_rule").click(function() {
var input = "<input type='text' name='name' placeholder='name' class='form-control'>";
$("#name").prepend(input);
});
$("#save").click(function() {
var value = $("input[name='name']")
.map(function() {
return $(this).val();
}).get();
var jsonStr = JSON.stringify(value);
console.log(jsonStr);
});
});
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title>Modal</title>
<style media="screen">
.wrapper>div {
background: #eee;
padding: 1em;
}
.wrapper>div:nth-child(odd) {
background: #ddd;
}
.wrapper {
display: grid;
grid-template-columns: 70% 30%;
}
</style>
</head>
<body>
<!-- Button trigger modal -->
<div class="permissions">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#new">
Permissions
</button>
</div>
<!-- Modal -->
<div class="modal fade new" id="new" tabindex="-1" role="dialog" aria-labelledby="new_modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="permissions">Permissions</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fas fa-times"></i></span>
</button>
</div>
<div class="modal-body">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="users-tab" data-toggle="tab" href="#users" role="tab" aria-controls="users" aria-selected="true">Users</a>
</li>
<li class="nav-item">
<a class="nav-link" id="groups-tab" data-toggle="tab" href="#groups" role="tab" aria-controls="groups" aria-selected="false">Groups</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<!-- Content for the users tab -->
<div class="tab-pane fade show active" id="users" role="tabpanel" aria-labelledby="users-tab">
<div class="wrapper">
<div class="users">
<u><h6>Name</h6></u>
<form id="input" action="modal.php" method="post">
<span id="name"></span>
</form>
</div>
<div class="permissions">
</div>
</div>
</div>
<!-- Content for the groups tab -->
<div class="tab-pane fade" id="groups" role="tabpanel" aria-labelledby="groups-tab">
Group Level Permissions
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="new_rule"><i class="fas fa-plus"></i></button>
<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#saved" id="save">Save</button>
</div>
</div>
</div>
</div>
<!-- Saved Modal -->
<div class="modal fade" id="saved" tabindex="-1" role="dialog" aria-labelledby="saved" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Save Changes</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you would like to save the following changes?</p>
<div class="wrapper">
<div class="users">
<u><h6>Name</h6></u>
<span id="name"></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Dismiss</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Maybe try this method just to get array of values and then do whatever u want with them, this works for input fields of type 'text' but you can adjust it the way you want. The function is assigned to a button's onClick event.
<script>
var GetFieldValues = function(){
var values=[];
$("input[type='text']").each(function(){
values.push($(this).val());
});
console.log(values);
}
</script>

You can serialized your form inputs using the serializeArray() function. This will return a query string that then can be converted to JSON object usin JSON.stringify() with an array with each name added.
$(document).ready(function(){
$("#new_rule").click(function(){
var input = "<input type='text' name='name' placeholder='name' class='form-control' id='name_input'>";
$("#name").prepend(input);
});
$("#save").click(function(){
var data = $('#input').serializeArray();
console.log(JSON.stringify(data));
});
});

with this you can solve friend:
$(document).ready(function(){
$("#new_rule").click(function(){
var input = "<input type='text' name='name[]' placeholder='name' class='form-control' id='name_input'>";
$("#name").prepend(input);
});
$("#save").click(function(){
var names = [];
$('input[name^="name"]').each(function() {
names.push($(this).val());
});
console.log(JSON.stringify(names));
});
});

Login & Register modal

I've created two form in different php files one is Login form and other is Register form, Then there is two Login and Register buttons in the menu
How can i make these buttons shows their forms in modal?

You can do it with an ajax query so I gonna give you an example that how you can do it:
The HTML and JS:
<body>
<div id="my_modal" class="modal"></div>
<button onclick="showLoginModal()">Login</button>
<button onclick="showRegisterModal()">Register</button>
</body>
<script>
function showLoginModal(){
$.ajax({
url:'php/login_content.php',
type:"GET",
cache:false,
success:function(html){
$("#my_modal").html(html);
$('#my_modal').modal();
}
});
event.preventDefault();
}
function showRegisterModal(){
$.ajax({
url:'php/register_content.php',
type:"GET",
cache:false,
success:function(html){
$("#my_modal").html(html);
$('#my_modal').modal();
}
});
event.preventDefault();
}
</script>
The login_content.php file:
<?php ?><div class="modal-content">
<form action="" method="post">
User
<input name="user_name" id="user_name" type="text"> Password
<input name="user_pass" id="user_pass" type="password">
<button type="submit" id="login">Login</button>
</form>
The register_content.php file:
<?php ?>
<div class="modal-content">
<form action="" method="post">
Username
<input name="user_name" id="user_name" type="text">
Password
<input name="user_pass" id="user_pass" type="password">
Confirm Password
<input name="user_pass" id="user_pass" type="password">
<button type="submit" id="login"> Register</button>
</form></div>
Greetings!

I'll flesh out my comment on Darwin's answer a little more so you can see what I am talking about.
Now, I warn you about having a fallback way to get the user to the login page just in case javascript doesn't work for whatever reason (and there are many reasons why it wouldn't), but that being said.
The code here is not entirely correct as it involves multiple files, for a full working demo please go to This Plunkr
// Code goes here
$(function() {
$('.modal-btn').on('click', function(e) {
e.preventDefault();
var id = this.id;
$('#login-register-modal').load(id + '_content.html', function(response, status) {
if (status == 'success')
$('#login-register-modal').modal();
});
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Link <span class="sr-only">(current)</span>
</a>
</li>
<li>
Link
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
<li role="separator" class="divider"></li>
<li>
One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="btn-group">
<button id="login" class="btn btn-default modal-btn">Login</button>
<button id="register" class="btn btn-default modal-btn">Register</button>
</div>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="login-register-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Register_content.html
<div class="modal-content">
<div class="modal-header">
<h2>Register</h2>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword2" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
Login_content.html
<div class="modal-content">
<div class="modal-header">
Login
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" /> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>

How to add input types dynamically when dropdown menu clicked

This is what I want to do: When the dropdown item is clicked I want to add a new div with an input inside of it and name it based on the clicked item. I'm a complete newbie to javascript. Can someone give me ideas on how to do this?
Here's a sample picture. Example when I click an item in dropdown menu it will add another div with input type inside of it. Like the Major Exam.
Here's my code.
<div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Criteria for grading</h4>
</div>
<div class="modal-body edit-content">
<form method="POST" enctype="multipart/form-data" action ="edit2.php?newsid=<?=$row['news_id']?>">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown"> Add Criteria <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Assignment</li>
<li>Attendance</li>
<li>Laboratory</li>
<li>Activity</li>
<li>Recitation</li>
</ul>
</div>
<br>
<div class="well">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well">
<label for="majore">Quizzes</label>

You question is tagged jQuery, so I will use it.
$(".dropdown-menu li").on("click", function(){
var name = $(this).find("a").text();
var newDiv = $(".well").first().clone();
$(newDiv).find("label").text(name);
newDiv.insertAfter(".well").last();
});
I would think you'd want to add the name of the dropdown li clicked to the new form, but you didn't include that in your question.

I dont understand a problem. I copy/pasted this code form manual for bootstrap...
form {
padding: .5em 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="dropdown">
<a data-toggle="dropdown" href="#">
<button type="button" class="btn btn-default">Dropdown <span class="caret"></span>
</button>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Check me
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</li>
</ul>
</div>

Bootstrap modal is not working with Bootstrap carousel

I have a bootstrap modal which opens upon clicking the link. But it just does not work with the bootstrap carousel on the page.
I have tried placing the carousel HTML above the modal HTML and vice versa but nothing helped :(
The modal looks like this-
But it should actually be like this-
$('.carousel').carousel({
interval: 4000,
pause: "false"
});
var $item = $('.carousel .item');
var $wHeight = $(window).height();
$item.height($wHeight);
$item.addClass('full-screen');
$('.carousel img').each(function() {
var $src = $(this).attr('src');
var $color = $(this).attr('data-color');
$(this).parent().css({
'background-image' : 'url(' + $src + ')',
'background-color' : $color
});
$(this).remove();
});
$(window).on('resize', function (){
$wHeight = $(window).height();
$item.height($wHeight);
});
html, body {
margin:0;
padding:0;
height:100%;
}
/*Navigation Bar*/
.nav {
margin:0px;
}
.navbar{
margin-bottom:0px;
font-family: 'Droid Serif', serif;
font-size:20px;
}
.navbar-inverse .navbar-brand{
font-size:20px;
font-family: 'Droid Serif', serif;
color: #fed136;
}
/*Carousel*/
.full-screen {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
div.form-group{
position:absolute;
top:40%;
left:40%; /* change to whatever you want */
right:auto; /* change to whatever you want */
bottom:auto; /* change to whatever you want */
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
z-index: -1;
}
#footer{
background-color:black;
color:white;
font-size:15px;
text-align:center;
}
/*Modal*/
.modal-header, h4, .close {
background-color: #5cb85c;
color:white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
.modal-body{
max-height:calc(100vh - 210px);
overflow-y:auto;
}
#register .modal-dialog {
width:40%;
}
<! doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >
<!-- Custom CSS -->
<link href="main.css" rel="stylesheet" type='text/css'>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!--Navigation-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="conatiner-fluid">
<!--page scroll button for -->
<div class="navbar-header" role="navigation">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target= "#myNavbar ">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="main.html">Bookify</a>
</div> <!--page scroll button-->
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li >Home</li>
<li >About</li>
<li >Contact</li>
<li >Cancellation</li>
<li >Sign in /Sign up</li>
</ul>
</div> <!--ul-li-->
</div> <!--navbar collapse-->
</div> <!--container-fluid-->
</nav>
<!--Navigation-->
<!--Caresoul-->
<div id="mycarousel" class="carousel slide carousel-fit" data-ride="carousel ">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="bus6.jpg" data-color="lightblue" alt="First Image">
</div>
<div class="item">
<img src="road2.jpg" data-color="firebrick" alt="Second Image">
</div>
<div class="item">
<img src="seat1.jpg" data-color="firebrick" alt="Second Image">
</div>
<!-- more slides here -->
</div>
<div class="form-group"> <!--Form-->
<label class="control-label requiredField" for="select">
From
<span class="asteriskField">
*
</span>
</label>
<select class="select form-control" id="select" name="select">
<option value="Mumbai">
Banglore
</option>
<option value="Pune">
Delhi
</option>
<option value="Delhi">
Indore
</option>
<option value="Banglore">
Mumbai
</option>
<option value="Indore">
Pune
</option>
</select>
<label class="control-label requiredField" for="select">
To
<span class="asteriskField">
*
</span>
</label>
<select class="select form-control" id="select" name="select">
<option value="Mumbai">
Banglore
</option>
<option value="Pune">
Delhi
</option>
<option value="Delhi">
Indore
</option>
<option value="Banglore">
Mumbai
</option>
<option value="Indore">
Pune
</option>
</select>
<label>Select Date*</label>
<input type="date" class="form-control input-lg" name="start" placeholder="Check In">
</br>
Search
</div>
<!--Form-->
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--Caresoul-->
<!--Footer-->
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-12"> </br>
<ul class="list-inline">
<li> Home</li>
<li>About </li>
<li> Contact </li>
<li >Cancellation</li>
<li >Sign in /Sign up</li>
</ul>
</div> </br></br></br></br>
<div class="col-md-12"> Copyright © 2016 Bookify. All Rights Reserved</div>
</div>
</div>
</div>
<!--Footer-->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="email"><span class="glyphicon glyphicon-envelope"></span> Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" required>
</div>
<div class="form-group">
<label for="password"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="password" class="form-control" id="password" placeholder="Enter password" required>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<p>Not a member? <a data-dismiss="modal" data-toggle="modal" data-target="#register">Sign up</a></p>
<p>Forgot Password?</p>
</div>
</div>
</div>
</div>
<!---Modal1---->
<!---Modal2---->
<div class="modal fade" id="register" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span>Register</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="firstName"><span class="glyphicon glyphicon-user"></span>Name</label>
<input type="text" class="form-control" id="firstName" placeholder="Name" required>
</div>
<div class="form-group">
<label for="email"><span class="glyphicon glyphicon-envelope"></span>Email</label>
<input type="email" class="form-control" id="email" placeholder="Email" required>
</div>
<div class="form-group">
<label for="password"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" required>
</div>
<div class="form-group">
<label for="phonenum"><span class="glyphicon glyphicon-phone"></span>Phone Number (format: xxxx-xxxxxx)</label>
<input type="tel" pattern="^\d{4}-\d{6}$" class="form-control" placeholder="Number"required>
</div>
<div class="form-group">
<label for="birthDate"><span class="glyphicon glyphicon-calendar"></span>Date of Birth</label>
<input type="date" id="birthDate" class="form-control" required>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Gender</label>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" name="radio-choice" required>Female
</label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" name="radio-choice" required >Male
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<div class="checkbox">
<label>
<input type="checkbox" required>I accept terms
</label>
</div>
</div>
</div> <!--form-group -->
<button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Register</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<p>Already a member?<a data-dismiss="modal" data-toggle="modal" data-target="#myModal">Sign in</a></p>
</div>
</div>
</div>
</div>
<!---Modal2---->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
<!--Custome Jquery-->
<script src="main.js"></script>
</body>
</html>

Use id selector for the form on the slider in html
<div id="example-form" class="form-group">
And in main.css change div.form-group to #example-form
#example-form{
position:absolute;
top:40%;
left:40%; /* change to whatever you want */
right:auto; /* change to whatever you want */
bottom:auto; /* change to whatever you want */
}
So that the styling applied only on the form on the page and not the form in the modal.

Categories

Resources