I am trying to use an external JS file to validate some forms. I am just trying to change field colors if they are left blank. I can not get my JS file to work with the HTML file. When submitting blank fields the page just stays the same. I just need it to see that field are being left blank, and in return back with the red color on the blank fields.
Here is my HTML file:
<html>
<head lang="en">
<meta charset="utf-8">
<title>Form + JavaScript</title>
<link rel="stylesheet" href="lab6_problem1.css" />
<script type="text/javascript" src="lab6_problem1.js"></script>
</head>
<body>
<form method="get" action="" id="mainForm" onsubmit="return validateForm()">
<fieldset>
<legend>Photo Details</legend>
<table>
<tr>
<td colspan="2">
<p>
<label>Title</label><br/>
<input type="text" name="title" size="80" class="required" />
</p>
<p>
<label>Description</label><br/>
<textarea name="description" rows="5" cols="61" class="required"></textarea>
</p>
</td>
</tr>
<tr>
<td>
<p>
<label>Continent</label><br/>
<select name="continent">
<option>Choose continent</option>
<option>Africa</option>
<option>Asia</option>
<option>Europe</option>
<option>North America</option>
<option>South America</option>
</select>
</p>
<p>
<label>Country</label><br/>
<select name="country">
<option>Choose country</option>
<option>Canada</option>
<option>Mexico</option>
<option>United States</option>
</select>
</p>
<p>
<label>City</label><br/>
<input type="text" name="city" list="cities" size="40"/>
<datalist id="cities">
<option>Calgary</option>
<option>Montreal</option>
<option>Toronto</option>
<option>Vancouver</option>
</datalist>
</p>
</td>
<td>
<div class="box">
<label>Copyright? </label><br/>
<input type="radio" name="copyright" value="1">All rights reserved<br/>
<input type="radio" name="copyright" value="2" checked>Creative Commons<br/>
</div>
<div class="box">
<label>Creative Commons Types </label><br/>
<input type="checkbox" name="cc" >Attribution <br/>
<input type="checkbox" name="cc" >Noncommercial <br/>
<input type="checkbox" name="cc" >No Derivative Works <br/>
<input type="checkbox" name="cc" >Share Alike
</div>
</td>
</tr>
<tr>
<td colspan="2" >
<div class="rectangle">
<label>I accept the software license</label>
<input type="checkbox" name="accept" class="required">
</div>
</td>
</tr>
<tr>
<td>
<p>
<label>Rate this photo: <br/>
<input type="number" min="1" max="5" name="rate" />
</p>
<p>
<label>Color Collection: <br/>
<input type="color" name="color" />
</p>
</td>
<td>
<div class="box">
<p>
<label>Date Taken: <br/>
<input type="date" name="date" />
</p>
<p>
<label>Time Taken: <br/>
<input type="time" name="time" />
</p>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="rectangle centered">
<input type="submit" class="rounded"> <input type="reset" value="Clear Form" class="rounded">
</div>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Here is my JS file:
function validateForm() {
var requiredField = document.getElementByClassName("required")
var mainForm = document.getElementById("mainForm");
document.getElementById("mainForm").onsubmit = function(e){
var titleField = requiredField[0].value;
var descriptionField = requiredField[1].value;
var checkboxField = requiredField[2];
if(titleField === ""){
requiredField[0].parentNode.style.backgroundColor= "red";
requiredField[0].style.backgroundColor= "red";
e.preventDefault();
}
if(descriptionField === ""){
requiredField[1].parentNode.style.backgroundColor= "red";
requiredField[1].style.backgroundColor= "red";
e.preventDefault();
}
if(checkboxField.type=="checkbox"){
if(checkboxField.checked === false){
requiredField[2].parentNode.style.backgroundColor= "red";
e.preventDefault();
}
}
}
}
You can even run the your js function if your input field value or selected option changes.
Use the onchange="validateForm()" in the select,text area, and text html element.
It will look like this for a select option list.
<select name="country" onchange="validateForm()">
<option>Choose country</option>
<option>Canada</option>
<option>Mexico</option>
<option>United States</option>
</select>
Related
I'm trying to make a simple drop down menu which will have two elements: "male" and "female". I'm using a button to have these elements become visible. The problem is that they become visible but only for a fraction of a second and go back to being hidden.
Here's my code:
<html>
<head>
<title>
Validation Form
</title>
</head>
<body>
<h1>
Validation Form
</h1>
<form id="contactForm" action="" >
<fieldset>
<legend>Validation</legend>
<p>
<label for="firstname">First Name</label>
<input id="firstname" name="firstname" type="text"/>
</p>
<p>
<label for="lastname">Last Name</label>
<input id="lastname" name="lastname" type="text" />
</p>
<p>
<label for="gender">Gender</label>
<input id="gender" name="gender" type="text" />
</p>
<div class="dropdown">
<button id="btn_drop" onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" style="display: none">
<p id="drop_male">Male</p>
<p id="drop_female">Female</p>
</div>
</div>
<p>
<label for="website">Website</label>
<input id="website" name="website" type="text" />
</p>
<p>
<input type="button" id="submit" name="submit" value="Submit" />
<input type="reset" value="clear" />
</p>
</fieldset>
</form>
<script>
var dropBtn = document.getElementById("btn_drop");
dropBtn.onclick = function () {
// show all elements on clicking submit!
var drop = document.getElementById("myDropdown");
drop.style.display = 'block';
}
</script>
</body>
</html>
Look at you browser console. I assume you have an error because you didn't declare myFunction.
Please read this URL: http://www.w3schools.com/jsref/event_onclick.asp and use one of described approaches.
you can make this without javascript live fiddle with css
<p>
<label for="gender">Gender</label>
<select id="gender" name="gender" type='select' >
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</p>
I am trying to display the data values from one html page to another html page using cookies and JavaScript. When I am using the "Method=Get",Url shows the values of registration page in "details.html" in browser. But when I try "Method=POST" I am not able to display the values in "details.htm" by using cookies and JavaScript.
Can anyone to help me to display the values from register.htm to details.htm by using cookies and JavaScript.
The two HTML and along with JS:
Register.htm file:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightblue;}
h1 {color:blue;
text-align:center;
text-decoration:underline;}
.rightAlign {text-align:right;
padding-right:5px;
width:50%}
</style>
<script>
function clearData() {
document.forms[0].firstname.value="";
document.forms[0].lastname.value="";
document.forms[0].dob.value="";
document.forms[0].state.value="";
document.forms[0].email.value="";
document.forms[0].tel.value="";
document.forms[0].pwd.value="";
document.getElementById('male').checked=false;
document.getElementById('female').checked=false;
}
function submitData() {
document.cookie='cookie_firstname='+document.forms[0].firstname.value+'path=/'
document.cookie='cookie_lastname='+document.forms[0].lastname.value+'path=/'
document.cookie='cookie_dob='+document.forms[0].dob.value+'path=/'
document.cookie='cookie_state='+document.forms[0].state.value+'path=/'
document.cookie='cookie_email='+document.forms[0].email.value+'path=/'
document.cookie='cookie_tel='+document.forms[0].tel.value+'path=/'
document.cookie='cookie_sex='+document.forms[0].sex.value+'path=/'
document.cookie='cookie_pwd='+document.forms[0].pwd.value+'path=/'
document.forms[0].submit();
}
</script>
</head>
<body>
<form action="regDetails.html" method="post" onsubmit="submitData()">
<table style="border:0px; width:100%">
<tr><td colspan = 2>
<h1>Online Registration</h1>
</td>
</tr>
<tr><td colspan = 2 class="rightAlign">
<p style="color:red; font-family:verdana; font-size:11px;"><b>Note:</b> All * marks fields are mandatory to fill.</p>
</td>
</tr>
<tr>
<td class"rightAlign"><b>First Name</b><label style="color:red;">*</label></td>
<td style="font-family:courier;"><input type="text" id="firstname" name="firstname" required/></td>
</tr>
<tr>
<td class"rightAlign"><b>Last Name</b><label style="color:red;"></label></td>
<td style="font-family:courier;"><input type="text" id="lastname" name="lastname"></td>
</tr>
<tr>
<td class"rightAlign"><b>Date Of Birth</b><label style="color:red;">*</label></td>
<td style="font-family:courier;"><input type="date" id="dob" name="dob" required /></td>
</tr>
<tr>
<td class"rightAlign"><b>Sex</b><label style="color:red;">*</label></td>
<td style="font-family:courier;">
<input type="radio" name="sex" value="male" id="male" required>Male
<input type="radio" name="sex" value="female" id="female" required>Female</td>
</tr>
<tr>
<td class"rightAlign"><b>State</b><label style="color:red;">*</label></td>
<td style="font-family:courier;"><input list="state" id="state" name="state" required/></td>
<datalist id="state">
<option value="punjab">
<option value="delhi">
<option value="haryana">
<option value="odisha">
<option value="madhyapradesh">
<option value="chattisgarh">
<option value="karnataka">
<option value="tamilnadu">
<option value="goa">
<option value="rajasthan">
<option value="bihar">
<option value="andhrapradesh">
</datalist>
</tr>
<tr>
<td class"rightAlign"><b>Email Id</b><label style="color:red;">*</label></td>
<td style="font-family:courier;"><input type="email" id="email" name="email" required/></td>
</tr>
<tr>
<td class"rightAlign"><b>Telephone</b><label style="color:red;"></label></td>
<td style="font-family:courier;"><input type="text" id="tel" name="tel"></td>
</tr>
<tr>
<td class"rightAlign"><b>Password</b><label style="color:red;">*</label></td>
<td style="font-family:courier;"><input type="password" id="pwd" name="pwd" required/></td>
</tr>
<tr>
<td style="padding-top:10px">
<input type="submit" value="Submit" /></td>
<td class"rightAlign" style="padding-top:10px">
<button type="button" onclick="clearData()">Clear</button>
</td>
</tr>
</table>
</form>
</body>
</html>
details.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/quiz.js">
</script>
</head>
<body onload="showDetails()">
<form>
<div id="detailsContainerDiv">
<p>You have registered successfully with the following details:-</p>
<div id="details" style="width:400px;">
<table style="width:400px;" border="1">
<tr><td>First Name</td><td id="firstname" class="bold"></td></tr>
<tr><td>Last Name</td><td id="lastname" class="bold"></td></tr>
<tr><td>DOB</td><td id="dob" class="bold"></td></tr>
<tr><td>Sex</td><td id="sex" class="bold"></td></tr>
<tr><td>State</td><td id="state" class="bold"></td></tr>
<tr><td>Email</td><td id="email" class="bold"></td></tr>
<tr><td>Telephone</td><td id="tel" class="bold"></td></tr>
<tr><td>Password</td><td id="pwd" class="bold"></td></tr>
</table>
</div>
<br />
<div>
<button type="button" onclick="startQuiz()">Start Quiz</button>
</div>
</div>
<div id= "quizContainerDiv" style="display:none;">
<ol>
<li>
<h3>What is the capital of Tamilnadu?</h3>
<div>
<input type="radio" name="q1ans" id="q1ans-A" value="A"/>
<label for="q1ans-A">A)Chennai</label>
</div>
<div>
<input type="radio" name="q1ans" id="q1ans-B" value="B"/>
<label for="q1ans-B">B)Bangalore</label>
</div>
<div>
<input type="radio" name="q1ans" id="q1ans-C" value="C"/>
<label for="q1ans-C">C)Delhi</label>
</div>
<div>
<input type="radio" name="q1ans" id="q1ans-D" value="D"/>
<label for="q1ans-D">D)None of the above</label>
</div>
</li>
<li>
<h3>Who is the current Prime Minister of India?</h3>
<div>
<input type="radio" name="q2ans" id="q2ans-A" value="A"/>
<label for="q2ans-A">A)Rahul Gadhi</label>
</div>
<div>
<input type="radio" name="q2ans" id="q2ans-B" value="B"/>
<label for="q2ans-B">B)Narendra Modi</label>
</div>
<div>
<input type="radio" name="q2ans" id="q2ans-C" value="C"/>
<label for="q2ans-C">C)Manmohan Singh</label>
</div>
<div>
<input type="radio" name="q2ans" id="q2ans-D" value="D"/>
<label for="q2ans-D">D)None of the above</label>
</div>
</li>
<li>
<h3>Who is the winner of 2015 Cricket WorldCup?</h3>
<div>
<input type="radio" name="q3ans" id="q3ans-A" value="A"/>
<label for="q3ans-A">A)India</label>
</div>
<div>
<input type="radio" name="q3ans" id="q3ans-B" value="B"/>
<label for="q3ans-B">B)Australia</label>
</div>
<div>
<input type="radio" name="q3ans" id="q3ans-C" value="C"/>
<label for="q3ans-C">C)Bangladesh</label>
</div>
<div>
<input type="radio" name="q3ans" id="q3ans-D" value="D"/>
<label for="q3ans-D">D)Pakistan</label>
</div>
</li>
<li>
<h3>When is the Independence day of India?</h3>
<div>
<input type="radio" name="q4ans" id="q4ans-A" value="A"/>
<label for="q4ans-A">A)26th January</label>
</div>
<div>
<input type="radio" name="q4ans" id="q4ans-B" value="B"/>
<label for="q4ans-B">B)15th July</label>
</div>
<div>
<input type="radio" name="q4ans" id="q4ans-C" value="C"/>
<label for="q4ans-C">C)15th August</label>
</div>
<div>
<input type="radio" name="q4ans" id="q4ans-D" value="D"/>
<label for="q4ans-D">D)None of the above</label>
</div>
</li>
</ol>
<button type="button" onclick="submitQuiz()">Submit Quiz</button>
</div>
<div id="quizResultDiv" style"display:none;">
</div>
<div>
<label>Hi <span id="name" class="highlightAns"></span>, you have successfully completed the Quiz.</label>
<h3><span id="numOfCorrect"></span>/4 correct.</h3>
<label>your score is <span id="score" class="highlightAns"></span></label>
</div>
</form>
</body>
</html>
javascript file:
function showDetails() {
document.getElementById("firstname").innerHTML = readCookie("cookie_firstname");
document.getElementById("lastname").innerHTML = readCookie("cookie_lastname");
document.getElementById("dob").innerHTML = readCookie("cookie_dob");
document.getElementById("state").innerHTML = readCookie("cookie_state");
document.getElementById("email").innerHTML = readCookie("cookie_email");
document.getElementById("tel").innerHTML = readCookie("cookie_tel");
document.getElementById("sex").innerHTML = readCookie("cookie_sex");
document.getElementById("pwd").innerHTML = readCookie("cookie_pwd");
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++)
{
var c = ca[i];
while (c.cahrAt(0)=='')
c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) {
var cookieData = c.substring(nameEQ.length,c.length);
var actualData = cookieData.substring(0,cookieData.indexOf('path'));
return actualData;
}
return null;
}
function startQuiz() {
document.getElementById("detailsContainerDiv").style.display='none';
document.getElementById("quizContainerDiv").style.display='block';
}
function submitQuiz() {
document.getElementById("quizContainerDiv").style.display='none';
document.getElementById("quizResultDiv").style.display='block';
var correctAnsCount = 0;
if (document.forms[0].q1ans.value == "A") {correctAnsCount++;}
if (document.forms[0].q2ans.value == "B") {correctAnsCount++;}
if (document.forms[0].q3ans.value == "B") {correctAnsCount++;}
if (document.forms[0].q4ans.value == "C") {correctAnsCount++;}
var score = correctAnsCount*10;
document.getElementById("name").innerHTML = readCookie("cookie_firstname");
document.getElementById("numOfCorrect").innerHTML = correctAnsCount;
document.getElementById("score").innerHTML = score;
}
save value:
localstorage.setItem("name in which you want to save value",object/variable)
get value:
localstorage.getItem("name in which you want to save value");
Hey guys I have a question. I am trying to put what I select from a drop down box into a input field and I am not sure how to do it.
Here is my code:
<body>
<tr valign="top">
<select id="dropdown">
<option value="None">None</option>
<option value="manufactor">Manufactor *Pending</option>
<option value="commercial">Commercial Series *Pending</option>
<option value="part">Part</option>
<option value="motor">Motor</option>
</select>
<table>
<td>
<label for="Make1">Make:</label><br />
<input type="text" name="Make" id="Make1" value="" maxlength="20">
</td>
<td>
<label for="Manufactor1">Manufactor:</label><br />
<input type="text" name="Manufactor" id="Manufactor1" value="" maxlength="15">
</td>
<td>
<label for="Commercial1">Commercial:</label><br />
<input type="text" name="Commercial" id="Commercial1" value="" maxlength="15">
</td>
<td>
<label for="Part1">Part:</label><br />
<input type="text" name="Part" id="Part1" value="" maxlength="15">
</td>
<td>
<label for="motor1">Motor:</label><br />
<input type="text" name="Motor" id="motor1" value="" maxlength="30">
</td>
<td>
<label for="Dropdown1">Search Term:</label><br /> <--- want this to show what i selected from dropdown at the top.
<input type="text" name="Dropdown" id="Dropdown1" value="" maxlength="30">
</td>
</table>
</tr>
So I am wanting at the bottom Dropdown1 to show what I picked from the Dropdown but I am unsure of how this is done.
By using Jquery you can achieve your requirement.
By using Change function.
Here is the working fiddle for you. Fiddle
$('#dropdown').change(function(){
$('#Dropdown1').val($(this).find(":selected").text())
;
});
-Help
How i can update date and time value in a field, when i called popup?
Because in my case the datetime django was updated on refresh.
My popup :
$(document).ready(function(){
PopUpHide();
});
function PopUpShow(){
$("#popup1").show();
$(document).keyup(function(ev){
if(ev.keyCode == 27)
$("#popup1").hide();
});
}
function PopUpHide(){
$("#popup1").hide();
}
In html form popup :
<div class="b-popup b-popup-content" id="popup1">
<div class="cleanuphtml-1">
Add 'problem' item
</div>
<form action="" method="post">
{% csrf_token %} <input id="id_pk_post" value="1" maxlength="1" name="pk_post" type="text" /> <input id="id_post_request" value="1" maxlength="1" name="post_request" type="text" />
<div class="cleanuphtml-2">
<label for="id_description_post">Description:</label>
<textarea id="id_description_post_id" maxlength="9999" name="description_post" autofocus="" onkeyup="enableField(this.form,this.value)" type="text">
</textarea>
</div>
<div class="cleanuphtml-4">
<label for="id_start_date">Start date : <input type="text" name="start_date" id="datetimepicker" /> <label>End date :</label> <input type="text" name="end_date" id="datetimepicker2"
class="cleanuphtml-3" /></label>
</div>
<div class="cleanuphtml-6">
<p class="cleanuphtml-5">
<label>Priority :</label> <select method="post" name="priority_post">
<option value="1" id="id_priority_post" name="priority_post">
High
</option>
<option value="2" id="id_priority_post" name="priority_post">
Medium
</option>
<option value="3" id="id_priority_post" name="priority_post" selected="selected">
Low
</option>
</select>
</p>
</div>
<div class="cleanuphtml-9">
<input type="submit" name="bttnsubmit" value="Add" onclick="window.location.href='/'" disabled="true" class="cleanuphtml-7" /> <input type="button" value="Cancel" onclick="PopUpHide()"
class="cleanuphtml-8" />
</div>
</form>
</div>
This is with jquery called calendar :
$('#datetimepicker').datetimepicker()
.datetimepicker({value:'{{ now_date|date:'Y-m-d H:i' }}',step:10});
I have a form containing 13 fieldsets , each containing non uniform number of fields. I want to use tab to navigate between the fields and in the end it will move on to the next fieldset.
I have written one javascript in which i have
$('#formElem > fieldset').each(function(){
var $fieldset = $(this);
$fieldset.children(':last').find(':input').keydown(function(e){
if (e.which == 9){
$('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
/* force the blur for validation */
$(this).blur();
e.preventDefault();
}
});
});
In my form when my page loads, when i click on tab button it moves on to the next page without traversing my fields in the current fieldset, but on the next fieldset clicking on tab makes makes my cursor to move to few fields then again without completing my fields it moves on to next fieldset.
I am giving details of my first fieldset in my form
<form id="formElem" name="formElem" action="report_form_submit.jsp" method="post">
<fieldset class="step">
<legend>General Information </legend>
<table>
<tr><td>
<p>
<label for="centers" >Name of the Center</label>
<%
if(user_gr.equals("MA") || user_gr.equals("Ad")){
%>
<select name="centers" id="centers" >
<option value="">Select Center</option>
<!-- Populate Combobox from Database -->
<%
while(rsCenters.next()){
%>
<option value="<%= rsCenters.getInt("id") %>"><%= rsCenters.getString("c_name") %></option>
<%
}
// rsCenters.beforeFirst();
%>
<!-- Populate Combobox from Database -->
</select>
<%
}
else{
//System.out.println("...SQL CENTER :::"+sqlCenter);
while(rsCenters.next()){
center_name=rsCenters.getString("c_code");
%>
<input type="hidden" name="centers" id="centers" value="<%= rsCenters.getInt("id") %>" />
<input type="text" name="" id="" value="<%= rsCenters.getString("c_name") %>" disabled/>
<%
}
}
%>
<!-- <input id="username" name="username" /> -->
<%
}
catch(Exception ex){
System.out.println(ex);
}
%>
</p>
</td>
<td>
<p>
<label for="dt_enrolment">Date of enrolment</label>
<input tabindex="1" id="dt_enrolment" name="dt_enrolment" type="text" onclick="gen_dt()" />
</p>
</td>
<td>
<p>
<label for="srl_no">Serial No</label>
<% if(!rsserial_no.next())
{center_serial_no=center_name+1;}
else
{
String received_serial_no=rsserial_no.getString("serial_no");
center_serial_no=received_serial_no.substring(0, 3);
String center_serial_no1=received_serial_no.substring(3);
//int new_serial_no=0;
int new_serial_no=Integer.parseInt(center_serial_no1);
new_serial_no=new_serial_no+1;
center_serial_no=center_serial_no+new_serial_no;}%>
<input type="hidden" name="srl_no" id="srl_no" value="<%= center_serial_no %>" />
<input id="" name="" type="text" value="<%=center_serial_no%>" disabled />
</p>
</td>
</tr>
<tr>
<td>
<p>
<label for="study_enrolment_no">Study enrolment No</label>
<input tabindex="2" id="study_enrolment_no" name="study_enrolment_no" type="text" />
</p>
</td>
<td>
<p>
<label for="nm">Name</label>
<input tabindex="3" id="nm" name="nm" type="text" />
</p>
</td>
<td>
<p>
<label for="age">Age</label>
<input tabindex="4" id="age" name="age" type="text"/>
</p>
</td>
</tr>
<tr>
<td>
<p>
<label for="gender">Gender</label>
<!-- <input id="gender" name="gender" type="text" /> -->
<select id="gender" name="gender" tabindex="">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</p>
</td>
<td>
<p>
<label for="address">Address</label>
<input id="address" name="address" type="text" tabindex=""/>
</p>
</td>
<td>
<p>
<label for="ph_no">Phone No</label>
<input id="ph_no" name="ph_no" type="text" class="nocheck" tabindex=""/>
</p>
</td>
</tr>
<tr>
<td>
<p>
<label for="occupation">Occupation</label>
<input id="occupation" name="occupation" type="text" tabindex=""/>
</p>
</td>
<td>
<p>
<label for="marital_status">Marital status</label>
<select id="maritial_status" name="maritial_status" tabindex="">
<option value="">Select</option>
<option value="Yes">Married</option>
<option value="No">Unmarried</option>
</select>
</p>
</td>
<td>
<p>
<label for="blood_gr">Blood group</label>
<input id="blood_gr" name="blood_gr" type="text" tabindex=""/>
</p>
</td>
</tr>
<tr>
<td>
<p>
<label for="religion">Religion/Cast/Community</label>
<select id="religion" name="religion" class="nocheck" tabindex="">
<option value="">Select</option>
<option value="Hindu">Hindu</option>
<option value="Muslim">Muslim</option>
<option value="Christian">Christian</option>
<option value="Buddhist">Buddhist</option>
<option value="Other">Other</option>
</select>
</p>
</td>
<td>
<p>
<label for="vac_hbsag">Vaccinated for HBsAg</label>
<select id="vac_hbsag" name="vac_hbsag" tabindex="">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</p>
</td>
<td>
<p>
<label for="monthly_income">Monthly Income</label>
<input id="monthly_income" name="monthly_income" type="text" tabindex=""/>
</p>
</td>
</tr>
<tr>
<td colspan="3">
<p>
<label for="edu_level">Education level</label>
<select id="edu_level" name="edu_level" tabindex="">
<option value="">Select</option>
<%
while(rsLevel.next()){
%>
<option value="<%= rsLevel.getInt("id") %>"><%= rsLevel.getString("edu_name") %></option>
<%
}
%>
</select>
</p>
</td>
</tr>
</table>
</fieldset>
tell me how can i fix this problem. even though i have use tabindex but it is not working properly
Focus the initial element manually
document.getElementById("initFocus").focus();
and use tabindex, it works good. See the fiddle. Also read this - some interesting things about playing with tabindexes.