I am making a code that requests course grades and sends them to a spreadsheet. I am familiar with Javascript; however, I am less familiar with HTML. Because not every person is taking the same courses or even the same number of courses, I wanted to send each student a custom url that contains the parameters of their name and what courses they are taking. That way the information could be populated into the HTML page and all the student would need to do is type in their grades for the corresponding courses. Then when submitted, it would send that information to a spreadsheet and handled accordingly. However, I am unsure of how I could pass parameters on to an HTML page. I am sure that it is simple but I dont know how to do it. If someone could provide some guidance it would be greatly appreciated. Below I have included the main HTML file that dictates the output. I am also including links to the other code. https://script.google.com/d/1c2XOZc5bmlnxT0ayWfYpJd4d6pKmZ8rgSiEZ-9NJ8CZIhvdjpEqSJ5X6/edit?usp=sharing
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<?!= include('JavaScript'); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form id="myForm" onsubmit="handleFormSubmit(this)">
<p class="h4 mb-4 text-center">Input Grades Below</p>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class001" id = "class_01" hidden>Class1</label>
<input type="text" class="form-control" id="grade001" name="grade00" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class002" id = class_02 hidden>Class2</label>
<input type="text" class="form-control" id="grade002" name="grade002" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class003" id = "class_03" hidden>Class3</label>
<input type="text" class="form-control" id="grade003" name="grade003" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class004" id = class_04 hidden>Class4</label>
<input type="text" class="form-control" id="grade004" name="grade004" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class005" id = class_05 hidden>Class5</label>
<input type="text" class="form-control" id="grade005" name="grade005" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class006" id = class_06 hidden>Class6</label>
<input type="text" class="form-control" id="grade006" name="grade006" placeholder="Grade" hidden>
</div>
</div>
<script>
//Script to to implement to change class labels
</script>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<div id="output"></div>
</div>
</div>
</div>
</body>
</html>
You can use google.script.url.getLocation() to get the current URL parameters and hash.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<script>
// URL = https://script.google.com/macros/s/SCRIPTKEY/exec?parameter=value#hash
google.script.url.getLocation(function(location) {
console.log(location.parameters); // {parameter: ["value"]}
console.log(location.hash); // "hash"
});
</script>
</body>
</html>
Related
I am creating an UI, where I am entering some useful information. I use a form tag to set it up.
I have the basic form created and it can be seen as below
Since I have made use of form, when I click the Add project details, it directly hits the endpoint assigned (We are usigng springboot+thymeleaf)
Desirable Result:
When I click on Add Project details I should get text fields as shown below :
A student can create multiple projects, so each time Add project details is clicked, a new div with Id, projectname, grade has to be created.
NOTE: just a plain student can be created without any projects, but one student can have multiple projects too. I am failing in adding the UI components there. Each time I click add project details, it redirects to form submission and does not open the required div into the page.
Please provide me some guidelines here.
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</link>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Include https://datatables.net/ -->
<link href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet">
</link>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript"
src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<!-- drag select for list of worklogs -->
<style>
.noselect {
user-select: none;
}
.ds-selected {
outline: 1px solid black;
outline-offset: 0px;
color: rgb(0, 0, 0);
font-weight: bold;
}
</style>
</head>
<body>
<div th:fragment="inputdata">
<div class="container-md">
<a>Student and Project Details</a>
<div class="row justify-content-md-end">
<form>
<div class="row">
<div class="col-2">
<a>Enter unique studentId</a>
</div>
<div class="col-3">
<input type="text" class="form-control" name="studentid" id="studentid" placeholder="studentid"
required="required">
</div>
</div>
<div class="row">
<div class="col-2">
<a>Enter Name</a>
</div>
<div class="col-3">
<input type="text" class="form-control" name="name" id="name" placeholder="name"
required="required">
</div>
</div>
<div class="row">
<div class="col-2">
<a>birth date</a>
</div>
<div class="col-3">
<input type="date" class="form-control" name="birthdate" id="birthdate"
placeholder="birthdate" required="required">
</div>
</div>
<div class="row">
<div class="row-2">
<button class="btn btn-primary"> Add project details </button>
</div>
</div>
<div class="row" id= "flexibleDiv">
<div class="col-2">
<label >Project </label>
</div>
<div class="col-2">
<input type="text" class="form-control" name="id" id="id"
placeholder="id" required="required">
</div>
<div class="col-2">
<input type="text" class="form-control" name="name" id="name"
placeholder="name" required="required">
</div>
<div class="col-2">
<input type="text" class="form-control" name="grade" id="grade"
placeholder="grade" required="required">
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="row-2">
<input type="submit" id="submitButton" class="btn btn-primary btn-sml" value="Enter to DB">
</div>
</div>
</form>
</div>
</div>
<script>
</script>
</div>
</body>
</html>
I've got a form that I'd like to be able to download offline, that should be compatible with most, if not all browsers (IE10,11 especially). I've seen a couple of solutions that don't work on IE or Chrome.
I've been trying to figure out how to do it in JQuery. A user is meant to fill out the form, and when they submit, the form should download a CSV file locally.
Unfortunately, I'm unable to use a server or any PHP, so I've resorted to JQuery/JavScript.
Here's what I have so far:
HTML5 Form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
</head>
<body>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<div class="container-fluid">
<form action="" id="formCsv" style="padding-top: 20px">
<div class="form-group row">
<label for="clientName" class="col-lg-1">Client Name</label>
<div class="col-lg-3">
<input type="text" name="Name" class="form-control" id="clientName" required>
</div>
</div>
<div class="form-group row">
<label for="clientEmail" class="col-lg-1">Client Email</label>
<div class="col-lg-3">
<input type="email" name="Email" class="form-control" id="clientEmail" >
</div>
</div>
<div class="form-group row">
<label for="clientCountry" class="col-lg-1">Client Country</label>
<div class="col-lg-3">
<input type="text" name="Country" class="form-control" id="clientCountry" >
</div>
</div>
<div class="form-group row">
<label for="clientState" class="col-lg-1">Client State</label>
<div class="col-lg-3">
<input type="text" name="State" class="form-control" id="clientState" >
</div>
</div>
<input class="btn btn-primary" id="Submit" type="button" value="Submit">
</form>
</div>
<div id="results"></div>
<script src="formArray.js"></script>
</body>
</html>
JavaScript file that takes inputs and creates array (formArray.js)
$(document).ready(function () {
$("#Submit").click(function (e) {
var x = $("form").serializeArray();
$.each(x, function (i, field) {
$("#results").append(field.name + ":" + field.value+ '</br>');
});
});
});
How would I then have it so that when a user clicks "submit", a correctly formatted CSV file is generated?
I have written a code which uses Angular JS form validation.
There are two forms,
The first uses form validation
and the second use ng-messages,
The problem is, the second form doesn't seems to work as first one.
In the first form, 3 text fields,
end field has required.
So once I load the page and try to submit the form without filling it,
the error messages appear across the respective fields.
Now if the text field is not empty but has some number validation,
and if I enter text, that only number validation message is shown.
But the same kind for above mentioned validation behavior I am not able to implement in my second form using ng-Messages.
The code is as below,
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Validator Examples</title>
<script type="text/javascript" src="/home/rahul/Installers/jquery-3.0.0.js"></script>
<script type="text/javascript" src="/home/rahul/Installers/angular.js"></script>
<script type="text/javascript" src="/home/rahul/Installers/Bootstrapv3.0.2/js/bootstrap.js"></script>
<link rel="stylesheet" href="/home/rahul/Installers/Bootstrapv3.0.2/css/bootstrap.css">
<link rel="stylesheet" href="/home/rahul/Installers/Bootstrapv3.0.2/css/bootstrap-theme.css">
<script type="text/javascript">
angular.module("myApp",[]);
angular.module("myApp").controller("myCtrl",myCtrl);
function myCtrl(){
var vm = this;
vm.formOne = {}
vm.formOne.name = "";
vm.formOne.address = "";
vm.formOne.age = 0;
vm.formTwo = {}
vm.formTwo.name = "";
vm.formTwo.address = "";
vm.formTwo.age = 0;
}
</script>
<style type="text/css">
.form-error{
color : red;
}
</style>
</head>
<body ng-controller="myCtrl as vm">
<div class="container">
<div class="page-header">
<h3>Validator Examples</h3>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2">
<div class="page-header">
<h5><b>ngForm Validator Examples</b></h5>
</div>
<form name="formOne" novalidate>
<div class="form-group">
<input type="text" class="form-control" name="name1" placeholder="Name" required ng-model="vm.formOne.name"
minlength="5" maxlength="10" />
<div ng-show="formOne.$submitted || formOne.name1.$touched">
<div ng-show="formOne.name1.$error.required" class="form-error">Name can't be empty</div>
<div ng-show="formOne.name1.$error.minlength" class="form-error">Name can't be less than 5</div>
<div ng-show="formOne.name1.$error.maxlength" class="form-error">Name can't be more than 10</div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="address1" placeholder="Address" ng-model="vm.formOne.address"
required />
<div ng-show="formOne.$submitted || formOne.address1.$touched">
<div ng-show="formOne.address1.$error.required" class="form-error">Address can't be empty</div>
</div>
</div>
<div class="form-group">
<input type="number" class="form-control" name="age1" placeholder="Age" ng-model="vm.formOne.age"
required number/>
<div ng-show="formOne.$submitted || formOne.age1.$touched">
<div ng-show="formOne.age1.$error.required" class="form-error">Age can't be empty</div>
<div ng-show="formOne.age1.$error.number" class="form-error">Age should be numeric</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-4 col-md-offset-2">
<div class="page-header">
<h5><b>ngForm ngMessages Validator Examples</b></h5>
</div>
<form name="formTwo" novalidate>
<div class="form-group">
<input type="text" class="form-control" name="name1" placeholder="Name"
ng-model="vm.formTwo.name" required ng-minlength="5" ng-maxlength="10" />
<div ng-messages="formTwo.name1.$error"
ng-show="formTwo.$submitted || formTwo.name1.$touched" class="form-error" role="alert">
<div ng-message="required">Name can't be empty</div>
<div ng-message="minlength">Name can't be less than 5</div>
<div ng-message="maxlength">Name can't be more than 10</div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="address1" placeholder="Address" ng-model="vm.formTwo.address"
required />
<div ng-messages="formTwo.address1.$error"
ng-show="formTwo.$submitted || formTwo.address1.$touched" class="form-error">
<div ng-message="required">Name can't be empty</div>
</div>
</div>
<div class="form-group">
<input type="number" class="form-control" name="age1" placeholder="Age" ng-model="vm.formTwo.age"
required number />
<div ng-messages="formTwo.age1.$error" ng-show="formTwo.$submitted || formTwo.age1.$touched"
class="form-error">
<div ng-message="required">Age can't be empty</div>
<div ng-message="number">Age should be numeric</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div><!-- row -->
</div>
</body>
Let me show you the comparison,
in form one the first files validation is like
<form name="formOne" novalidate>
<div class="form-group">
<input type="text" class="form-control" name="name1" placeholder="Name" required ng-model="vm.formOne.name"
minlength="5" maxlength="10" />
<div ng-show="formOne.$submitted || formOne.name1.$touched">
<div ng-show="formOne.name1.$error.required" class="form-error">Name can't be empty</div>
<div ng-show="formOne.name1.$error.minlength" class="form-error">Name can't be less than 5</div>
<div ng-show="formOne.name1.$error.maxlength" class="form-error">Name can't be more than 10</div>
</div>
</div>
And in the form two, the validation is like
<form name="formTwo" novalidate>
<div class="form-group">
<input type="text" class="form-control" name="name1" placeholder="Name"
ng-model="vm.formTwo.name" required ng-minlength="5" ng-maxlength="10" />
<div ng-messages="formTwo.name1.$error"
ng-show="formTwo.$submitted || formTwo.name1.$touched" class="form-error" role="alert">
<div ng-message="required">Name can't be empty</div>
<div ng-message="minlength">Name can't be less than 5</div>
<div ng-message="maxlength">Name can't be more than 10</div>
</div>
In form one, I am able to see only those messages which are invalid,
But in form two I see all the error messages in that field.
You can also see my working code on this like,
FormValidation
Please let me know, were I am going wrong
make sure you have added angular-message.js file in <script>
than Inject ngMessages in module like below
angular.module('myApp', ['ngMessages']);
Write controller alias with form="vm.formTwo" and ng-messages="vm.formTwo....
here is the working example
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.
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..