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.
Related
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>
I would like to only show a particular row in a form when the option selected includes the word 'split'
I have used a class on the row to be hidden and have got this far but can not get it to work
$(document).ready(function() {
$(".split td").hide();
$('#os0').change(function() {
var val = $(this).val();
if (val == "*split*") {
$('.split td').show();
} else {
$('.split td').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<tr>
<td>
<input type="hidden" name="product[]" value="Type" /> Type:
<select name="product[]" id="os0">
<option value="Anodised closed">Anodised closed </option>
<option value="Plain closed">Plain closed</option>
<option value="Black filled closed">Plain closed Black filled </option>
<option value="Anodised split">Anodised split</option>
<option value="Plain split">Plain split</option>
<option value="Black filled split">Plain split Black filled </option>
</select>
</td>
</tr>
<tr>
<td class="split">
<input type="hidden" name="product[]" value="yrno" />Please specify year if required:
<input type="text" name="product[]" id="os9" onkeypress="return numbersonly(this, event)" maxlength="4" class="formfill" style="width: 50px;" />
</td>
</tr>
can anyone tell me where I am going wrong please :)
You selection $(".split td") must be like $("td.split")
and to search for existence of substring use indexOf() which returns first index of substring in main string.
$(document).ready(function() {
$('td.split').hide();
$('#os0').change(function() {
var val = $(this).val();
if (val.indexOf("split") > -1) {
$('td.split').show();
} else {
$('td.split').hide();
}
});
});
td.split {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="hidden" name="product[]" value="Type" />Type:
<select name="product[]" id="os0">
<option value="Anodised closed">Anodised closed</option>
<option value="Plain closed">Plain closed</option>
<option value="Black filled closed">Plain closed Black filled</option>
<option value="Anodised split">Anodised split</option>
<option value="Plain split">Plain split</option>
<option value="Black filled split">Plain split Black filled</option>
</select>
</td>
</tr>
<tr>
<td class="split">
<input type="hidden" name="product[]" value="yrno" />Please specify year if required:
<input type="text" name="product[]" id="os9" onkeypress="return numbersonly(this, event)" maxlength="4" class="formfill" style="width: 50px;" />
</td>
</tr>
</table>
Changing the select options on clicking check boxes, i have list of 8 check boxes dynamically it counts checked check boxes for example if i click on 1 check box it will show Number Of Credits Selected : 1 , and if i click on 2 check boxes it will show Number Of Credits Selected : 2 and soon,
below the check boxes i have select options i want dynamically change of select option when check boxes are checked
example : if i click on two check boxes my select option should change to 2 selected and so on.
can somebody help me out in achieving it!
thanks!
Here is an demo example http://jsfiddle.net/Qac6J/552/
HTML
<div class="container" >
<table class="table table-striped">
<tr>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
</tr>
</table>
</div>
<div class="container">
<div class="row">
<div class="text-center">
<h1 class="print_no_of_credits">Number Of Credits Selected : 0</h1>
</div>
</div>
</div>
</div>
<form class="form-group">
<select class="form-control">
<option value="1 selected">1 selected</option>
<option value="2 selected">2 selected</option>
<option value="3 selected">3 selected</option>
<option value="4 selected">4 selected</option>
<option value="5 selected">5 selected</option>
<option value="6 selected">6 selected</option>
<option value="7 selected">7 selected</option>
<option value="8 selected">8 selected</option>
<option value="9 selected">9 selected</option>
<option value="10 selected">10 selected</option>
<option value="11 selected">11 selected</option>
<option value="12 selected">12 selected</option>
</select>
</form>
JQUERY
$(document).ready(function()
{
$('input[type="checkbox"]').click(function()
{
var total = ($('.no_of_credits:checked').length)+0;
$(".print_no_of_credits").html( "<h1>Number Of Credits Selected : "+total+"</h1>" ).length;
});
});
Just add the below line to your click event
$('.form-control').val(total + " selected");
So your updated code would be:
$('input[type="checkbox"]').click(function() {
var total = ($('.no_of_credits:checked').length) + 0;
$(".print_no_of_credits").html("<h1>Number Of Credits Selected : " + total + "</h1>").length;
$('.form-control').val(total + " selected");
});
UPDATED FIDDLE
Update
You can modify your var total calculation as
var total=$('.no_of_credits:checked').length
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});