I am having a subscription form where the person fill out name and e-mail address. When the person hit "Compete Now" there is coming a pop up. Here you need to mark if you are having a workshop and your postnumber.
The form is working how it should.
But I would like that the e-mail and firstname is showing in the modalbox aswell like this:
Does anybody have a good suggestion to do this? I do not have access to the backend code, so the code has to bade in the front-end.
There is a working JSFiddle here:
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').focus();
});
$('#btn-subscribe').on('click', function() {
let navn = $('#navn').val();
let email = $('#email').val();
let workshop = $('#mce-VAERKSTED').val();
let zip = $('#mce-ZIP').val();
window.alert(navn + ' - ' + email + ' - ' + workshop + ' - ' + zip);
});
.newsletter-block {
background-color: #7c7c7c;
}
.newsletter-title h2 {
padding-bottom: 24px;
font-size: 2em;
}
.newsletter-subtitle {
font-size: 16px;
}
.padd-70-70 {
padding-top: 70px;
padding-bottom: 70px;
}
.subscribe-form {
width: 100%;
}
.subscribe-form .form-control {
border-radius: 0px;
}
.subscribe-form button {
border: 2px solid #e4a228;
background: #e4a228;
text-transform: uppercase;
color: #fff;
text-align: center;
width: 100%;
padding: 0.4em;
}
<div class="main-wraper padd-70-70 newsletter-block">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 d-flex justify-content-end">
<div class="newsletter-title">
<h2 class="color-white">Join Suite Vacations to Get FREE <br>Travel News and Special Offers!</h2>
<h4 class="newsletter-subtitle color-white underline">Secret Deals - for our subscribers only...Besides it's FREE</h4>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 d-md-flex justify-content-start ">
<form class="subscribe-form" onsubmit="return false;">
<div class="form-group subscribe-input input-style-1 fl low-pad">
<input type="text" id="navn" class="form-control" required="true" placeholder="Navn">
</div>
<div class="form-group subscribe-input input-style-1 fl low-pad">
<input type="email" id="email" class="form-control" required="true" placeholder="Din e-mail">
</div>
<button type="submit" class="c-button b-60 bg-red-3 hv-red-3-o fr btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"><span>Compete Now</span></button>
</form>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="mc-field-group input-group">
<strong>Workshop <span class="asterisk">*</span></strong>
<ul>
<li><input type="radio" value="Nej" name="VAERKSTED" id="mce-VAERKSTED-0"><label for="mce-VAERKSTED-0">Nej</label></li>
<li><input type="radio" value="Ja" name="VAERKSTED" id="mce-VAERKSTED-1"><label for="mce-VAERKSTED-1">Ja</label></li>
</ul>
</div>
<div class="mc-field-group size1of2">
<label for="mce-ZIP">Postcode <span class="asterisk">*</span></label>
<input type="number" name="ZIP" class="required" value="" id="mce-ZIP">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btn-subscribe" class="btn btn-primary">Subscribe</button>
</div>
</div>
</div>
</div>
Since this is just pure JS and HTML, you can do this
$('#myModal').on('shown.bs.modal', function() {
$('#navnModal').val($('#navn').val());
$('#emailModal').val($('#email').val());
$('#myInput').focus();
});
and
<div class="modal-body">
<input type="text" id="navnModal" class="form-control" placeholder="Navn" disabled>
<input type="email" id="emailModal" class="form-control" placeholder="Din e-mail" disabled>
...
Related
I have the following html
<div class="modal inmodal" id="handleUserModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated fadeIn">
<form class="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add user</h4>
</div>
<div class="modal-body">
<div class="form-group row profile_field">
<label class="col-lg-3 col-form-label">First Name</label>
<div class="col-lg-9">
<input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control">
</div>
</div>
<div class="form-group row reset_password_field mb-0 mt-4">
<div class="col-lg-offset-2 col-lg-10">
<div class="i-checks reset_password_check" id="password_check">
<label> <input id="passresetcheck" type="checkbox" /> Reset password </label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveButton">Save</button>
</div>
</form>
</div>
</div>
</div>
Now i have tried to the following to uncheck
using the id of the input
$('passresetcheck').prop('checked',false)
also
$('passresetcheck').attr('checked',false)
using modal id
$("#handleUserModal .modal-body").find('input:radio, input:checkbox').prop('checked', false);
Finally what worked for me, is also to remove the checked class
// this is for the input
$('#passresetcheck').prop('checked', false);
// this is to remove checked class
$("#password_check div").each(function(index,elem){
if (elem.classList.contains("checked")) {
elem.classList.remove("checked");
}
})
My observation what happens to html when we check
This is without any checking
<div class="form-group row reset_password_field mb-0 mt-4">
<div class="col-lg-offset-2 col-lg-10">
<div class="i-checks reset_password_check" id="password_check">
<label> <input id="passresetcheck" type="checkbox" /> Reset password </label>
</div>
</div>
</div>
after checking it gets converted like this, it adds a class checked in the div inside i-checks
<div class="i-checks reset_password_check" id="password_check">
<label class="">
<div class="icheckbox_square-green checked" style="position: relative;">
<input id="passresetcheck" type="checkbox" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></ins>
</div>
Reset password
</label>
</div>
Always check first if you capture something or not. In your case $('passresetcheck') is undefined.
You need to search by ID using # symbol like here $('#passresetcheck'):
const checkbox = $('#passresetcheck')
checkbox.prop('checked', false)
setTimeout(() => checkbox.prop('checked', true), 2000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal inmodal" id="handleUserModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated fadeIn">
<form class="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add user</h4>
</div>
<div class="modal-body">
<div class="form-group row profile_field">
<label class="col-lg-3 col-form-label">First Name</label>
<div class="col-lg-9">
<input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control">
</div>
</div>
<div class="form-group row reset_password_field mb-0 mt-4">
<div class="col-lg-offset-2 col-lg-10">
<div class="i-checks reset_password_check" id="password_check">
<label> <input id="passresetcheck" type="checkbox" /> Reset password </label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveButton">Save</button>
</div>
</form>
</div>
</div>
</div>
I want to show a modal in my document when I click on an element. I am able to make it work with default bootstrap 'data-toggle' and 'data-target' attributes. But when I try to achieve the same effect with JavaScript, the modal is not showing up. Here is the relevant code:
<span class="navbar-text">
<a href="" id="login">
<span class="fa fa-sign-in fa-lg"></span>
Login
</a>
</span>
<script>
$(document).ready(function () {
$("#login").click(function () {
$("#loginModal").modal('show');
});
});
</script>
It just appears to fade in the modal for a split second but it does not show up.
Below is the modal div which I am trying to show:
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3"
placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3"
placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me
</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-2">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>
Your code is correct, but you have not provided any HTML. I can only assume you followed the guides below to set up your site.
Edit: Since you provided your HTML, your problem is your href is empty, so it is going to an empty page. Change the anchor href to # or make it a button like in my full example below.
<a href="#" id="login">
Here is a perfect explanation: href must not reload. You can even throw in an onClick event for good measure.
Your fixed code
$(function() {
$("#login").click(function() {
$("#loginModal").modal('show');
});
});
.navbar-text {
display: block;
border: thin solid #007bff;
margin: 1em;
padding: 0.5em;
border-radius: 0.5em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<span class="navbar-text">
<a href="#" id="login">
<span class="fa fa-sign-in fa-lg"></span> Login
</a>
</span>
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3" placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-2">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>
Full button example
The Modal documentation has multiple examples of windows. I combined four documentation examples below to create a usable "Log In" function for a Bootstrap site.
Important steps
Ensure your button id is "login"
Ensure your modal window id is "loginModal"
Ensure your modal window is laid-out correctly
Ensure your modal window has the correct fade class
Resources
https://getbootstrap.com/docs/4.0/getting-started/download/
https://getbootstrap.com/docs/4.0/examples/pricing/
https://getbootstrap.com/docs/4.0/components/modal/
https://getbootstrap.com/docs/4.0/components/forms/
$(function() {
$("#login").click(function() {
$("#loginModal").modal('show');
});
});
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.container {
max-width: 960px;
}
.pricing-header {
max-width: 700px;
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav>
<a class="btn btn-outline-primary" id="login" href="#">
<span class="fa fa-sign-in fa-lg"></span> Log In
</a>
</div>
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<h1 class="display-4">Pricing</h1>
<p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.</p>
</div>
<div id="loginModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Log In</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" value="email#example.com">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Log In</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I'm trying to validate some inputs available in a modal:
<div id="modal-section" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Manage</h3>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="tim-icons icon-simple-remove"></i>
</button>
</div>
<div class="modal-body">
<div class="modal-message alert" style="display:none"></div>
<form>
<fieldset>
<legend>Details</legend>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="form-group">
<label class="control-label">name</label>
<input type="text" class="required form-control black-content">
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>
Informations
</legend>
<div id="questions-container">
<div class="card" data-id="1">
<div class="card-body">
<div class="row">
<div class="col-xs-12 col-sm-8">
<div class="form-group">
<label for="question-name" class="control-label">description *</label>
<input type="text" class="required form-control" data-id="1">
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" id="validate" class="btn btn-primary">save</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
</div>
</div>
</div>
When I press the button validate this function will fire:
var missingRequired = false;
$('#modal-section .required').each(function () {
$(this).closest('.form-group').removeClass('has-error');
if ($(this).val() == '' || $(this).val() == undefined) {
$(this).closest('.form-group').addClass('has-error');
missingRequired = true;
}
});
Essentially, this will check all the input that have the required class; only the input name will have the red, the other inputs available in the questions-container will not.
If I look at the HTML I can see that the class has-error is added also to the input available in questions-container but the inputs aren't colored.
The CSS available on the element I have:
theme class:
.white-content .card:not(.card-white) label:not(.btn) {
color: #344675;
}
bootstrap class (commented in the question-container element)
.has-error .form-control-feedback, .has-error .control-label {
color: #ec250d;
}
Why is this happening?
From what i can tell with the information provided, your error CSS rule is not specific enough. Try changing it to:
.card .form-group.has-error label.control-label {
color: #ec250d;
}
I am trying to get a modal pop-up window from another modal pop-up
window. when i click the link from the first pop-up window, the second
pop-up window is opening, but the first one not getting closed.
I tried but not working properly.
Data target is not work because List item theme JavaScript is conflict.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
function showpopup(id)
{
$("#textid").val(id);
$("#myModal").modal('show');
//alert();
}
function forgotpopup()
{
$("#myModal").modal('hide');
$("#ForGot").modal('show');
}
</script>
<article>
<div id="main-wrapper" class="container">
<a class="btn btn-primary" value="" data-toggle="modal" class="btn btn-primary" onclick="showpopup(<?php echo $fetch_package['cID'];?>);" style=" background:#ee8f22 ;">CLICK HERE</a><br>
</div>
</article>
<div class="container">
<div class="modal fade" id="myModal" role="dialog" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<center><h4 class="modal-title">Login</h4></center>
</div>
<div class="modal-body" style="padding:30px 40px;">
<form role="form" method="post">
<div class="form-group">
<label for="usrname" style="font-weight: normal; font-size: 14px;">Username</label>
<input type="text" class="form-control" id="email_id" placeholder="Enter email" name="email_id" required>
</div>
<div class="form-group">
<label for="psw" style="font-weight: normal; font-size: 14px;"> Password </label>
<input type="password" class="form-control" name="password" id="password" placeholder="Enter password" required>
</div>
<div class="form-group pull-left" style="width:100%; border:0px solid ;">
<input type="checkbox" >
<label style="font-weight: normal; font-size: 14px; margin-top:-27px; margin-left:23px;"> Remember me</label>
</div>
<center>
<button type="submit" class="btn" style="margin-top:15px; background:#ee8f22 ;color:#fff; " name="submit">LOGIN</button>
<p> Forgot Password </p>
<p>Not a member? <a href="#" >Sign Up</a></p>
</center>
<input type="hidden" name="txtid" id="textid" value="">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ForGot" 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" style="text-align:center;">Forgot Password</h4>
</div>
<div class="modal-body">
<form role="form" method="post" id="reused_form">
<h6>Enter your email associated with your account to get link to reset the password.</h6>
<input type="text" required>
</form>
</div>
</div>
</div>
</div>
</div>
I am using Spring Boot and thymeleaf for my web application. For implementing Forgot password feature I am having modal in login.html.After submitting the form to controller, to display success or error alerts on modal I used AJAX call. But the alerts are displayed on login page not on modal. Below is the code..
LoginController.java
#RequestMapping(value = "/forgotPassword", method = RequestMethod.POST)
public ModelAndView processForgotPasswordForm(ModelAndView modelAndView, #RequestParam("email") String email) {
UserDetails userDetails = userService.findUserByEmail(email);
if (null == userDetails) {
modelAndView.addObject("errorMessage", "Entered email doesn't exist in records");
modelAndView.setViewName("login");
return modelAndView;
}
boolean generatedToken = userService.generatePassResetToken(userDetails);
if (generatedToken) {
modelAndView.addObject("successMessage", Constants.PASSWORD_EMAIL_LINK);
}
modelAndView.setViewName("login");
return modelAndView;
}
app.js
$(function(){
$("#passForgot").on('submit',function(e){
e.preventDefault();
$form= $(this);
$.post("forgotPassword", $(this).serialize(),function(data){
$feedback = $("<div>").html(data).find(".form-feedback").hide();
$form.prepend($feedback)[0].reset();
$feedback.fadeIn(500);
});
});
})
login.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Login Page</title>
<link rel="stylesheet" type="text/css" th:href="#{/css/login.css}" />
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script th:src="#{/js/app.js}"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.modal-footer {
border-top: 0px;
}
</style>
</head>
<body>
<div class="container">
<img th:src="#{/images/login.jpg}" class="img-responsive center-block"
width="300" height="300" alt="Logo" />
<form th:action="#{/login}" method="POST" class="form-signin">
<h3 class="form-signin-heading" th:text="Welcome"></h3>
<br /> <input type="text" id="userName" name="userName"
required="required" th:placeholder="Username" class="form-control" />
<br /> <input type="password" th:placeholder="Password"
required="required" id="password" name="password"
class="form-control" /> <br />
<div>
<input type='checkbox' name="remember-me-param" /> Remember Me<br />
</div>
<!-- Forgot Password?<br> -->
<br>
<div align="center" th:if="${param.error}">
<p style="font-size: 20; color: #FF1C19;">Username or Password
invalid, please verify</p>
</div>
<button class="btn btn-lg btn-primary btn-block" name="Submit"
value="Login" type="Submit" th:text="Login"></button>
<br> <br>
<div class="container">
<a href="#" data-target="#pwdModal" data-toggle="modal">Forgot
Password?</a>
</div>
</form>
</div>
<!--modal-->
<form action="forgotPassword" id="passForgot" method="post">
<div id="pwdModal" class="modal fade" tabindex="-1" role="dialog"
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>
<h1 class="text-center">LOGO</h1>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="text-center">
<div th:if="${successMessage}"
class="alert alert-success alert-dismissible form-feedback" role="alert">
<button type="button" class="close" data-dismiss="alert"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div th:text=${successMessage}></div>
</div>
<div th:if="${errorMessage}"
class="alert alert-danger alert-dismissible form-feedback" role="alert">
<button type="button" class="close" data-dismiss="alert"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div th:text=${errorMessage}></div>
</div>
<div
style="font-size: 17px; line-height: 21px; margin-top: 5px; padding-bottom: 14px; color: #333333;"
align="center">
To reset your password, enter the email <br>address associated
with your account below.<br>
</div>
<div class="panel-body">
<fieldset>
<div class="form-group input-group has-feedback">
<span class="input-group-addon"> <span
class="glyphicon glyphicon-envelope "></span>
</span> <input type="email" placeholder="Email Address"
class="form-control" name="email"
required /> <span
class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
<input class="btn btn-lg btn-primary btn-block"
value="Send Email" type="submit">
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Login Page with Modal
Error alerts displaying on login form but not on modal
What's wrong with this code ?