enter image description here
I am trying to create a pop up with the add button so the form can display in a modal pop up right now the form is displaying already but I want it to display once i click the add button is there a way I can fix this
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="mystyle.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="mycrud.js"></script>
</head>
<body>
<title>My Movies</title>
<header>
<h1>Movies</h1>
</header>
<button id = "showMovies" type="button" class="btn btn-primary" data-toggle="modal"
data-target=#exampleModal>All Movies</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
<div class = "modal-body">
<form id="newForm">
<div class="form-group row">
<label for="idmovielist" class="col-sm-2 col-form-label">idmovielist</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="intNum" placeholder="idmovielist">
</div>
</div>
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="name">
</div>
</div>
<div class="form-group row">
<label for="thumnail_path" class="col-sm-2 col-form-label">thumnail_path</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="thumnail_path" placeholder="thumnail_path">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-2 col-form-label">description</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="description" placeholder="description">
</div>
</div>
<div class="form-group row">
<label for="year_released" class="col-sm-2 col-form-label">year_released</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="year_released" placeholder="year_released">
</div>
</div>
<div class="form-group row">
<label for="language_released" class="col-sm-2 col-form-label">language_released</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="language_released" placeholder="language_released">
</div>
</div>
</form>
</div>
<button id = "movieAdded" type="button" class="btn btn-primary" data-toggle="modal"
data-target=#exampleModal>Add</button>
<table class="table table-bordered table-hover" width="100%">
<thead style="background-color:#ddd;" class="table-borderless">
<tr>
<th>idmovielist</th>
<th>name</th>
<th>thumnail_path</th>
<th>description</th>
<th>year_released</th>
<th>language_released</th>
<th>Action</th>
</tr>
</thead>
<tbody id="movies">
</tbody>
</table>
</body>
</html>
This is my html code I have a form code and a modal code from bootstrap where can I place the modal code so that this form I have can be a pop up. Basically I am creating a pop up form and if I need to add anything else to help you guys answer the question please let me know
Your modal-body class is outside the modal. to fix that problem, put your <div class="modal-body"></div> inside the modal.
I changed your code. please see..
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="mystyle.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="mycrud.js"></script>
</head>
<body>
<title>My Movies</title>
<header>
<h1>Movies</h1>
</header>
<button id = "showMovies" type="button" class="btn btn-primary" data-toggle="modal"
data-target=#exampleModal>All Movies</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class = "modal-body">
<form id="newForm">
<div class="form-group row">
<label for="idmovielist" class="col-sm-2 col-form-label">idmovielist</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="intNum" placeholder="idmovielist">
</div>
</div>
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="name">
</div>
</div>
<div class="form-group row">
<label for="thumnail_path" class="col-sm-2 col-form-label">thumnail_path</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="thumnail_path" placeholder="thumnail_path">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-2 col-form-label">description</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="description" placeholder="description">
</div>
</div>
<div class="form-group row">
<label for="year_released" class="col-sm-2 col-form-label">year_released</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="year_released" placeholder="year_released">
</div>
</div>
<div class="form-group row">
<label for="language_released" class="col-sm-2 col-form-label">language_released</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="language_released" placeholder="language_released">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<button id = "movieAdded" type="button" class="btn btn-primary" data-toggle="modal"
data-target=#exampleModal>Add</button>
<table class="table table-bordered table-hover" width="100%">
<thead style="background-color:#ddd;" class="table-borderless">
<tr>
<th>idmovielist</th>
<th>name</th>
<th>thumnail_path</th>
<th>description</th>
<th>year_released</th>
<th>language_released</th>
<th>Action</th>
</tr>
</thead>
<tbody id="movies">
</tbody>
</table>
</body>
</html>
Related
I needed when my all mandatory input field filled then only following form come by clicking on the Next button.
But in this code, it is going to next whenever I click on next but only submit when all fields filled.
Which may confuse the users when they forget to input filed then go to next form then not able to submit.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!--Added by online for Register-->
<nav>
<button data-toggle="modal" data-target="#myModal2" role="button" class="btn btn-outline-info my-2 my-sm-0" type="submit"><b>Register</b></button>
<div class="modal fade bs-example-modal-sm" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Register</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form name="reg-form">
<div class="form-group">
<label for="username" class="control-label">Name:</label>
<input type="text" class="form-control" id="username" required>
</div>
<div class="form-group">
<label for="email" class="control-label">Email:</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="form-group">
<label for="passward" class="control-label">passward:</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="form-group">
<label for="con-passward" class="control-label">Confirm passward:</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="form-group">
<!------------------------------------------------------------------------------->
<button data-toggle="modal" data-target="#myModal3" role="button" class="btn btn-outline-info my-2 my-sm-0" type="submit"><b>Next</b></button>
<div class="modal fade bs-example-modal-sm" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Next Form</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form name="reg-form">
<div class="form-group">
<label for="age" class="control-label">Age:</label>
<input type="number" class="form-control" id="age" required>
</div>
<div class="form-group">
<label for="add" class="control-label">Address:</label>
<input type="text" class="form-control" id="add" required>
</div>
<div class="form-group">
<label for="con" class="control-label">Contact:</label>
<input type="text" class="form-control" id="con" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" value="submit">Submit</button>
<!--button type="button" class="btn btn-danger" data-dismiss="modal">Close</button-->
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!------------------------------------------------------------------------------------------------>
</div>
</form>
</div>
</div>
</div>
</div>
</nav>
<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>
Simply add an id around your first few inputs and then check if they're empty or not.
$('#next').on('click', function(evt) {
$('#firstModal input:required').each(function() {
if ($(this).val() === '') evt.stopPropagation();
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!--Added by online for Register-->
<nav>
<button data-toggle="modal" data-target="#myModal2" role="button" class="btn btn-outline-info my-2 my-sm-0" type="submit"><b>Register</b></button>
<div class="modal fade bs-example-modal-sm" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Register</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form name="reg-form">
<div id="firstModal">
<div class="form-group">
<label for="username" class="control-label">Name:</label>
<input type="text" class="form-control" id="username" required>
</div>
<div class="form-group">
<label for="email" class="control-label">Email:</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="form-group">
<label for="passward" class="control-label">passward:</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="form-group">
<label for="con-passward" class="control-label">Confirm passward:</label>
<input type="password" class="form-control" id="password_validate" required>
</div>
</div>
<div class="form-group">
<!------------------------------------------------------------------------------->
<button data-toggle="modal" data-target="#myModal3" role="button" class="btn btn-outline-info my-2 my-sm-0" type="submit" id="next"><b>Next</b></button>
<div class="modal fade bs-example-modal-sm" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Next Form</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form name="reg-form">
<div class="form-group">
<label for="age" class="control-label">Age:</label>
<input type="number" class="form-control" id="age" required>
</div>
<div class="form-group">
<label for="add" class="control-label">Address:</label>
<input type="text" class="form-control" id="add" required>
</div>
<div class="form-group">
<label for="con" class="control-label">Contact:</label>
<input type="text" class="form-control" id="con" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" value="submit">Submit</button>
<!--button type="button" class="btn btn-danger" data-dismiss="modal">Close</button-->
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!------------------------------------------------------------------------------------------------>
</div>
</form>
</div>
</div>
</div>
</div>
</nav>
<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>
When I click on select box, label is not becoming active. In input boxes, it's working fine.
Is it possible for select box also ? If not, please tell me another method to make it active.
When I click on input box
When I click on select box
Here is the code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#customModal">
Launch demo modal
</button>
<div class="modal fade" id="customModal" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="modal-title" style="text-align:center;"></h4>
</div>
<div class="modal-body" id="modal-body">
<div class='form-group'>
<label for='cname'>Class Name</label>
<input type='text' class='form-control' name='cname' id='cname' required>
</div>
<div class="row ">
<div class="col-lg-5">
<div class="form-group has-feedback is-empty">
<label for='' class="">Class Incharge</label>
<select class="myselect" style="border-width:none; width:100%;" >
<option hidden selected disabled></option>
<option>Sahal EV</option>
<option>Muhammed Rahil</option>
<option>Venmuka Jishwanth</option>
<option>Freejin Ram Pacha</option>
</select>
</div>
</div>
<div class="col-lg-5">
<div class="form-group has-feedback is-empty">
<label for='tkno'>Token Number</label>
<input type='text' class='form-control' name='tkno' id='tkno' readonly>
</div>
</div>
<div class="col-lg-2">
<div class='form-group'>
<label for='cap'>Capacity</label>
<input type='text' class='form-control' name='cap' id='cap'>
</div>
</div>
</div>
</div>
<div class="modal-footer" id="modal-footer">
<div class="row">
<div class="col-xs-8 col-lg-10">
<button type="button" class="btn btn-primary btn-raised" id="delete">Delete</button>
</div>
<div class="col-xs-4 col-lg-2">
<button type="submit" class="btn btn-primary btn-raised" id="saveClass">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
You can do it with this JS. I just added .lab-active class for input & select fields. When the field is focused, it should be add a class into the label
$(".form-group .lab-active").focus(function() {
$("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
$("label").removeClass("labelfocus");
});
.labelfocus {
color:red;
font-weight: bold;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#customModal">
Launch demo modal
</button>
<div class="modal fade" id="customModal" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="modal-title" style="text-align:center;"></h4>
</div>
<div class="modal-body" id="modal-body">
<div class='form-group'>
<label for='cname'>Class Name</label>
<input type='text' class='form-control lab-active' name='cname' id='cname' required>
</div>
<div class="row ">
<div class="col-lg-5">
<div class="form-group has-feedback is-empty">
<label for='' class="">Class Incharge</label>
<select class="myselect lab-active" style="border-width:none; width:100%;" >
<option hidden selected disabled></option>
<option>Sahal EV</option>
<option>Muhammed Rahil</option>
<option>Venmuka Jishwanth</option>
<option>Freejin Ram Pacha</option>
</select>
</div>
</div>
<div class="col-lg-5">
<div class="form-group has-feedback is-empty">
<label for='tkno'>Token Number</label>
<input type='text' class='form-control lab-active' name='tkno' id='tkno' readonly>
</div>
</div>
<div class="col-lg-2">
<div class='form-group'>
<label for='cap'>Capacity</label>
<input type='text' class='form-control lab-active' name='cap' id='cap'>
</div>
</div>
</div>
</div>
<div class="modal-footer" id="modal-footer">
<div class="row">
<div class="col-xs-8 col-lg-10">
<button type="button" class="btn btn-primary btn-raised" id="delete">Delete</button>
</div>
<div class="col-xs-4 col-lg-2">
<button type="submit" class="btn btn-primary btn-raised" id="saveClass">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
Check this code. You have to define label for like <label for='class-incharge'> and then you have to give the same id to select tag and class form-control also remained to be added.
like
<select class="myselect form-control" id="class-incharge" style="border-width:none; width:100%;" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#customModal">
Launch demo modal
</button>
<div class="modal fade" id="customModal" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="modal-title" style="text-align:center;"></h4>
</div>
<div class="modal-body" id="modal-body">
<div class='form-group'>
<label for='cname'>Class Name</label>
<input type='text' class='form-control' name='cname' id='cname' required>
</div>
<div class="row ">
<div class="col-lg-5">
<div class="form-group has-feedback is-empty">
<label for='class-incharge' class="">Class Incharge</label>
<select class="myselect form-control" id="class-incharge" style="border-width:none; width:100%;" >
<option hidden selected disabled></option>
<option>Sahal EV</option>
<option>Muhammed Rahil</option>
<option>Venmuka Jishwanth</option>
<option>Freejin Ram Pacha</option>
</select>
</div>
</div>
<div class="col-lg-5">
<div class="form-group has-feedback is-empty">
<label for='tkno'>Token Number</label>
<input type='text' class='form-control' name='tkno' id='tkno' readonly>
</div>
</div>
<div class="col-lg-2">
<div class='form-group'>
<label for='cap'>Capacity</label>
<input type='text' class='form-control' name='cap' id='cap'>
</div>
</div>
</div>
</div>
<div class="modal-footer" id="modal-footer">
<div class="row">
<div class="col-xs-8 col-lg-10">
<button type="button" class="btn btn-primary btn-raised" id="delete">Delete</button>
</div>
<div class="col-xs-4 col-lg-2">
<button type="submit" class="btn btn-primary btn-raised" id="saveClass">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
Just replace this code from <div class="modal fade" line.
<div class="modal fade" id="customModal" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="modal-title" style="text-align:center;"></h4>
</div>
<div class="modal-body" id="modal-body">
<div class='form-group'>
<label for='cname'>Class Name</label>
<input type='text' class='form-control' name='cname' id='cname' required>
</div>
<div class="row ">
<div class="col-lg-5">
<div class="form-group has-feedback is-empty">
<label for='class-incharge' class="">Class Incharge</label>
<select class="myselect form-control" id="class-incharge" style="border-width:none; width:100%;" >
<option hidden selected disabled></option>
<option>Sahal EV</option>
<option>Muhammed Rahil</option>
<option>Venmuka Jishwanth</option>
<option>Freejin Ram Pacha</option>
</select>
</div>
</div>
<div class="col-lg-5">
<div class="form-group has-feedback is-empty">
<label for='tkno'>Token Number</label>
<input type='text' class='form-control' name='tkno' id='tkno' readonly>
</div>
</div>
<div class="col-lg-2">
<div class='form-group'>
<label for='cap'>Capacity</label>
<input type='text' class='form-control' name='cap' id='cap'>
</div>
</div>
</div>
</div>
<div class="modal-footer" id="modal-footer">
<div class="row">
<div class="col-xs-8 col-lg-10">
<button type="button" class="btn btn-primary btn-raised" id="delete">Delete</button>
</div>
<div class="col-xs-4 col-lg-2">
<button type="submit" class="btn btn-primary btn-raised" id="saveClass">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
Js:
$( document ).ready(function() {
$(".form-control.lab-active").focus(function() {
$("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
$("label").removeClass("labelfocus");
});
});
Css:
.labelfocus {
color:red;
font-weight: bold;
}
I want to place the search button in the column next to the input form using the Bootstrap grid, but since both the "input" tag and "button" tag must be in the div with the "form-group" attribute, this makes things difficult.
This is my original code:
<div class="row">
<div class="col-md-12 formMove">
<form id="getposts_form" role="form">
<div class="form-group">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
<br><div id="errors"></div>
</div>
</form>
</div>
</div><!--end row-->
And this is my failed attempt with nested columns:
<div class="row">
<div class="col-md-12 formMove">
<div class="row">
<div class="col-md-10">
<form id="getposts_form" role="form">
<div class="form-group">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
</div> <!--I want this closing tag to close "col-md-10", but its closing the "form-group"-->
<div class="col-md-2">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
<br><div id="errors"></div>
</div>
</form>
</div>
</div>
</div>
</div>
Thanks in advance.
I could not understand why do you need button and input within the same form-group class, as you can use separate form-group class for them.
The approach through which in line forms are achieved is using .form-inline class with the<form> tag. As you wanted an answer using grid system I have provide a snippet for that also.
I have added two snippet
using .form-inline class
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="row">
<div class="col-md-12 formMove">
<form id="getposts_form" class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
</div>
<div class="form-group">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></div>
<br><div id="errors"></div>
</form>
</div>
</div><!--end row-->
</body>
</html>
using bootstrap grid system
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="row">
<div class="col-md-12 formMove">
<form id="getposts_form" class="form-inline" role="form">
<div class="form-group">
<div class="row">
<div class="col-md-8 col-lg-8 col-sm-8 col-xs-8">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></div>
</div>
<br><div id="errors"></div>
</div>
</form>
</div>
</div><!--end row-->
</body>
Login Modal
Can someone give me ideas on how to do it? I tried to do it on bootstrap but the logo is inside the modal. i want to put my logo in the middle and half of it are on outside like in the first picture. Im new to html and css. Can someone give me clues on how to do it?
here is my work...
My Login Modal
This is the code you are asking for. Use this code it will perfectly work for you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modal Login</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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.logo-margin-negative{
margin-top: -100px;
}
.modal{
padding-top: 100px ! important;}
</style>
</head>
<body>
<div class="container">
<h2>Click button to enter login</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Login Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><img src="http://placehold.it/150x150" class="center-block img-circle logo-margin-negative"></h4>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="form-group col-sm-5 col-sm-offset-4">
<label class="sr-only" for="exampleInputAmount">Username</label>
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Username">
</div>
</div>
<div class="form-group col-sm-5 col-sm-offset-4">
<label class="sr-only" for="exampleInputAmount">Password</label>
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-key"></i></div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Password">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-5 col-sm-offset-4">
<button type="button" class="btn btn-danger btn-block" data-dismiss="modal">Login</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am using the Dropzone.js plugin (which function to send via ajax and drag and drop effect, files to server) the problem is that it's breaking all the form of the stream (which contains other basic fields as input text / password) already tried incapsular tags within divs, add maximum size for file upload area but nothing worked.
I am using only the JS and CSS provided by jquery, bootstrap and
dropzone (and the shipping configuration).
I add the full sample project with this problem on Github
Scripts in tag Head
<link rel="stylesheet" href="library/Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="library/dropzone/dropzone.css">
<link rel="stylesheet" href="assets/css/main.css">
<script defer src="library/jquery-1.11.1/jquery-1.11.1.min.js"></script>
<script defer src="library/Bootstrap/js/bootstrap.min.js"></script>
<script defer src="library/dropzone/dropzone.js"></script>
<script defer src="assets/js/main.js"></script>
Bootstrap modal:
<div class="modal fade" id="add-product-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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 span7 text-center" id="myModalLabel">Add Product</h4>
</div>
<div class="modal-body">
<form class="form-horizontal dropzone" id="add-product-form" action="#" method="post">
<div class="dropzone-previews"></div> <!-- this is were the previews should be shown. -->
<div class="form-group">
<label for="input_email" class="control-label col-md-3">Your Email (login)</label>
<div class="col-md-9">
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="input_password" class="control-label col-md-3">Password</label>
<div class="col-md-9">
<input type="password" class="form-control" id="pass" name="pass" placeholder="Password">
</div>
</div>
<div class="checkbox text-center">
<label><input type="checkbox" id="remember_me" name="remember_me">Remember me on this computer</label>
</div>
<div class="form-group text-center">
<div class="col-md-6 col-md-offset-3">
<button type="reset" class="btn btn-danger">Reset</button>
<button type="submit" class="btn btn-info">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
The actual modal:
As it should be:
An easy solution is to use a div element inside the form to use as dropzone, here is how the modal-body would look like.
html:
<div class="modal-body">
<form class="form-horizontal" id="add-product-form" action="#" method="post">
<div id="myDropzone" class="dropzone"></div> <!-- This is the dropzone element -->
<div class="form-group">
<label for="input_email" class="control-label col-md-3">Your Email (login)</label>
<div class="col-md-9">
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="input_password" class="control-label col-md-3">Password</label>
<div class="col-md-9">
<input type="password" class="form-control" id="pass" name="pass" placeholder="Password">
</div>
</div>
<div class="checkbox text-center">
<label>
<input type="checkbox" id="remember_me" name="remember_me">Remember me on this computer</label>
</div>
<div class="form-group text-center">
<div class="col-md-6 col-md-offset-3">
<button type="reset" class="btn btn-danger">Reset</button>
<button type="submit" class="btn btn-info">Login</button>
</div>
</div>
</form>
</div>
Then since you are using a div for your dropzone element you need to specify the url in the dropzone configuration:
js:
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDropzone", { url: "#"});