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;
}
Related
I am new to HTML and am trying to create a button that opens a model. I cannot find out why it's not opening. Modal has to pop with the form in it. When I click nothing happens.
Please, help to uderstand where I did a mistake.
<div id="reserveModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header bg-info text-white">
<h3 class="modal-title">Reserve a Campsite</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<form>
<div class="form-group">
<div class="col-12 col-sm-10">
<label for="numCampers">Number of Campers</label>
<select class="form-control align-items-right" id="numCampers">
<option value="">Select...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
<div class="form-group">
<div class="col col-12 col-sm-10 mb-4">
<label for="DateChampers">Date</label>
<input type="text" class="form-control" id="date" placeholder="mm/dd/yyyy">
</div>
</div>
<div class="form-group">
<div class="col col-12 col-sm-10 mb-4">
<button type="Search" class="btn btn-primary ">Search</button>
</div>
<div class="col col-12 col-sm-10 mb-4">
<button type="Cancel" class="btn btn-primary " data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
You forgot the Trigger button to launch the modal window
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha512-k78e1fbYs09TQTqG79SpJdV4yXq8dX6ocfP0bzQHReQSbEghnS6AQHE2BbZKns962YaqgQL16l7PkiiAHZYvXQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#reserveModal">
Launch demo modal
</button>
<div id="reserveModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header bg-info text-white">
<h3 class="modal-title">Reserve a Campsite</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<form>
<div class="form-group">
<div class="col-12 col-sm-10">
<label for="numCampers">Number of Campers</label>
<select class="form-control align-items-right" id="numCampers">
<option value="">Select...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
<div class="form-group">
<div class="col col-12 col-sm-10 mb-4">
<label for="DateChampers">Date</label>
<input type="text" class="form-control" id="date" placeholder="mm/dd/yyyy">
</div>
</div>
<div class="form-group">
<div class="col col-12 col-sm-10 mb-4">
<button type="Search" class="btn btn-primary ">Search</button>
</div>
<div class="col col-12 col-sm-10 mb-4">
<button type="Cancel" class="btn btn-primary " data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
I want to have an input text with 2 buttons beside of it in the modal footer, those 2 buttons must have the same height with the input text, how to show it properly?
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chatModal">
Launch demo modal
</button>
<!-- Modal -->
<div id="chatModal" class="modal fade" data-coreui-backdrop="static" data-coreui-keyboard="false" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header bg-gradient-success">
<h5 class="modal-title" id="modal_title">Chat</h5>
</div>
<div class="modal-body">
<div class="alert alert-info" role="alert">We are working on it, please try again later</div>
<div class="mb-3">
</div>
</div>
<div class="modal-footer">
<div class="row justify-content-lg-between">
<div class="col-md-8">
<input class="form-control" id="message" type="text" name="message" maxlength="1024" placeholder="Message" required />
</div>
<div class="col-md-2 text-right">
<button type="button" class="btn btn-primary">Send</button>
</div>
<div class="col-md-2 text-right">
<button id="btnChatClose" onclick="hideChatModal();" type="button" class="btn btn-secondary" data-dismiss="modal">Exit</button>
</div>
</div>
</div>
</div>
</div>
</div>
Add tag wrap 2 button and set d-flex justify-content-center:
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chatModal">
Launch demo modal
</button>
<!-- Modal -->
<div id="chatModal" class="modal fade" data-coreui-backdrop="static" data-coreui-keyboard="false" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header bg-gradient-success">
<h5 class="modal-title" id="modal_title">Chat</h5>
</div>
<div class="modal-body">
<div class="alert alert-info" role="alert">We are working on it, please try again later</div>
<div class="mb-3">
</div>
</div>
<div class="modal-footer">
<div class="d-flex flex-row justify-content-lg-between">
<div class="col-md-8 mx-5">
<input class="form-control" id="message" type="text" name="message" maxlength="1024" placeholder="Message" required />
</div>
<div class="d-flex justify-content-lg-center">
<div class="text-right">
<button type="button" class="btn btn-primary">Send</button>
</div>
<div class="col-md-1 text-right">
<button id="btnChatClose" onclick="hideChatModal();" type="button" class="btn btn-secondary" data-dismiss="modal">Exit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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>
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>
I am trying to submit my modal title as post data, however it isn't being sent.
I have given the element a name attribute. Elements in the modal body are submitting as I would expect. Trying to submit the element whose name is "editModalTitle" below
HTML:
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<form action="/editItem" method="post" id ="editModalForm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" name="eModalTitle"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Quantity:</label>
<div class="row">
<div class="col">
<select class="form-control" id="qtSelect">
<option>Set to</option>
<option>Add</option>
<option>Subtract</option>
</select>
</div>
<div class="col" id= "qtD">
<input type="text" class="form-control" id="qt" name="quantityTB" placeholder="Quantity">
</div>
</div>
</div>
<div class="form-group" id="prD">
<label>Price:</label>
<input type="text" class="form-control" id="pr" name="priceTB" placeholder="Enter new price here...">
</div>
<div class="form-group">
<label>Notes:</label>
<div class="row">
<div class="col">
<select class="form-control" id="ntSelect">
<option>Set notes to:</option>
<option>Add to notes:</option>
</select>
</div>
<div class="col">
<input type="text" class="form-control" id="ntInput" name="notesTB"placeholder="Enter notes here...">
</div>
</div>
</div>
<div class="form-group">
<label>Location:</label>
<input type="text" class="form-control" id="loc" name="locationTB" placeholder="Enter new location here...">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" id="eSvBtn" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
Form data here
Edit 1: Added full html for modal.
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<form action="/editItem" method="post" id ="editModalForm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" name="eModalTitle"></h5>
<!-- hidden value for modal title to post -->
<input type="hidden" id="Modal_title_to_post" name="Modal_title_to_post" value="eModalTitle">
<!-- hidden value for modal title to post -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Quantity:</label>
<div class="row">
<div class="col">
<select class="form-control" id="qtSelect">
<option>Set to</option>
<option>Add</option>
<option>Subtract</option>
</select>
</div>
<div class="col" id= "qtD">
<input type="text" class="form-control" id="qt" name="quantityTB" placeholder="Quantity">
</div>
</div>
</div>
<div class="form-group" id="prD">
<label>Price:</label>
<input type="text" class="form-control" id="pr" name="priceTB" placeholder="Enter new price here...">
</div>
<div class="form-group">
<label>Notes:</label>
<div class="row">
<div class="col">
<select class="form-control" id="ntSelect">
<option>Set notes to:</option>
<option>Add to notes:</option>
</select>
</div>
<div class="col">
<input type="text" class="form-control" id="ntInput" name="notesTB"placeholder="Enter notes here...">
</div>
</div>
</div>
<div class="form-group">
<label>Location:</label>
<input type="text" class="form-control" id="loc" name="locationTB" placeholder="Enter new location here...">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" id="eSvBtn" class="btn btn-primary">Save changes</button>
</div>
</div>
</form>
</div>
</div>
Updated code with hidden value for the modal title :)