vngx
February 25, 2015, 11:28am
1
Hi there
this is my complete code of Employee Registration form
I want to add some more functionality in it.
1)First I want that when a User start typing something in a field then that background should come in focus.
2)When I start adding employment then if user press on past Employment as No then whole block of dynamically adding employment should dissappear currently only Add button disappear.
3)I want to upload an Image of user photo how to acheive it.
4)At the End their is a button so I also want to put some validation on it.
I know my post are so long.I am not asking anyone to write code for me.I will write that own my self.Why I am sharing full code,just give me a clue that how I can acheive all these points.
(If someone can give me working demo will be thankful to him/her)
Thanks
dsont
February 28, 2015, 6:19am
2
Do some research around javascript form libraries. Google search within this year , or you get outdated solutions.
JQuery is going to be a nightmare once it is 500 lines long, so find a library to handle your forms.
Hi,
vngx:
First I want that when a User start typing something in a field then that background should come in focus.
Not sure what you mean here. This, maybe?
input:focus {
border: solid 2px red;
background-color: #fcc;
}
vngx:
When I start adding employment then if user press on past Employment as No then whole block of dynamically adding employment should dissappear currently only Add button disappear.
You have to attach an event handler to the past employment radio buttons which then selects the correct elements and alters their display properties accordingly.
This will involve some server-side scripting. Are you comfortable with PHP?
Do I understand correctly that you want to validate the form inputs on submission?
vngx
March 2, 2015, 10:36am
6
@Pullo
Awesome you got me buddy…What I want thanks.
i have solved 2 points(1) and (3) I am using JSP/Servlet for server side scripting
Now only point(2) and point(4) left in point(4) I just want to put some validation before submitting data to server so how to use that?
(2)
i want when clicks on No RadioButton in AddEmployment then whole block shoul close asking for a simple alert dialog.
I hope you will get my point.
If not please ask.Thanks for quick reply
Hi,
Let’s address point 2, first.
Please make a JSFiddle of a simple form (without styling) containing only the past employment radio button, followed by the form fields you wish to hide.
Let me know when that is done and I will show you how to toggle the visibility.
vngx
March 2, 2015, 12:02pm
8
I have make a JSFiddle here some how.
I hope you got my point what I want
Thanks. What’s with the add/delete buttons. What are they for?
vngx
March 2, 2015, 12:09pm
10
When I click on add Button then whole block of emploment will display.As more I click on Add button block as much block are add.
When I click on Button delete then that block should delete
(These two points are working fine as of know)
Problem is once I have create more than 1 blocks and when I click on RadioButton “no” then only add is disappearing.I want with a Conformation alert message whole block(Including previous employment should close) close
Ok. You can toggle the visibility like this:
$("input[name='user_past_employ_status']").on("click", function(){
$(".template").toggle(this.value === "false" && this.checked);
});
Demo
Here we are supplying a Boolean switch to the toggle() method, which will show the jQuery collection of elements if the switch evaluates to true, and hide them if it evaluates to false:
vngx
March 2, 2015, 12:18pm
12
How about displaying an alert before close?
Ok. How might you go about implementing that?
1 Like
vngx
March 2, 2015, 12:30pm
14
How can I run my alert message when user has checked only no not in case of yes?
vngx
March 2, 2015, 12:46pm
15
I have posted all my code
can you check its still not working in case of RadioButton “no”
$("input[name='user_past_employ_status']").on("click", function(){
var sure = true;
if(this.value === "false"){
var sure = confirm("You sure?");
}
if(sure){
$(".template").toggle(this.value === "true" && this.checked);
} else {
return false;
}
});
Updated demo
vngx
March 2, 2015, 1:09pm
17
Here is my complete code
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ include file="/jsp/include.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registration Form</title>
<script type="text/javascript" src="http://localhost:8080/WebFormSpringHibernate/js/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="http://localhost:8080/WebFormSpringHibernate/css/mainfile.css"/>
<script type="text/javascript" src="http://localhost:8080/WebFormSpringHibernate/js/registration.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function initTemplates() {
$('.template').each(function () {
var template = $(this).children(),
key = template.attr('class') || 'template' + templates.length;
templates[key] = template;
$(this).remove();
});
}
var templates = {};
initTemplates();
//when the Add Field button is clicked
$("#add").click(function () {
//Append a new row of code to the "#items" div
$('#items').append(templates['emp_detail'].clone());
});
$(document).on('click', '.delete', function () {
$(this).parent().remove();
});
$(".deletefile").click(function () {
$(".deletefile").parent("div").remove();
});
$("input[name='user_past_employ_status']").on("click", function(){
var sure = true;
if(this.value === "true"){
var sure = confirm("You sure?");
}
if(this.value=="false"){
$(".template").toggle(this.value === "false" && this.checked);
$('#add').css('display','block');
} else {
return false;
}
});
$("#mobile_Add").click(function(){
$('#mobile_block').css('display','block');
var c = $('#mobile_block:first').clone(true);
$('#mobile_block:last').after(c);
});
$('#mob_del').click(function(){
$(this).closest('#mobile_block').remove();
});
$("input[name='user_past_employ_status']").on("click", function(){
$(".template").toggle(this.value === "false" && this.checked);
});
});
</script>
</head>
<body>
<div id="page-wrap">
<ul class="dropdown">
<li><a href="http://localhost:8080/WebFormSpringHibernate/jsp/registration.jsp">Add Employee</a></li>
<li><a href="http://localhost:8080/WebFormSpringHibernate/jsp/searchemployee.jsp">Search Employee</a></li>
<li><a href="http://localhost:8080/WebFormSpringHibernate/jsp/deleteemployee.jsp">Delete Employee</a></li>
<li><a href="http://localhost:8080/WebFormSpringHibernate/jsp/updateemployee.jsp">Update Employee</a></li>
</ul>
</div>
<div id="main_container">
<form action="http://localhost:8080/WebFormSpringHibernate/UploadServlet" method="get" onclick="validate()">
<br>
<br>
Id:<input type="text" style="margin-left: 110px;"name="user_id" id="user_id"><br>
First_Name<input type="text" style="margin-left: 53px;" name="user_first_name" id="user_first_name"><br>
Last_Name<input type="text" style="margin-left: 53px;" name="user_last_name" id="user_last_name"><br>
DOB<input type="text" style="margin-left: 92px;" name="user_dob" id="user_dob"><br>
Age<input type="text" style="margin-left: 99px;" name="user_age" id="user_age"/><br>
Email<input type="text" style="margin-left: 93px;" name="user_email" id="user_email"/><br>
Mobile<input type="text" style="margin-left: 84px;" name="user_mobile" id="user_mobile"/>
<input type="button" id="mobile_Add" value="AddAnother"></br>
<div id="mobile_block">
<input type="text" style="margin-left: 135px;" name="user_mobile_other" id="mobile_text"/>
<input type="button" value="Delete" id="mob_del">
</div>
Marital Status<select style="margin-left: 40px;" name="user_marital_status">
<option value="married">Married</option>
<option value="unmarried">UnMarried</option>
</select><br><br>
<label>Id Proof</label>
<select name="user_id_proof" style="margin-left: 70px;">
<option>Votor Id</option>
<option>Driving License</option>
<option>Passport</option>
<option>Aadhar Card</option>
</select><br><br>
High_School
<input type="radio" value="true" id="complete_high_yes" name="user_high_status" style="margin-left: 39px;" onclick="high_yes()"><label for="high_yes">Yes</label>
<input type="radio" value="false" id="complete_high_no" name="user_high_status" onclick="high_no()"><label for="high_no">No</label>
<div id="high_school">
Name of School:<input type="text" style="margin-left: 23px;" name="user_high_ins_name" id="user_high_ins_name">
Board:<input type="text" name="user_high_board_name" id="user_high_board_name">
Year<select name="user_high_year">
<option>1974</option><option>1975</option><option>1976</option><option>1977</option><option>1978</option><option>1979</option><option>1980</option><option>1981</option>
<option>1982</option><option>1983</option><option>1984</option><option>1985</option><option>1986</option><option>1987</option><option>1988</option><option>1989</option>
<option>1990</option><option>1991</option><option>1992</option><option>1993</option><option>1994</option><option>1995</option><option>1996</option><option>1997</option><option>1998</option><option>1999</option>
<option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option><option>2006</option><option>2007</option><option>2008</option><option>2009</option><option>2010</option>
<option>2011</option><option>2012</option><option>2013</option><option>2014</option>
<option selected="selected">2015</option>
</select>
Percentage:
<input type="text" name="user_high_per" style="width: 50px;" id="user_high_per"><br>
</div>
<br>
Intermediate
<input type="radio" value="true" name="user_inter_status" id="complete_inter_yes" style="margin-left: 40px;" onclick="inter_yes()"><label for="complete_inter_yes">Yes</label>
<input type="radio" value="false" name="user_inter_status" id="complete_inter_no" onclick="inter_no()"><label for="complete_inter_no">No</label>
<div id="inter_school">
Name of School:<input type="text" style="margin-left: 27px;" name="user_inter_ins_name" id="user_inter_ins_name">
Board:<input type="text" name="user_inter_board_name" id="user_inter_board">
Year<select name="user_inter_year">
<option>1974</option><option>1975</option><option>1976</option><option>1977</option><option>1978</option><option>1979</option><option>1980</option>
<option>1981</option><option>1982</option><option>1983</option><option>1984</option><option>1985</option><option>1986</option><option>1987</option><option>1988</option><option>1989</option><option>1990</option>
<option>1991</option><option>1992</option><option>1993</option><option>1994</option><option>1995</option><option>1996</option><option>1997</option><option>1998</option><option>1999</option>
<option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option><option>2006</option><option>2007</option><option>2008</option><option>2009</option><option>2010</option>
<option>2011</option><option>2012</option><option>2013</option><option>2014</option>
<option selected="selected">2015</option>
</select>
Percentage:
<input type="text" name="user_inter_per" style="width: 50px;" id="user_inter_percent">
</div>
<br>
Past Employment:
<input type="radio" value="false" name="user_past_employ_status" id="pemp_yes" style="margin-left: 12px;"><label for="pemp_yes">Yes</label>
<input type="radio" value="true" name="user_past_employ_status" id="pemp_no"><label for="pemp_no">No</label>
<div class="template">
<div class="emp_detail">
<br>
<label>Name of Company/Organisation:</label>
<input type="text" class="emp_org" id="user_pastorg_name" name="user_pastorg_name"/>
<br>
<label>Role:</label>
<input type="text" class="emp_role" style="margin-left: 168px;" id="user_pastorg_role" name="user_pastorg_role"/>
<br>
<label>From:</label>
<input type="text" class="emp_from" style="margin-left: 160px;" id="user_pastorg_from" name="user_pastorg_from"/>
<label>To:</label>
<input type="text" class="emp_to" id="user_pastorg_to" name="user_pastorg_to"/>
<br>
<label>Total in Years:</label>
<input type="text" class="emp_total" style="margin-left: 110px;" id="user_pasttInY" name="user_pasttInY"/>
<br>
<button class="delete">Delete</button>
</div>
</div>
<div id="items">
</div>
<button type="button" id="add">Add</button>
<fieldset style="border-width: 10px; border-color: green;border: solid;">
<legend >Current Address:</legend>
Vill/Street Name: <input type="text" id="user_cur_street" name="user_cur_street"><br>
City: <input type="text" style="margin-left: 79px;" id="user_cur_city" name="user_cur_city"><br>
State: <input type="text" style="margin-left: 75px;" id="user_cur_state" name="user_cur_state"><br>
Pin: <input type="text" style="margin-left: 84px;" id="user_cur_pin" name="user_cur_pin"><br>
</fieldset>
<br>
<fieldset style="border-width: 10px; border-color: green; border: solid;">
<legend>Permanent Address:</legend>
Vill/Street Name: <input type="text" id="user_per_street" name="user_per_street"><br>
City: <input type="text" style="margin-left: 79px;" id="user_per_city" name="user_per_city"><br>
State: <input type="text" style="margin-left: 73px;" id="user_per_state" name="user_per_state"><br>
Pin: <input type="text" style="margin-left: 83px;" id="user_per_pin"name="user_per_pin"><br>
</fieldset>
<br>
<label>Profile Picture</label><input type="file" id="user_profile_pic" style="margin-left: 40px;" name="user_profile_pic"/><br/><br/>
<input type="submit" value="Submit" style="margin-left: 250px;"/>
</form>
</div>
</body>
</html>
this is my external js file
function high_yes()
{
document.getElementById("high_school").style.display="block";
}
function high_no()
{
document.getElementById("high_school").style.display="none";
}
function inter_yes()
{
document.getElementById("inter_school").style.display="block";
}
function inter_no()
{
document.getElementById("inter_school").style.display="none";
}
and this is my css file
a { text-decoration: none; }
ul { list-style: none; }
ul.dropdown { position: relative;}
ul.dropdown li { font-weight: bold; float: left; zoom: 1; background: #ccc; }
#page-wrap { width:800px; margin-left: 300px;}
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
ul.dropdown li a { display: block; padding: 4px 8px; border-right: 1px solid #333;
color: #222; }
ul.dropdown li:hover { background: #F3D673; color: black; position: relative; }
ul.dropdown li.hover a { color: black; }
#main_container {background-color:gray; width: 800px; height: 100%;margin-left: 338px;margin-top: 100px;}
.input_field {margin-left: 100px;}
#high_school {display: none;}
#inter_school {display: none;}
#items {margin-bottom: 1em;}
#add {display: none;}
#mobile_block {display: none;}
input:focus { border: solid 2px red; background-color: #fcc;}
now only thing that is not working is when I click on no then if I confrom then all added block of employment should remove.
Thanks for your reply
Ok, we’re moving away from this:
quite quickly.
First things first. Did you look at my updated demo?
vngx
March 2, 2015, 3:23pm
19
I am sharing my code because I am not getting what I want?
I have written all code myself.And I am highly thankful to you for providing your solutions.
I have updated my code according to your demo
The only Point left is how to remove complete employment block when I select no in radio button and confrom it
Thanks
Have a look at your page in your browser’s console.
You can normally access this by pressing F12.
You will see a bunch of errors that need fixing.