Some more functionality in HTML/CSS Code

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

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.

Check it out

Thanks for reply

Hi,

Not sure what you mean here. This, maybe?

input:focus { 
  border: solid 2px red; 
  background-color: #fcc;
}

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?

@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.

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?

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:

How about displaying an alert before close?

Ok. How might you go about implementing that?

1 Like

How can I run my alert message when user has checked only no not in case of yes?

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

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?

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.