How it will work? I want to know how javascript connect with html and div tag is correct. I didn't get which code is doing mistake.
<script type="text/javascript">
function validate()
{
if (document.myForm.name.value="") {
alert("should be fill");
document.myForm.name.focus();
return false;
}
return(true);
}
</script>
.container{background-color:gray;
width:550px;
height:650px;
align-content:center;
background: rgba(255, 255, 255, 0.1);}
h1{text-align:center;
color:darkslategray;
text-decoration-line:underline;}
input{width:100%}
#button{text-align:right;}
body {background-image:url("bg1.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css\bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css\custom.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<title>
login form
</title>
</head>
<body>
<div class="container">
<form method="post" name="myForm" onsubmit="return(validate());" data-toggle="validator">
<div class="form-group">
<h1><b><u>
Create an account
</u>
</h1>
<div class="row">
<div class="col-md-6">
First Name:
<input type="text" name="name" id="" value="" placeholder="First Name">
<span id="fnameerror" class="text-danger">
</span>
</div>
<div class="col-md-6">
Last Name:
<input type="text" name="lastname" id="lastname" placeholder="Last Name" >
<span id="lnameerror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
Company Name:
<input type="text" name="companyname" id="" placeholder="Company Name">
<span id="" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
Street address:
<input type="text" name="streetaddress" id="address" placeholder="Street address">
<span id="adderror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
Town/City:
<input type="text" name="city" id="city" placeholder="Town/City">
<span id="cityerror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
State/Country:
<input type="text" name="state" id="state" placeholder="State/Country">
<span id="stateerror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
Postcode/Zip:
<input type="text" name="zip" id="zip" placeholder="Postcode/Zip">
<span id="ziperror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
Phone:
<input type="text" name="Phone" id="phone" placeholder="Phone">
<span id="pherror" class="text-danger">
</span>
</div>
<div class="col-md-6">
Email:
<input type="emaill" name="Email" id="email" placeholder="Email">
<span id="emailerror" class="text-danger">
</span>
</div>
</div>
<div class="row">
<div class="col-md-1">
<input type="checkbox" name="checkbox" id="box" placeholder="">
<span id="boxerror" class="text-danger">
</span>
</div>
<div class="col-md-11">
Create an account
</div>
</div>
<div class="row" id="button">
<div class="col-md-12">
<button type="submit" value="submit">
<b>SignUp</b>
</button>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
you are using assignment operator in if (document.myForm.name.value = "")
Try with this code
function validate() {
if (document.forms["myForm"]["name"].value == "") {
alert("should be fill");
document.myForm.name.focus();
return false;
}
return (true);
}
You have missed equals to == in your comparison. For comparison is should be == double equals. Change it and it should work.
if (document.myForm.name.value == "") {
...
}
It seems that you haven't added the js file in the html file. Add the js file just above ending the body tag.
<script type="text/javascript" src="location to the file"><script>
Moreover in update the js code with:
function validate(e) {
e.preventDefault();
console.log(document.myForm.name.value);
if (document.myForm.name.value == "") {
alert("should be fill");
document.myForm.name.focus();
}
}
You also need to modify the form element.
<form method="post" name="myForm" onsubmit="validate(event);" data-toggle="validator">
Related
I am trying to create a form that will be enabled and disable depending on the checkbox tick mark.
<div class="row">
<div class="col-md-12">
<p>Is this client user</p>
<input
type="checkbox"
name="is_user"
id="is_user"
onclick="enableCreateUser()"
/>
</div>
</div>
<div class="row" id="user_register">
<div class="form-group row">
<div class="col-md-6">
<label class="" for="username">Username:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="username" id="" />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="" for="password">Password:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="password" name="password" id="" />
</div>
</div>
</div>
I am trying to make this javascript or jquery function that will allow me to disable or enable this portion with id="user_register".
Here is the code that I tried.
function enableCreateUser() {
if(document.getElementById("is_user").checked){
document.getElementById("user_register").disabled = true;
}
if(!document.getElementById("is_user").checked){
document.getElementById("user_register").disabled = flase;
}
}
Please help me complete this function. Thank you.
You can simply use classList with add and remove function to add custom class .disable_section to show disabled on your section.
Live Demo:
function enableCreateUser() {
if (document.getElementById("is_user").checked) {
document.getElementById("user_register").classList.add('disable_section')
} else {
document.getElementById("user_register").classList.remove('disable_section')
}
}
.disable_section {
pointer-events: none;
opacity: 0.4;
}
<div class="row">
<div class="col-md-12">
<p>Is this client user</p>
<input type="checkbox" name="is_user" id="is_user" onclick="enableCreateUser()" />
</div>
</div>
<div class="row" id="user_register">
<div class="form-group row">
<div class="col-md-6">
<label class="" for="username">Username:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="username" id="" />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="" for="password">Password:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="password" name="password" id="" />
</div>
</div>
</div>
If you want to disable the inputs specifically then you can simply assign ids to your inputs and disable them individually.
Live Demo
function enableCreateUser() {
if (document.getElementById("is_user").checked) {
document.getElementById("user_res").disabled = true;
document.getElementById("pass").disabled = true;
} else {
document.getElementById("user_res").disabled = false;
document.getElementById("pass").disabled = false;
}
}
<div class="row">
<div class="col-md-12">
<p>Is this client user</p>
<input type="checkbox" name="is_user" id="is_user" onclick="enableCreateUser()" />
</div>
</div>
<div class="row" id="user_register">
<div class="form-group row">
<div class="col-md-6">
<label class="" for="username">Username:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="username" id="user_res" />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="" for="password">Password:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="password" name="password" id="pass" />
</div>
</div>
</div>
function enableCreateUser() {
if (document.getElementById("is_user").checked) {
disableForm(true);
}
if (!document.getElementById("is_user").checked) {
disableForm(false);
}
}
function disableForm(flag) {
var elements = document.getElementsByClassName("form-control");
for (var i = 0, len = elements.length; i < len; ++i) {
elements[i].readOnly = flag;
elements[i].disabled = flag;
}
}
<div class="row">
<div class="col-md-12">
<p>Is this client user</p>
<input type="checkbox" name="is_user" id="is_user" onclick="enableCreateUser()" />
</div>
</div>
<div class="row" id="user_register">
<div class="form-group row">
<div class="col-md-6">
<label class="" for="username">Username:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="username" id="" />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="" for="password">Password:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="password" name="password" id="" />
</div>
</div>
</div>
use .hidden() for control div
function enableCreateUser() {
var status = document.getElementById("is_user").checked;
document.getElementById("user_register").hidden = status;
}
<div class="row">
<div class="col-md-12">
<p>Is this client user</p>
<input
type="checkbox"
name="is_user"
id="is_user"
onclick="enableCreateUser()"
/>
</div>
</div>
<div class="row" id="user_register">
<div class="form-group row">
<div class="col-md-6">
<label class="" for="username">Username:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="username" id="" />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="" for="password">Password:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="password" name="password" id="" />
</div>
</div>
</div>
You can do it like this :
NOTE : Remove onclick on checkbox.
<input type="checkbox" name="is_user" id="is_user" />
$('#is_user').on("change", function() {
if ($(this).is(":checked")) {
$('#user_register input').prop("disabled", true);
} else {
$('#user_register input').prop("disabled", false);
}
});
Check out this snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PURFECT MATCH</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,700;1,900&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript">
function enableCreateUser() {
var form_elements = document.getElementById("myForm").elements;
if (document.getElementById("is_user").checked){
for (var i = 0; i < form_elements.length; ++i)
form_elements[i].readOnly = true;
} else {
for (var i = 0; i < form_elements.length; ++i)
form_elements[i].readOnly = false;
}
}
</script>
</head>
<body onload="enableCreateUser();">
<div class="row">
<div class="col-md-12">
<p>Is this client user</p>
<input
type="checkbox"
name="is_user"
id="is_user"
onclick="enableCreateUser()"
/>
</div>
</div>
<div class="row" id="user_register">
<form id="myForm" >
<div class="form-group row">
<div class="col-md-6">
<label class="" for="username">Username:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="username" id="" />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="" for="password">Password:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="password" name="password" id="" />
</div>
</div>
</form>
</div>
</body>
</html>
I have added form having id myForm. In the JavaScript section, using this id function enableCreateUser() access the form and we iterates over the elements of the form, setting their read-only status based on the value of checkbox is_user.
To initialize form elements we calling function enableCreateUser() just after the loading of document is done using onload in <body>.
I know that this might be an old question, but you can also use an event listener for the checkbox, and simply toggle the attribute disabled on and off for the desired input. Like this:
yourCheckbox.addEventListener('change', () => {
yourInput.toggleAttribute('disabled');
});
Using the code you posted, it might look like this:
const yourCheckbox = document.querySelector('#is_user');
yourCheckbox.addEventListener('change', () => {
const yourInput = document.querySelector('#user_register');
yourInput.toggleAttribute('disabled');
});
I am working on a Registration Form. I have applied Jquery with the help of ID of the element. When I click the submit button I also got glyphicon-ok at submit button, whick i dont want to happen. Simply copy the code and past it in html file on your PC....
<html>
<head>
<title>Form Validation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function validateText(id)
{
if($("#"+id).val()==null || $("#"+id).val()=="")
{
var div = $("#"+id).closest("div");
div.removeClass("has-success");
$("#glypcn"+id).remove();
div.addClass("has-error has-feedback");
div.append('<span id="glypcn'+id+'" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>')
return false;
}
else
{
var div = $("#"+id).closest("div");
div.removeClass("has-error");
div.addClass("has-feedback has-success");
$("#glypcn"+id).remove();
div.append('<span id="glypcn'+id+'" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>')
return true;
}
}
$(document).ready(function ()
{
$("#btn1").click(function ()
{
validateText("firstname");
validateText("lastname");
validateText("username");
validateText("password");
validateText("cpassword");
validateText("date");
validateText("male");
validateText("female");
$("register-form").submit();
});
}
);
</script>
<!-- Latest compiled and minified CSS -->
<script src="static/jquery-3.1.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--<script src="C:/Users/DA_YALS/Desktop/fv/static/combodate.js" type="text/javascript"></script>-->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6" style="height:auto; border:solid black;">
<form method="post" role="form" id="register-form" autocomplete="off">
<div class="form-group">
<label for="firstname">First Name:</label>
<input class="form-control" id="firstname" placeholder="First Name" type="text" required="required">
</div>
<div class="form-group">
<label for="lastname">Last Name:</label>
<input class="form-control" id="lastname" placeholder="Last Name" type="text" name="lastname" required="required" >
</div>
<div class="form-group">
<label for="username">Username:</label>
<input class="form-control" placeholder="Username" type="text" id="username" name="username" required="required">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input class="form-control" placeholder="Password" type="password" id="password" name="password" required="required">
</div>
<div class="form-group">
<label for="cpassword">Confirm Password:</label>
<input class="form-control" placeholder="Password" type="password" id="cpassword" name="cpassword" required="required">
</div>
<div class="form-group">
<label for="date" id="text">Date of Birth:</label>
<input class="form-control" type="text" id="date" name="date" data-format="DD-MM-YYYY" data-template="D MMM YYYY" name="date" value="09-01-2013" required="required">
</div>
<div class="form-group" style="border: solid;">
<label id="gender">Gender:</label>
<label class="radio-inline"><input id="male" type="radio" name="Male" checked>Male</label>
<label class="radio-inline"><input id="female" type="radio" name="Female">Female</label>
</div>
<div class="form-group" >
<button class="btn btn-success" id="btn1" type="submit">Submit</button>
</div>
</form>
</div>
<div class="col-lg-3">
</div>
</div>
</div>
</body>
</html>
The icon is not applied on the submit buttons but on the radios.
So you have to modify your validateText function to not add the icon on radio buttons:
function validateText(id)
{
if($("#"+id).val()==null || $("#"+id).val()=="")
{
var div = $("#"+id).closest("div");
div.removeClass("has-success");
$("#glypcn"+id).remove();
div.addClass("has-error has-feedback");
if (!($("#"+id).is(':checkbox') || $("#"+id).is(':radio'))) {
div.append('<span id="glypcn'+id+'" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
}
return false;
}
else
{
var div = $("#"+id).closest("div");
div.removeClass("has-error");
div.addClass("has-feedback has-success");
$("#glypcn"+id).remove();
if (!($("#"+id).is(':checkbox') || $("#"+id).is(':radio'))) {
div.append('<span id="glypcn'+id+'" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
}
return true;
}
}
I have two forms in the same page and one appears when clicking on the icon the login disappear and the signup appear. I am using spring mvc so I want when entering /register the function which toggle the forms work.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Login Form</title>
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}"
href="../static/css/reset.css"/>
<link rel='stylesheet prefetch'
href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900|RobotoDraft:400,100,300,500,700,900'/>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/>
<!--<link rel="stylesheet" href="../static/css/style.css"/>-->
<link rel="stylesheet" th:href="#{/css/style.css}"
href="../static/css/style.css"/>
</head>
<body>
<!-- Mixins-->
<!-- Pen Title-->
<div class="container">
<div class="card"></div>
<div class="card">
<h1 class="title">Login</h1>
<form action="login" th:action="#{/login}" th:object="${login}" method="post" >
<div class="input-container">
<input type="email" id="email" th:field="*{email}" required="required"/>
<label for="email">email</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password" th:field="*{password}" required="required"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button type="submit" name="action" value="login"><span>Go</span></button>
</div>
<div class="footer">Forgot your password?</div>
</form>
</div>
<div class="card alt">
<div class="toggle"></div>
<h1 class="title">Register
<div class="close"></div>
</h1>
<form action="register" th:action="#{/register}" th:object="${register}" method="post">
<div class="input-container">
<input type="text" id="firstName" th:field="*{firstName}" required="required"/>
<label for="firstName">First Name</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="text" id="lastName" th:field="*{lastName}" required="required"/>
<label for="lastName">Last Name</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="email" id="email_" th:field="*{email}" required="required"/>
<label for="email">Email</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password_" th:field="*{password}" required="required"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button type="submit" name="action" value="register"><span>Next</span></button>
</div>
</form>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script th:src="#{/js/index.js}"></script>
</body>
</html>
JavaScript code :
$('.toggle').on('click', function() {
$('.container').stop().addClass('active');
});
$('.close').on('click', function() {
$('.container').stop().removeClass('active');
});
i want for example when entering /register it retrieve the register form instead of login
One way to do that is to create a /register controller that will return a parameter:
#RequestMapping("/register")
public ModelAndView register() {
ModelAndView mv = new ModelAndView("your_form_page")
mv.addObject("isRegister", true);
return mv;
}
Then you can add a hidden field and use it in the javascript to toggle the divs:
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:th="http://www.thymeleaf.org">
<head>
<!-- imports omitted -->
<script type="text/javascript">
$(document).ready(function () {
if ($("#isRegister").val()) {
$("#register").show();
$("#signUp").hide();
} else {
$("#register").hide();
$("#signUp").show();
}
});
</script>
</head>
<body>
<input id="isRegister" type="hidden" th:value="${isRegister}" disabled="disabled"/>
<div id="signUp">
Sign Up Form
</div>
<div id="register">
Register Form
</div>
</body>
</html>
Of course you can move the Javascript piece of code to your ".js" file. The important here is to have the hidden input field that will be accessible in the Javascript to toggle the DIVs.
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
});
<!DOCTYPE html>
<html>
<head>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div class="container">
<div class="">
<h1>Enter Details</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6 col-md-5 col-xs-12">
<form class="form-group" ng-controller="validateCtrl" ng-submit="validateCtrl.$valid" name="myForm" novalidate>
<p>
<input type="text" class="form-control" name="user" ng-model="user" placeholder="Name" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>
<input type="email" class="form-control" name="email" ng-model="email" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" placeholder="Email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="number" class="form-control" name="number" ng-pattern="/^[0-9]+$/" ng-maxlength="10" ng-model="number" placeholder="Phone Number" required>
<span style="color:red" ng-show="myForm.number.$dirty && myForm.number.$invalid">
<span ng-show="myForm.number.$error.required">Phone number is required.</span>
<span ng-show="myForm.number.$error.number">Invalid phone number.</span>
</span>
</p>
<p>
<input class="btn btn-primary" type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid || myForm.number.$dirty && myForm.number.$invalid">
</p>
</form>
</div>
</div>
</div>
</body>
</html>
Here is my code. When i am using older version js file then on submitting blank form error message will be shown. But When i am using newer version js file then on submitting blank form error message will not be shown.
I am using bootstrap validation for validating jsp page .
my folder structure is as follow,
WebContent
├── bootstrap-form-validation
├── js
└── pages
Here all three folders are under web content. If i create one more folder called teacherDetails under pages folder for placing my jsp files. My problem is the validation is not working properly. but when I put that jsp file out of pages folder or under webcontent directly its working fine, for my project it has to be in pages folder . please help me in this and my jsp code is as follow
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- Optional theme -->
<link href="<%=request.getContextPath()%>/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="<%=request.getContextPath()%>/bootstrap-form-validation/style.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/bootstrap-datetimepicker-master/css/datetimepicker.css">
<script src="<%=request.getContextPath()%>/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js"></script>
<script src="<%=request.getContextPath()%>/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
</head>
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({
pickTime : false
});
});
</script>
<script>
$(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); } );
</script>
<script>
function profileDetails() {
document.getElementById("profiledetails").submit();
}
function profileCancel() {
document.getElementById("profileDetails").reset();
}
</script>
<style>
.no-space [class *="span"] {
margin-left: 0 !important;
width: 25% !important;
//
This
is
for
4
elements
ONLY
in
the
row
}
</style>
<body>
<form class="well form-horizontal" id="create_teacher" method="post" action="">
<div style="height: 850px;">
<div style="width: 104%; margin-top: -20px;">
<fieldset>
<legend style="color: #333;"> Teacher Information</legend>
</div>
<br> <br>
<div style="margin-left: 140px">
<div class="form-group">
<label for="uln" class="control-label">Teacher Id:</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="text" class="form-control" name="teacherId"
id="teacherId">
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="name" class="control-label">Name :</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="text" class="form-control" name="teacherName"
id="teacherName">
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="gender" class="control-label">Gender:</label>
<div class="col-xs-8">
<div class="col-lg-8">
<select class="form-control" name="gender">
<option></option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="dob" class="control-label">Date Of Birth(DOB) :</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="date" class="form-control" name="dob" id="date">
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="dob" class="control-label">Date Of
Join:</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="date" class="form-control" name="doj" id="date">
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="name" class="control-label">Education
:</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="text" class="form-control" name="teacherName"
id="education">
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="name" class="control-label">Experience
:</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="text" class="form-control" name="teacherName"
id="experience">
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="name" class="control-label">Prev Employee details :</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="text" class="form-control" name="teacherName"
id="prevdetails">
</div>
</div>
</div>
<br>
<div class="form-group">
<label class="control-label">Photo :</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="file" />
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="name" class="control-label">Email Id:</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="email" class="form-control" name="teacherName"
id="email">
<p class="help-block"></p>
</div>
</div>
</div>
<br>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<div style="margin-left: 150px">
<input type="submit" class="btn btn-primary" value="Submit"
onclick="profileDetails();" />
<input type="button" class="btn btn-primary" value="Cancel"
onclick="cancelProfile();" />
</div>
</div>
</div>
</div>
</fieldset>
</div>
</form>
<script src="<%=request.getContextPath()%>/bootstrap-form-validation/assets/js/jquery-1.7.1.min.js"></script>
<script src="<%=request.getContextPath()%>/bootstrap-form-validation/assets/js/jquery.validate.js"></script>
<script src="<%=request.getContextPath()%>/js/script.js"></script>
<script>
addEventListener('load', prettyPrint, false);
$(document).ready(function(){
$('pre').addClass('prettyprint linenums');
});
</script>
</body>
</html>
Your links are relative
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
these links will search for the mentioned folder in the same level.
so if you put your jsp's in some folder called teacherDetails under pages, it'll look for bootstrap folder inside pages folder.
so to point to folders outside the current level, you've to specify it as follows:
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
./ represents the current folder, ../ will represent the parent of current folder and so on..