I want to validate my first name and last name input fields in a modal. If it's empty, it will span a message "The field is required!" colored in red.
The problem I am facing is my script isn't validating the fields.
Please help.
$(document).ready(function() {
$('#btn').click(function(e) {
var fieldIDArray = [$('#firstName', '#lastName')];
var spanIDArray = [$('#firstNameRequired',
'#lastNameRequired')];
for (i = 0; i < fieldIDArray.length; i++) {
if (!fieldIDArray[i].val()) {
e.preventDefault();
fieldIDArray[i].closest('.form-group')
.removeClass('has-success').addClass(
'has-error');
spanIDArray[i].show();
} else {
fieldIDArray[i].closest('.form-group')
.removeClass('has-error').addClass(
'has-success');
spanIDArray[i].hide();
}
}
});
});
.requiredField {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Modal FOrm</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/form-validation.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>J2EE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../../js/applicantFormValidation.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/style.css">
</head>
<body>
<a href="# " data-toggle="modal"
data-target="#RegFormModal" class="underline inputLabel">
Open Form Modal</a>
<div class="container">
<!-- Modal -->
<div class="modal fade" id="RegFormModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<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" id="myModalLabel ">My Modal</h4>
</div>
<!-- Modal Body -->
<div class="modal-body ">
<form id="applicationForm" name="applicationForm" role="form">
<!--action="ApplicationFormCheck" method="POST"> -->
<div class="form-group row">
<label for="firstName" class="col-md-2">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="firstName"
placeholder="Enter First Name" name="firstName" />
</div>
<div class="col-md-4">
<span class="requiredField" id="firstNameRequired" style="display:none;">This field is Required!</span>
</div>
</div>
<div class="form-group row">
<label for="lastName" class="col-md-2">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="lastName"
placeholder="Enter Last Name" name="lastName" />
</div>
<div class="col-md-4">
<span class="requiredField" id="lastNameRequired" style="display:none;">This field is Required!</span>
</div>
</div>
<div style="text-align: center;">
<button id="btn" type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
You are creating a 2d array, no need of that just declare like var fieldIDArray = [$('#firstName'), $('#lastName')]; and var spanIDArray = [$('#firstNameRequired'),$('#lastNameRequired')];
Working snippet:
$(document).ready(function() {
$('#btn').click(function(e) {
var fieldIDArray = [$('#firstName'), $('#lastName')]; //fix here
var spanIDArray = [$('#firstNameRequired'),
$('#lastNameRequired')
]; //fix here
for (i = 0; i < fieldIDArray.length; i++) {
if (!fieldIDArray[i].val().length) {
e.preventDefault();
fieldIDArray[i].closest('.form-group')
.removeClass('has-success').addClass(
'has-error');
spanIDArray[i].show();
} else {
fieldIDArray[i].closest('.form-group')
.removeClass('has-error').addClass(
'has-success');
spanIDArray[i].hide();
}
}
});
});
.requiredField {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Modal FOrm</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/form-validation.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>J2EE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../../js/applicantFormValidation.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/style.css">
</head>
<body>
<a href="# " data-toggle="modal" data-target="#RegFormModal" class="underline inputLabel">
Open Form Modal</a>
<div class="container">
<!-- Modal -->
<div class="modal fade" id="RegFormModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss=m odal>
<span aria-hidden="true">×</span> <span class="sr-only ">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel ">My Modal</h4>
</div>
<!-- Modal Body -->
<div class="modal-body ">
<form id="applicationForm" name="applicationForm" role="form">
<!--action="ApplicationFormCheck" method="POST"> -->
<div class="form-group row">
<label for="firstName" class="col-md-2">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="firstName" placeholder="Enter First Name" name="firstName" />
</div>
<div class="col-md-4">
<span class="requiredField" id="firstNameRequired" style="display:none;">This field is Required!</span>
</div>
</div>
<div class="form-group row">
<label for="lastName" class="col-md-2">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="lastName" placeholder="Enter Last Name" name="lastName" />
</div>
<div class="col-md-4">
<span class="requiredField" id="lastNameRequired" style="display:none;">This field is Required!</span>
</div>
</div>
<div style="text-align: center;">
<button id="btn" type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
Related
I want user to fill the form and after filling it, if the form is compatible with Validations(there can't be a null value) I want to show user a "Successfull" notification. But in this code, when I click on save button , it doesn't check the validations even though I didn't fill the form but still pushes "Successfull" notification. How can check the validations in Javascript. What am I missing here because I'm terrible at Javascript?
<head>
<meta charset="utf-8">
<meta name="viewport">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<link rel="stylesheet" href="~/css/site.css />
<script defer src="~/js/site.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<form method="post" asp-action="Create" id="form" >
<div class="form-group">
<label asp-for="Order">Order</label>
<input asp-for="Order" class="form-control" id="Order" >
#Html.ValidationMessageFor(m=>m.Order,"")
<span asp-validation-for="#Model.Order" class="text-danger"></span>
</div>
</br>
<div class="btn btn-primary" id="btnSave">
<p1>Save</p1>
</div>
<div class="btn btn-primary" id="btnSave">
<button class="btn btn-primary" style="visibility:visible" data-toggle="modal" data-target="#Modal1"> Button</button>
</div>
</form>
<div id="Modal1" 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"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
New product has been saved successfully.
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
//function checkFormValidateOrNot() {
// if ($(".field-validation-error").length > 0) {
// return false;
// }
// $(".form-control").each(function () {
// if ($(this).attr("data-val") == "true" && $(this).val() == "" &&
// $(this).is("select") == false) {
// return false;
// }
// });
// return true;
//}
$("#btnSave").click(function () {
//if (checkValidateOrNot() == true) {
//}
$('#Modal1').modal('show');
});
})
})
</script>
</body>
1.You can use validate() method which exists in jquery.validate.js to validate the form.
2.It is better for you to use the default version bootstrap and jquery in wwwroot folder. Otherwise, the modal will not display due to the compatibility of the nuget packages.
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
Whole working demo:
<head>
<meta charset="utf-8">
<meta name="viewport">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<link rel="stylesheet" href="~/css/site.css />
<script defer src="~/js/site.js"></script>
//modify here...
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<form method="post" asp-action="Create" id="form" >
<div class="form-group">
<label asp-for="Order">Order</label>
<input asp-for="Order" class="form-control" id="Order" >
#Html.ValidationMessageFor(m=>m.Order,"")
<span asp-validation-for="#Model.Order" class="text-danger"></span>
</div>
</br>
<div class="btn btn-primary" id="btnSave">
<p1>Save</p1>
</div>
<div class="btn btn-primary" id="btnSave">
<button class="btn btn-primary" style="visibility:visible" data-toggle="modal" data-target="#Modal1"> Button</button>
</div>
</form>
<div id="Modal1" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="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">
New product has been saved successfully.
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
$("#btnSave").click(function () {
var validator = $("#form").validate();
var flag = validator.form();
if (flag) {
$('#Modal1').modal('show');
}
});
})
})
</script>
</body>
i am very much poor in css.in my project i need a popup window.thats why i search on net and found/known about bootstrap modal. and trying to work with it.but i am facing problem. there are a lots of problem in stackoverflow already.but i thing my problems is different.thats why i am asking again?
problem=>
look above the box is appearing.and gone again without my instruction/without dowing anything.
my html=>
<div class="center"><button data-toggle="modal" data-target="#squarespaceModal" class="btn btn-primary center-block">Click Me</button></div>
<!-- line modal -->
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">My Modal</h3>
</div>
<div class="modal-body">
<!-- content goes here -->
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
and my css=>
<style type="text/css">
.center {
margin-top: 50px;
}
.modal-header {
padding-bottom: 5px;
}
.modal-footer {
padding: 0;
}
.modal-footer .btn-group button {
height: 40px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border: none;
border-right: 1px solid #ddd;
}
.modal-footer .btn-group:last-child > button {
border-right: 0;
}
</style>
and my head section=>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="/Content/img/tsms/financial-literacy.gif" sizes="32x32">
<title>
AdminTSMS
</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="/Content/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/css/select2.css" rel="stylesheet"/>
<link href="/Content/css/datepicker3.css" rel="stylesheet"/>
<link href="/Content/css/AdminLTE.css" rel="stylesheet"/>
<link href="/Content/bootstrap-dialog.css" rel="stylesheet"/>
<link href="/Content/css/font-awesome.min.css" rel="stylesheet"/>
<link href="/Content/css/icheck/blue.min.css" rel="stylesheet"/>
<link href="/Content/Custom_Admin.css" rel="stylesheet"/>
<link href="/Content/css/skins/skin-blue.css" rel="stylesheet"/>
<link href="/Content/datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="/Content/js/plugins/jquery/jquery-2.2.4.js"></script>
<script src="/Content/js/plugins/bootstrap/bootstrap.js"></script>
<script src="/Content/js/plugins/fastclick/fastclick.js"></script>
<script src="/Content/js/plugins/slimscroll/jquery.slimscroll.js"></script>
<script src="/Content/js/plugins/select2/select2.full.js"></script>
<script src="/Content/js/plugins/moment/moment.js"></script>
<script src="/Content/js/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="/Content/js/plugins/icheck/icheck.js"></script>
<script src="/Content/js/plugins/inputmask/jquery.inputmask.bundle.js"></script>
<script src="/Content/js/app.js"></script>
<script src="/Content/js/init.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/Custom_Login.js"></script>
<script src="/Scripts/MyCustomFile.js"></script>
<script src="/Content/datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="/Content/datetimepicker/js/bootstrap-datetimepicker.fr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
i am working on a project thats why there are lots of unnecessary staff.for better understanding i am giving you my full project head section.because i think the head section/links is one of the reason for the problem.css/bootstrap expert ? please help me.
Please try this:
.center {
margin-top: 50px;
}
.modal-header {
padding-bottom: 5px;
}
.modal-footer {
padding: 0;
}
.modal-footer .btn-group button {
height: 40px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border: none;
border-right: 1px solid #ddd;
}
.modal-footer .btn-group:last-child > button {
border-right: 0;
}
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="center"><button data-toggle="modal" data-target="#squarespaceModal" class="btn btn-primary center-block">Click Me</button></div>
<!-- line modal -->
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">My Modal</h3>
</div>
<div class="modal-body">
<!-- content goes here -->
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to use datepicker from http://www.eyecon.ro/bootstrap-datepicker/?utm_source=twitterfeed&utm_medium=twitter.
Question updated to include complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Calendar</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="navbar.css">
<link rel="stylesheet" href="js/datepicker/css/datepicker.css">
<script src="js/datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="js/fullcalendar-2.0.2/fullcalendar.css">
<link rel="stylesheet" href="js/fullcalendar-2.0.2/fullcalendar.print.css">
<script src="js/fullcalendar-2.0.2/lib/jquery.min.js"></script>
<script src="js/fullcalendar-2.0.2/lib/moment.min.js"></script>
<script src="js/fullcalendar-2.0.2/fullcalendar.min.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script type='text/javascript'>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
</script>
</head>
<body>
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Calendar</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Bookings <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Add</li>
<li>Delete</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Admin</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div>
<!-- Modal -->
<script>
$('#dp1').datepicker({
format: "MM-DD-YYYY",
autoclose: true
});
</script>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<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" id="myModalLabel">Form</h4>
</div>
<div class="modal-body">
<!-- Form -->
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputForename" class="col-sm-2 control-label">Forename</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputForename" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputSurname" class="col-sm-2 control-label">Surname</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSurname" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputBadge" class="col-sm-2 control-label">Badge</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputBadge" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputStartDate" class="col-sm-2 control-label">Start Date</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="dp1">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Main component to show the calendar -->
<div id="calendar"></div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
Is there something wrong in what I am doing here? It seems ok based on the examples at http://www.eyecon.ro/bootstrap-datepicker/?utm_source=twitterfeed&utm_medium=twitter.
You might need to wait until the page is loaded, then initialize the date picker
<script>
jQuery(document).ready( function($){
$('#dp1').datepicker({
format: "MM-DD-YYYY",
autoclose: true
});
});
</script>
Nothing happens when I press the button with the id test. I do get an error message in the debug of my console though that states:
ReferenceError: Can't Find variable '$'.
I believe this is a jQuery error, but I already have it imported. Here's the code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.18.min.js"></script>
<script>
$("#test").click(function() {
alert("Handler for .click() called.");
});
</script>
<title>Panic App</title>
<!-- Bootstrap core CSS -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/cover.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="loginModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="text-center">Login</h1>
</div>
<div class="modal-body">
<form class="form col-md-12 center-block">
<div class="form-group">
<input type="text" value="b" class="form-control input-lg" id="username" placeholder="Email">
</div>
<div class="form-group">
<input type="password" value="a" class="form-control input-lg" id="password"placeholder="Password">
</div>
<div class="form-group">
<button class="bn btn-primary btn-lg btn-block" id="test" value="Sign In">Sign In</button>
<span class="pull-right">Register</span><span>Need help?</span>
</div>
</form>
</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>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Panic</h3>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading">Stay Safe.</h1>
<p class="lead">Panic is a beautiful emergency notification system like no other. Using the power of cloud computing, Panic innovates in ways you've never seen.</p>
<p class="lead">
<button class="btn btn-lg btn-default" data-toggle="modal" data-target="#loginModal">Sign Up.</button>
</p>
</div>
<div class="mastfoot">
<div class="inner">
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/docs.min.js"></script>
</body>
</html>
You try to call $ on line 11 of that source code (and maybe also in the script on line 9).
You don't include jQuery until the very end.
You have to include jQuery before you try to use it.
Move your code after the jQuery initialization:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/docs.min.js"></script>
<script>
$("#test").click(function() {
alert("Handler for .click() called.");
});
</script>
You need to include the jQuery library above your script. Also your script will work only if you keep it inside the $(document).ready() function.
I have the following code. I don't know why the modal pop up not popping up when clicking on the login button. I checked and confirmed that data-target and data-toggle are set correctly. Below is my code.
<!DOCTYPE html>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="s" uri="/struts-tags" %>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Ritesh Sangwan">
<title>ossoc | Create account</title>
<link rel="stylesheet" href="./js/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="./css/style.css" type="text/css" />
<link rel="stylesheet" href="./css/bootstrap.css" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./js/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="./js/jqwidgets/jqxvalidator.js"></script>
<script type="text/javascript" src="./js/jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
</head>
<body>
<!------ Navabar start --->
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<a class="navbar-brand" href="./index.jsp">ossoc</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="navbar-btn">
<button id="loginbutton" type="button" class="btn btn-primary" data-target="#registerlogin" data-toggle="modal"><i class="glyphicon glyphicon-log-in"></i>Login</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!---- navbar end--->
<div class="container marketing">
<div class="jumbotron-modified well">
<div class="container">
<form id="register" action="register" role="form" class="form-horizontal" method="post">
<div class="form-group">
<label class="col-sm-2 control-label">First name:</label>
<div class="col-sm-4">
<input id="fnameInput" name="registerfname" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Last name:</label>
<div class="col-sm-4">
<input name="registerlname" type="text" class="form-control" id="lnameInput" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email:</label>
<div class="col-sm-4">
<input name="registeremail" class="form-control" id="emailInput" placeholder="someone#example.com" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="passwordInput" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Confirm password:</label>
<div class="col-sm-4">
<input name="registerpassword" type="password" class="form-control" id="passwordConfirmInput" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<div class="checkbox">
<div id="acceptInput">
<input type="checkbox" />
I accept the terms and conditions.
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<button id="submit" class="btn btn-success"><i class="glyphicon glyphicon-plus" style="margin-right: 5px"></i>Create account</button>
</div>
</div>
</form>
</div>
</div>
<footer>
<p class="pull-right">Back to top</p>
<p>© 2013 Ritesh Sangwan. · Privacy · Terms</p>
</footer>
</div>
<!--- Model start-->
<div class="modal fade" id="registerlogin" 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">x</button>
<h3>Login</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" action="login" method="post">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input name="email" type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input name="password" type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="pull-right">
<button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-log-in" style="margin-right: 5px"></i>Log in</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!---model end ---->
</body>
</html>
Try including jQuery before Bootstrap. Your bootstrap.min.js is before your jquery.
Bootstrap Modal doesn't show