I am currently working on a project and having quite a difficult time with this plugin I managed to get it to work without custom errors one problem I ran across was if I have required tags on all elements email doesn't work but when I have it on just the email input it works. When I attempt to run the custom validation I get no errors upon hitting the submit button.
$(document).ready(function () {
$(".form-horizontal").validate( {
rules: {
name: "required", social: "required", postal: {
required: true, postal: true
}
,
phone: {
required: true, phone: true
}
,
email: {
required: true, email: true
}
}
,
messages: {
radio: "Please select a gender.", option: "Please select a province."
}
}
);
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Lab 5 Part B</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand">Lab5: Form Validation with jQuery Validation Plugin</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<div class="container">
<div class="jumbotron">
<form class="form-horizontal" onsubmit="return false;">
<fieldset>
<legend>Contact Details</legend>
<div class="form-group">
<label for="inputName" class="col-lg-2 control-label">Name:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="name" class="form-control" id="inputName" name="inputName" placeholder="Your name">
</div>
</div>
<div class="form-group">
<label for="inputSocial" class="col-lg-2 control-label">Social Insurance No:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="social" class="form-control" id="inputSocial" name="inputSocial" placeholder="(9 digits)">
</div>
</div>
<div class="form-group">
<label for="inputBirth" class="col-lg-2 control-label">Date of Birth:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="birth" class="form-control" id="inputBirth" name="inputBirth" placeholder="(YYYY-MM-DD)">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Gender:</label>
<div class="col-lg-10">
<div class="radio">
<div class="status"></div>
<label>
<input type="radio" name="optionsGender" id="optionGenderMale" value="optionGenderMale">Male
</label>
<label>
<input type="radio" name="optionsGender" id="optionGenderFemale" value="optionGenderFemale">Female
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Province:</label>
<div class="status"></div>
<div class="col-lg-10">
<select class="form-control" name="selectProvince" id="selectProvince">
<option value="">Select One</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland & Labrador</option>
<option value="NS">Novia Scotia</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputPostal" class="col-lg-2 control-label">Postal Code:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="postal" class="form-control" id="inputPostal" name="inputPostal" placeholder="(Ex: L8S5CR)">
</div>
</div>
<div class="form-group">
<label for="inputPhone" class="col-lg-2 control-label">Telephone Number:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="phone" class="form-control" id="inputPhone" input="inputPhone" placeholder="(Ex: 905-321-4587)">
</div>
</div>
<div class="form-group">
<label for="inputEmail:" class="col-lg-2 control-label">Email:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail" input="inputEmail">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
<hr>
<footer>
<p>© Jamie Steele 2016</p>
</footer>
</div>
<!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/main.js"></script>
</body>
</html>
In your validation rules, you need to use the input element's name, but in your case that is not matching
You have name="inputName" in the element but in rules you are using name
$(document).ready(function() {
$(".form-horizontal").validate({
rules: {
name: "required",
social: "required",
postal: {
required: true,
postal: true
},
phone: {
required: true,
phone: true
},
email: {
required: true,
email: true
}
},
messages: {
radio: "Please select a gender.",
option: "Please select a province."
}
});
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand">Lab5: Form Validation with jQuery Validation Plugin</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<div class="container">
<div class="jumbotron">
<form class="form-horizontal" onsubmit="return false;">
<fieldset>
<legend>Contact Details</legend>
<div class="form-group">
<label for="inputName" class="col-lg-2 control-label">Name:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="name" class="form-control" id="inputName" name="name" placeholder="Your name">
</div>
</div>
<div class="form-group">
<label for="inputSocial" class="col-lg-2 control-label">Social Insurance No:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="social" class="form-control" id="inputSocial" name="social" placeholder="(9 digits)">
</div>
</div>
<div class="form-group">
<label for="inputBirth" class="col-lg-2 control-label">Date of Birth:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="birth" class="form-control" id="inputBirth" name="inputBirth" placeholder="(YYYY-MM-DD)">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Gender:</label>
<div class="col-lg-10">
<div class="radio">
<div class="status"></div>
<label>
<input type="radio" name="optionsGender" id="optionGenderMale" value="optionGenderMale">Male
</label>
<label>
<input type="radio" name="optionsGender" id="optionGenderFemale" value="optionGenderFemale">Female
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Province:</label>
<div class="status"></div>
<div class="col-lg-10">
<select class="form-control" name="selectProvince" id="selectProvince">
<option value="">Select One</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland & Labrador</option>
<option value="NS">Novia Scotia</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputPostal" class="col-lg-2 control-label">Postal Code:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="postal" class="form-control" id="inputPostal" name="postal" placeholder="(Ex: L8S5CR)">
</div>
</div>
<div class="form-group">
<label for="inputPhone" class="col-lg-2 control-label">Telephone Number:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="phone" class="form-control" id="inputPhone" name="phone" placeholder="(Ex: 905-321-4587)">
</div>
</div>
<div class="form-group">
<label for="inputEmail:" class="col-lg-2 control-label">Email:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail" name="email">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
<hr>
<footer>
<p>© Jamie Steele 2016</p>
</footer>
</div>
Related
I'm struggling to figure out what's going wrong with my attempts to upload data to firebase with the below code, but data is not saving in firebase.
When i clicked submit nothing happens but success message comes
could somebody help me.
my java script code fbdb.js is
// xxxxxxxxxx Submitting data to firebase xxxxxxxxxx
function uploadata (){
var jbid = document.getElementById('jobid');
var orin = document.getElementById('ori');
var recv = document.getElementById('recvdt');
var requnby = document.getElementById('reqn');
var wksrc = document.getElementById('wsrc');
var wktyp = document.getElementById('wtyp');
var furn = document.getElementById('fur');
var custm = document.getElementById('cust');
var strt = document.getElementById('stdt');
var endd = document.getElementById('enddt');
var remar = document.getElementById('rema');
var database = firebase.database();
var firebaseRef = database.ref();
var userData = {
job: jbid,
daterec: recv,
requn: requnby,
cat: wksrc,
comm: wktyp,
equipment: furn,
customer: custm,
startdt: strt,
enddt: endd,
rmarks: remar
}
firebaseRef.child('todo').push(userData);
swal(document.getElementById('jobid'));
swal('Your data is successfully uploaded to server!',
).then((value) => {
setTimeout(function(){
window.location.replace("./logpage.html");
}, 1000)
});
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="../css/style.css">
<!-- Sweet Alert JavaScript -->
<script src="../js/sweetalert2.js"></script>
<!-- Nunito Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
<title>Log Book | CamsFusion89</title>
</head>
<body class="bg-light">
<div class="container-fluid">
<div class="row mx-1">
<div class="col-lg-10 col-md-10 offset-lg-1 offset-md-1 text-center mt-5 pb-4 text-primary">
<h1 class="h1">Daily Work Log Book & Planner</h1>
</div>
<div class="col-lg-10 col-md-10 offset-lg-1 offset-md-1 bg-white shadow mb-5 border border-primary">
<div class="row">
<div class="col-lg-6 col-md-6 p-4 bg-primary divCover">
<img src="../images/firebase_logo.png" alt="Firebase cover image">
</div>
<div class="col-lg-6 col-md-6 p-lg-5 p-md-5 px-3 py-4">
<div id="logForm" method="post">
<h2 class="h2 text-center text-dark mb-3">Log Book Entry</h2>
<div class="item">
<!-- Data Entry Start -->
<div class="form-group">
<label for="jobid">Unique Job ID<span class="text-danger ml-1">*</span></label>
<input type="text" class="form-control" id="jobid" onblur=""placeholder="Unique Job ID">
</div>
<div class="form-group">
<label for="orgi">Originator<span class="text-danger ml-1">*</span></label>
<br>
<input list="orgi" name="Originator" class="form-control" onblur=""placeholder="Originator">
<datalist id="orgi">
<option value="Nalini Ranjan Muduli">
<option value="M V Narendra">
<option value="Iswar Toppo">
</datalist>
</div>
<div class="form-group">
<label for="recvdt">Date of Received<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="recvdt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="reqn">Requisition By<span class="text-danger ml-1">*</span></label>
<br>
<input list="reqn" name="Requisition" class="form-control" onblur=""placeholder="Requisition By">
<datalist id="reqn">
<option value="Department A">
<option value="Department B">
<option value="Department C">
<option value="Department D">
<option value="Department E">
</datalist>
</div>
<div class="form-group">
<label for="wsrc">Work Source (Business Segment)<span class="text-danger ml-1">*</span></label>
<br>
<input list="wsrc" name="Work Source (Business Segment)" class="form-control" onblur=""placeholder="Work Source (Business Segment)">
<datalist id="wsrc">
<option value="Steel-Domestic">
<option value="Steel-Export">
<option value="Steel-GSB">
<option value="Non Ferrous-Domestic">
<option value="Non Ferrous-Export">
<option value="Non Ferrous-GSB">
<option value="Engineering">
<option value="Miscellaneous">
</datalist>
</div>
<div class="form-group">
<label for="wtyp">Work Type<span class="text-danger ml-1">*</span></label>
<br>
<input list="wtyp" name="Work Type" class="form-control" onblur=""placeholder="Work Type" >
<datalist id="wtyp">
<option value="New">
<option value="Revision">
<option value="Correction">
<option value="Proposal">
</datalist>
</div>
<div class="form-group">
<label for="fur">Furnace/Equipment<span class="text-danger ml-1">*</span></label>
<br>
<input list="fur" name="Furnace/Equipment" class="form-control" onblur=""placeholder="Furnace/Equipment">
<datalist id="fur">
<option value="Steel-Teeming Ladle">
<option value="Hot Metal Ladle">
<option value="Corex Ladle">
<option value="BOF">
<option value="EAF">
<option value="AOD">
<option value="RH Degasser">
<option value="Snorkel">
<option value="Slide Gate Mechanism">
<option value="Torpedo Ladle Car">
<option value="Brick Shape">
<option value="Petro-Chemicals">
<option value="Tap Hole">
</datalist>
</div>
<div class="form-group">
<label for="cust">Customer Name<span class="text-danger ml-1">*</span></label>
<input type="text" class="form-control" id="cust" onblur=""placeholder="Customer Name">
</div>
<div class="form-group">
<label for="stdt">Started On<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="stdt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="enddt">End On<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="enddt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="rema">Remarks<span class="text-danger ml-1">*</span></label>
<textarea class="form-control" id="rema" rows="5" onblur=""placeholder="Remarks"></textarea>
</div>
<div class="col-lg-12 col-md-12 text-center">
<button type="button" class="btn btn-outline-primary btn-block text-uppercase mb-3" onclick="uploadata()">
Submit<small></small></button>
</div>
</div>
<div class="col-lg-12 col-md-12 text-center">
<button type="button" class="btn btn-outline-primary btn-block text-uppercase mb-3" onclick="gohome()">
Cancel & Go Back<small></small></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/5.9.4/firebase.js"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-database.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyCnBlyACmhW_mmr0tU5IITOtHWwU68LRYs",
authDomain: "camsfusion89auth.firebaseapp.com",
databaseURL: "https://camsfusion89auth.firebaseio.com",
projectId: "camsfusion89auth",
storageBucket: "camsfusion89auth.appspot.com",
messagingSenderId: "629330978244",
appId: "1:629330978244:web:235676b5e28b8c3f8bb091",
measurementId: "G-PPYS5Y0TWP"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<!-- Custom JavaScript -->
<script src="../js/fbdb.js"></script>
</body>
</html>
I'm struggling to figure out what's going wrong with my attempts to upload data to firebase with the below code, but data is not saving in firebase. When i clicked submit nothing happens but success message comes could somebody help me
While writing this answer, I've changed multiple things:
Datalists do not return the value, the input does source.
The document.getElementById('ori').value; was changed to orgi
Got the .value from the elements
Added <script src="//cdn.jsdelivr.net/npm/sweetalert2#10"></script> to be able to use swal
// xxxxxxxxxx Submitting data to firebase xxxxxxxxxx
function uploadata (){
var jbid = document.getElementById('jobid').value;
var orin = document.getElementById('orgi').value;
var recv = document.getElementById('recvdt').value;
var requnby = document.getElementById('reqn').value;
var wksrc = document.getElementById('wsrc').value;
var wktyp = document.getElementById('wtyp').value;
var furn = document.getElementById('fur').value;
var custm = document.getElementById('cust').value;
var strt = document.getElementById('stdt').value;
var endd = document.getElementById('enddt').value;
var remar = document.getElementById('rema').value;
var database = firebase.database();
var firebaseRef = database.ref();
var userData = {
job: jbid,
daterec: recv,
requn: requnby,
cat: wksrc,
comm: wktyp,
equipment: furn,
customer: custm,
startdt: strt,
enddt: endd,
rmarks: remar
};
console.log(userData);
firebaseRef.child('todo').push(userData);
swal(document.getElementById('jobid'));
swal('Your data is successfully uploaded to server!',
).then((value) => {
setTimeout(function(){
window.location.replace("./logpage.html");
}, 1000)
});
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="../css/style.css">
<!-- Sweet Alert JavaScript -->
<script src="../js/sweetalert2.js"></script>
<!-- Nunito Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
<title>Log Book | CamsFusion89</title>
</head>
<body class="bg-light">
<div class="container-fluid">
<div class="row mx-1">
<div class="col-lg-10 col-md-10 offset-lg-1 offset-md-1 text-center mt-5 pb-4 text-primary">
<h1 class="h1">Daily Work Log Book & Planner</h1>
</div>
<div class="col-lg-10 col-md-10 offset-lg-1 offset-md-1 bg-white shadow mb-5 border border-primary">
<div class="row">
<div class="col-lg-6 col-md-6 p-4 bg-primary divCover">
<img src="../images/firebase_logo.png" alt="Firebase cover image">
</div>
<div class="col-lg-6 col-md-6 p-lg-5 p-md-5 px-3 py-4">
<div id="logForm" method="post">
<h2 class="h2 text-center text-dark mb-3">Log Book Entry</h2>
<div class="item">
<!-- Data Entry Start -->
<div class="form-group">
<label for="jobid">Unique Job ID<span class="text-danger ml-1">*</span></label>
<input type="text" class="form-control" id="jobid" onblur=""placeholder="Unique Job ID">
</div>
<div class="form-group">
<label for="orgi">Originator<span class="text-danger ml-1">*</span></label>
<br>
<input list="orgi-list" id="orgi" name="Originator" class="form-control" onblur=""placeholder="Originator">
<datalist id="orgi-list">
<option value="Nalini Ranjan Muduli">
<option value="M V Narendra">
<option value="Iswar Toppo">
</datalist>
</div>
<div class="form-group">
<label for="recvdt">Date of Received<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="recvdt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="reqn">Requisition By<span class="text-danger ml-1">*</span></label>
<br>
<input list="reqn-list" id="reqn" name="Requisition" class="form-control" onblur=""placeholder="Requisition By">
<datalist id="reqn-list">
<option value="Department A">
<option value="Department B">
<option value="Department C">
<option value="Department D">
<option value="Department E">
</datalist>
</div>
<div class="form-group">
<label for="wsrc">Work Source (Business Segment)<span class="text-danger ml-1">*</span></label>
<br>
<input list="wsrc-list" id="wsrc" name="Work Source (Business Segment)" class="form-control" onblur=""placeholder="Work Source (Business Segment)">
<datalist id="wsrc-list">
<option value="Steel-Domestic">
<option value="Steel-Export">
<option value="Steel-GSB">
<option value="Non Ferrous-Domestic">
<option value="Non Ferrous-Export">
<option value="Non Ferrous-GSB">
<option value="Engineering">
<option value="Miscellaneous">
</datalist>
</div>
<div class="form-group">
<label for="wtyp">Work Type<span class="text-danger ml-1">*</span></label>
<br>
<input list="wtyp-list" id="wtyp" name="Work Type" class="form-control" onblur=""placeholder="Work Type" >
<datalist id="wtyp-list">
<option value="New">
<option value="Revision">
<option value="Correction">
<option value="Proposal">
</datalist>
</div>
<div class="form-group">
<label for="fur">Furnace/Equipment<span class="text-danger ml-1">*</span></label>
<br>
<input list="fur-list" id="fur" name="Furnace/Equipment" class="form-control" onblur=""placeholder="Furnace/Equipment">
<datalist id="fur-list">
<option value="Steel-Teeming Ladle">
<option value="Hot Metal Ladle">
<option value="Corex Ladle">
<option value="BOF">
<option value="EAF">
<option value="AOD">
<option value="RH Degasser">
<option value="Snorkel">
<option value="Slide Gate Mechanism">
<option value="Torpedo Ladle Car">
<option value="Brick Shape">
<option value="Petro-Chemicals">
<option value="Tap Hole">
</datalist>
</div>
<div class="form-group">
<label for="cust">Customer Name<span class="text-danger ml-1">*</span></label>
<input type="text" class="form-control" id="cust" onblur=""placeholder="Customer Name">
</div>
<div class="form-group">
<label for="stdt">Started On<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="stdt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="enddt">End On<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="enddt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="rema">Remarks<span class="text-danger ml-1">*</span></label>
<textarea class="form-control" id="rema" rows="5" onblur=""placeholder="Remarks"></textarea>
</div>
<div class="col-lg-12 col-md-12 text-center">
<button type="button" class="btn btn-outline-primary btn-block text-uppercase mb-3" onclick="uploadata()">
Submit<small></small></button>
</div>
</div>
<div class="col-lg-12 col-md-12 text-center">
<button type="button" class="btn btn-outline-primary btn-block text-uppercase mb-3" onclick="gohome()">
Cancel & Go Back<small></small></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/5.9.4/firebase.js"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-database.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyCnBlyACmhW_mmr0tU5IITOtHWwU68LRYs",
authDomain: "camsfusion89auth.firebaseapp.com",
databaseURL: "https://camsfusion89auth.firebaseio.com",
projectId: "camsfusion89auth",
storageBucket: "camsfusion89auth.appspot.com",
messagingSenderId: "629330978244",
appId: "1:629330978244:web:235676b5e28b8c3f8bb091",
measurementId: "G-PPYS5Y0TWP"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<!-- Custom JavaScript -->
<script src="../js/fbdb.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2#10"></script>
</body>
</html>
Let me know how this goes.
I am adding options dynamically in country select box.Options appears in select box and become selected on click but i want to get them in js as they are appended. If I console select box html in after they are appended. I only got option that is added in html not all other options that are append by js. I am not sure whats going wrong. Here is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
/>
<title>login</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css" />
<link rel="stylesheet" href="assets/css/style1.css" />
</head>
<body>
<div class="dashboard" style="text-align: center;">
<div class="wrapper">
<section id="nav-tabs">
<div class="container">
<div class="row justify-content-between">
<div class="col-8 p-0">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link active p-11" id="nav-profil1-tab" data-toggle="tab" href="#nav-profil1" role="tab" aria-controls="nav-home" aria-selected="true"><span class="word-profile hide">Profile</span> 1</a>
</div>
</nav>
</div>
<div class="col-2 align-self-center">
<i class="fa fa-plus plus" aria-hidden="true"></i>
</div>
<div class="col-xs-2">
<i class="fa fa-cog text-white setting" aria-hidden="true"></i>
</div>
</div>
</div>
</section>
<section id="tabs">
<div class="container">
<div class="row" style="background-color: #013e77;">
<div class="col-xs-12 ">
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-profil1" role="tabpanel" aria-labelledby="nav-profil1-tab">
<form class="text-center profile" style="color: #757575;" action="#!">
<div class="form-row">
<div class="form-group col-12">
<select class="form-control prefer" id="exampleFormControlSelect1" name="preferred">
<option>Preferred Profile</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group col-6">
<input type="text" class="form-control fname" id="inputfname" placeholder="First Name" name="first_name" required>
<p class="fname-error text-danger hide"></p>
</div>
<div class="form-group col-6">
<input type="text" class="form-control lname" id="inputlname" placeholder="Last Name" name="last_name" required>
<p class="lname-error text-danger hide"></p>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control address" id="inputAddress" placeholder="Address" name="address" required>
<p class="address-error text-danger hide"></p>
</div>
<div class="form-group">
<input type="text" class="form-control apartment" id="inputAddress2" placeholder="Apartment, suite, etc. (optional)" name="apartment">
</div>
<div class="form-row">
<div class="form-group col-12">
<input type="text" class="form-control city" id="inputCity" placeholder="City" name="city" required>
<p class="city-error text-danger hide"></p>
</div>
<div class="form-group col-4">
<select id="inputCountry" class="form-control country" name="country">
<option>--Select Country--</option>
</select>
</div>
<div class="form-group col-4">
<select id="inputState" class="form-control states" name="state">
<option>--Select State --</option>
</select>
</div>
<div class="form-group col-4">
<input type="text" class="form-control zip" id="inputZip" placeholder="Zip code" name="zip" required>
<p class="zip-error text-danger hide"></p>
</div>
<div class="form-group col-12">
<input type="text" class="form-control phone" id="inputAddress" placeholder="Phone" name="phone" required>
<p class="phone-error text-danger hide"></p>
</div>
<div class="form-group col-12">
<input type="text" class="form-control card_num" id="inputAddress" placeholder="Card Number" name="card_num" required>
<p class="card_num-error text-danger hide"></p>
</div>
<div class="form-group col-12">
<input type="text" class="form-control card_name" id="inputAddress" placeholder="Name on Card" name="card_name" required>
<p class="card_name-error text-danger hide"></p>
</div>
<div class="form-group col-5">
<input type="date" class="form-control expiry" id="inputAddress" placeholder="Expiration Date" name="expiry" required>
<p class="expiry-error text-danger hide"></p>
</div>
<div class="form-group col-4">
<input type="text" class="form-control cvv" id="inputAddress" placeholder="CVV" name="cvv" required>
<p class="cvv-error text-danger hide"></p>
</div>
<div class="form-group col-3">
<button type="submit" class="btn btn-primary save">Save</button>
</div>
<div class="form-group col-4">
<button type="submit" class="btn btn-danger delete" data-id="">Delete</button>
</div>
<div class="form-group col-4">
<button type="submit" class="btn btn-primary update" data-id="">Update</button>
</div>
<div class="form-group col-4">
<button type="button" class="activate"><i class="fa fa-bolt" aria-hidden="true"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ./Tabs -->
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="popup.js"></script>
</body>
</html>
Here is js:
/*----- Dashboard -----*/
appendCountries();
console.log($(".country").html());
/*------get countries from json-----*/
function appendCountries(){
$.getJSON('countries.json',function(result){
console.log(result.countries);
$.each(result.countries,function(index,country){
var option='<option value="'+country.id+"-"+country.name+'">'+country.name+'</option>';
$(".country").append(option);
});
});
}
Thanks in Advance!
I am stuck here please guide me what is the way to get options without adding any event on select box
This happens, because here is some asynchronously actions. If you call $('.country').html() after inserting options - it will show you generated html code. It is possible by two ways minimum:
Call $('.country').html() in the callback of $.getJSON after $.each(...).
As in my snippet - in processing of Promise of appendCountries, but firstly we should return it by adding return before $.getJSON.
appendCountries().then(() => {
console.log($(".country").html());
});
/*------get countries from json-----*/
function appendCountries(){
return $.getJSON('https://raw.githubusercontent.com/samayo/country-json/master/src/country-by-name.json',
function(result){
// console.log(result);
$.each(result, function(index, country){
var option='<option value="'+index+"-"+country.country+'">'+country.country+'</option>';
$(".country").append(option);
});
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="countries" id="countriesSelect" class="country">
<option> -- select country -- </option>
</select>
I'm trying to make some form validation. If you click the radio button, you can go to the next step, but if you don't click it, you can't proceed. Here's my 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">
<title>Bootstrap Multi Step Registration Form Template</title>
<link rel="stylesheet" href="<?=base_url()?>assets/bootstrap/css/bootstrap.min.css">
<!-- CSS -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="<?=base_url()?>assets/multiplesteps/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="<?=base_url()?>assets/multiplesteps/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="<?=base_url()?>assets/multiplesteps/css/form-elements.css">
<link rel="stylesheet" href="<?=base_url()?>assets/multiplesteps/css/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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]-->
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="<?=base_url()?>assets/multiplesteps/ico/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?=base_url()?>assets/multiplesteps/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?=base_url()?>assets/multiplesteps/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?=base_url()?>assets/multiplesteps/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="<?=base_url()?>assets/multiplesteps/ico/apple-touch-icon-57-precomposed.png">
</head>
<body background="<?=base_url()?>assets/multiplesteps/img/backgrounds/green.jpg">
<?php //$this->load->view($view) ?>
<!-- Top content -->
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 text">
<h1><strong>KUISIONER RAWAT JALAN</strong></h1>
<div class="description">
<p>
<b>RUMAH SAKIT UMUM DAERAH TEBET</b>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<form role="form" action="" method="post" class="registration-form">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Langkah 1 / 3</h3>
<p>Keterangan Responden</p>
</div>
<div class="form-top-right">
<img src="<?=base_url()?>assets/multiplesteps/img/logorsudtebet.png">
<!--<i class="fa fa-user"></i>-->
</div>
</div>
<div class="form-bottom">
<div class="form-group col-md-12">
<label class="col-sm-6">Usia Responden</label>
<input class="form-control col-md-6" type="text" placeholder="Isi Usia Anda" name="usia">
</div>
<div class="form-group col-md-12">
<label class="col-md-6">Status Perkawinan</label>
<div class="col-md-12">
<input class="radio" type="radio" name="gender" value="male"> Belum Kawin
<input type="radio" name="gender" value="male"> Kawin
<input type="radio" name="gender" value="male"> Cerai Hidup
<input type="radio" name="gender" value="male"> Cerai Mati
</div>
</div>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Step 2 / 3</h3>
<p>Set up your account:</p>
</div>
<div class="form-top-right">
<i class="fa fa-key"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label class="sr-only" for="form-email">Email</label>
<input type="text" name="form-email" placeholder="Email..." class="form-email form-control" id="form-email">
</div>
<div class="form-group">
<label class="sr-only" for="form-password">Password</label>
<input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password">
</div>
<div class="form-group">
<label class="sr-only" for="form-repeat-password">Repeat password</label>
<input type="password" name="form-repeat-password" placeholder="Repeat password..."
class="form-repeat-password form-control" id="form-repeat-password">
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Step 3 / 3</h3>
<p>Social media profiles:</p>
</div>
<div class="form-top-right">
<i class="fa fa-twitter"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label class="sr-only" for="form-facebook">Facebook</label>
<input type="text" name="form-facebook" placeholder="Facebook..." class="form-facebook form-control" id="form-facebook">
</div>
<div class="form-group">
<label class="sr-only" for="form-twitter">Twitter</label>
<input type="text" name="form-twitter" placeholder="Twitter..." class="form-twitter form-control" id="form-twitter">
</div>
<div class="form-group">
<label class="sr-only" for="form-google-plus">Google plus</label>
<input type="text" name="form-google-plus" placeholder="Google plus..." class="form-google-plus form-control" id="form-google-plus">
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="submit" class="btn">Sign me up!</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script src="<?=base_url()?>assets/multiplesteps/js/jquery-1.11.1.min.js"></script>
<script src="<?=base_url()?>assets/multiplesteps/bootstrap/js/bootstrap.min.js"></script>
<script src="<?=base_url()?>assets/multiplesteps/js/jquery.backstretch.min.js"></script>
<script src="<?=base_url()?>assets/multiplesteps/js/retina-1.1.0.min.js"></script>
<script src="<?=base_url()?>assets/multiplesteps/js/scripts.js"></script>
</body>
</html>
Here's my jQuery code:
$('.registration-form fieldset:first-child').fadeIn('slow');
$('.registration-form input[type="text"], .registration-form input[type="password"], .registration-form textarea').on('focus', function() {
$(this).removeClass('input-error');
});
How can I achieve this functionality?
I want to do that when some one select the option one then 1st input is enabled using jQuery
here is the sample code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-material">
<label for="storeCategory">Store Details</label>
<select class="form-control" id="storeABDetails">
<option value="message">Message</option>
<option value="image">Image</option>
<option value="video">Video</option>
</select>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-material">
<input type="text" class="form-control" id="shortMessage" name="shortMessage" placeholder="Please enter the short message" >
<label for="shortMessage">Short Message</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-material">
<input type="file" id="image" name="storeImage">
<label for="storeImage">Store Image</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-material">
<input type="file" id="video" name="storeVideo">
<label for="storeVideo">Store Video</label>
</div>
</div>
</div>
If message is selection the message input is enabled and when image and video is selection then image and video selection enabled and disabled.
I want the jquery how to do that please help me out
You need to use change() event to detect when the select was changed.
I was changed the value of Message to shortMessage so it will easier to get the value and find the right input.
Use .prop function to enable\disable the inputs.
var ddl = $('#storeABDetails').change(function() {
var val = ddl.val();
$('.form-material input').prop('disabled', true);
$('#' + val).prop('disabled', false);
});
ddl.trigger('change')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-material">
<label for="storeCategory">Store Details</label>
<select class="form-control" id="storeABDetails">
<option value="shortMessage">Message</option>
<option value="image">Image</option>
<option value="video">Video</option>
</select>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-material">
<input type="text" class="form-control" id="shortMessage" name="shortMessage" placeholder="Please enter the short message" >
<label for="shortMessage">Short Message</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-material">
<input type="file" id="image" name="storeImage">
<label for="storeImage">Store Image</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-material">
<input type="file" id="video" name="storeVideo">
<label for="storeVideo">Store Video</label>
</div>
</div>
</div>
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..