Login Project using Spring MVC

Download Jar Files from below Jar File

index.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Inventory Management</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<style type="text/css">

    .j1 .jumbotron{
        background: #0f0c29;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        height: 200px;
    }
    .jumbotron h1{
        color: white;
    }

.panel-login {
    border-color: #ccc;
    -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
}
.panel-login>.panel-heading {
    color: #00415d;
    background-color: #fff;
    border-color: #fff;
    text-align:center;
}
.panel-login>.panel-heading a{
    text-decoration: none;
    color: #666;
    font-weight: bold;
    font-size: 15px;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    transition: all 0.1s linear;
}
.panel-login>.panel-heading a.active{
    color: #029f5b;
    font-size: 18px;
}
.panel-login>.panel-heading hr{
    margin-top: 10px;
    margin-bottom: 0px;
    clear: both;
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
    background-image: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
    background-image: -o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
}
.panel-login input[type="text"],.panel-login input[type="email"],.panel-login input[type="password"] {
    height: 45px;
    border: 1px solid #ddd;
    font-size: 16px;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    transition: all 0.1s linear;
}
.panel-login input:hover,
.panel-login input:focus {
    outline:none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-color: #ccc;
}
.btn-login {
    background-color: #59B2E0;
    outline: none;
    color: #fff;
    font-size: 14px;
    height: auto;
    font-weight: normal;
    padding: 14px 0;
    text-transform: uppercase;
    border-color: #59B2E6;
}
.btn-login:hover,
.btn-login:focus {
    color: #fff;
    background-color: #53A3CD;
    border-color: #53A3CD;
}
.forgot-password {
    text-decoration: underline;
    color: #888;
}
.forgot-password:hover,
.forgot-password:focus {
    text-decoration: underline;
    color: #666;
}

.btn-register {
    background-color: #1CB94E;
    outline: none;
    color: #fff;
    font-size: 14px;
    height: auto;
    font-weight: normal;
    padding: 14px 0;
    text-transform: uppercase;
    border-color: #1CB94A;
}
.btn-register:hover,
.btn-register:focus {
    color: #fff;
    background-color: #1CA347;
    border-color: #1CA347;
}
</style>
<script type="text/javascript">
$(function() {

    $('#login-form-link').click(function(e) {
        $("#login-form").delay(100).fadeIn(100);
         $("#register-form").fadeOut(100);
        $('#register-form-link').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
    });
    $('#register-form-link').click(function(e) {
        $("#register-form").delay(100).fadeIn(100);
         $("#login-form").fadeOut(100);
        $('#login-form-link').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
    });

});

</script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

    <div class="container-fluid">
    <div class="j1">
        <div class="jumbotron jumbotron-fluid" align="center">
                <h1>Inventory Management</h1>
        </div>
    </div>
    <div class="j2">
        <div class="jumbotron jumbotron-fluid">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3">
                        <div class="panel panel-login">
                            <div class="panel-heading">
                                <div class="row">
                                    <div class="col-xs-6">
                                        <a class="active" id="login-form-link">Login</a>
                                    </div>
                                    <div class="col-xs-6">
                                        <a id="register-form-link">Register</a>
                                    </div>
                                </div>
                                <hr>
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <form id="login-form" action="login" method="post" role="form" style="display: block;">
                                            <div class="form-group">
                                                <input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="email" value="">
                                            </div>
                                            <div class="form-group">
                                                <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
                                            </div>
                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-sm-6 col-sm-offset-3">
                                                        <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="text-center">
                                                            <a href="#" tabindex="5" class="forgot-password">Forgot Password?</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                        <form id="register-form" action="register" method="post" role="form" style="display: none;">
                                            <div class="form-group">
                                                <input type="text" name="name" id="name" tabindex="1" class="form-control" placeholder="Name" value="">
                                            </div>
                                            <div class="form-group">
                                                <input type="tel" name="mobile" id="mobile" tabindex="1" class="form-control" placeholder="Mobile" value="">
                                            </div>
                                            <div class="form-group">
                                                <input type="text" name="address" id="address" tabindex="1" class="form-control" placeholder="Address" value="">
                                            </div>
                                            <div class="form-group">
                                                <input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="Email Address" value="">
                                            </div>
                                            <div class="form-group">
                                                <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
                                            </div>
                                            <div class="form-group">
                                                <input type="password" name="confirm-password" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirm Password">
                                            </div>
                                            <div class="form-group text-center">
                                                <div class="form-check">
                                                  <label class="form-check-label" for="sellor"><input class="form-check-input" type="radio" name="vendortype" id="sellor" value="sellor">
                                                    sellor
                                                  </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                  <label class="form-check-label" for="buyer"><input class="form-check-input" type="radio" name="vendortype" id="buyer" value="buyer">
                                                    buyer
                                                  </label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-sm-6 col-sm-offset-3">
                                                        <input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now">
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>
</html>

com.springmvc - InventoryController

package com.springmvc;

import java.util.List;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class InventoryController {
    @Autowired
    private InventoryDao inventorydao;

    @RequestMapping(value="login", method=RequestMethod.POST)
    public String getLogin(@ModelAttribute("login") LoginForm login, HttpSession session) {
        List<VendorForm> user = inventorydao.getLoginUser(login);
        if(user == null)
        {
            session.setAttribute("logstatus", "logfailed");
            System.out.println(user);
            return "redirect:/";
        }else {
            session.setAttribute("logstatus", "logsuccess");
            return "Homepage";
        }
    }

    @RequestMapping(value="register", method=RequestMethod.POST)
    public String getRegister(@ModelAttribute("vendorform") VendorForm vendorform,HttpSession session) {
        int user = inventorydao.reguser(vendorform);
        if(user < 0) {
            session.setAttribute("regstatus", "regfailed");
            return "redirect:/";
        }else {
            session.setAttribute("regstatus", "regsuccess");
            return "Homepage";
        }

    }
}

InventoryDao

package com.springmvc;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;

import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.RowMapper;

public class InventoryDao {
    private JdbcTemplate jdbcTemplate;

    public JdbcTemplate getJdbcTemplate() {
        return jdbcTemplate;
    }

    public void setJdbcTemplate(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }

    public List<VendorForm> getLoginUser(LoginForm login) {
        String sql = "select * from invdata where email='"+login.getEmail()+"' and password='"+login.getPassword()+"'";
        List<VendorForm> users = jdbcTemplate.query(sql, new RowMapper<VendorForm>() {

            @Override
            public VendorForm mapRow(ResultSet rs, int arg1) throws SQLException {
                VendorForm form = new VendorForm();
                form.setEmail(rs.getString("email"));
                form.setPassword(rs.getString("password"));
                return form;
            }

        });
        List<VendorForm> list = users.size()>0?users:null;
        return list;
    }

    public int reguser(VendorForm vendorform) {
        String sql = "insert into invdata values('"+vendorform.getName()+"','"+vendorform.getAddress()+"','"+vendorform.getMobile()+"','"+vendorform.getEmail()+"','"+vendorform.getPassword()+"','"+vendorform.getVendortype()+"')";
        return jdbcTemplate.update(sql);
    }


}

LoginForm

package com.springmvc;

public class LoginForm {
    private String email;
    private String password;
    private String vendorType;
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public String getVendorType() {
        return vendorType;
    }
    public void setVendorType(String vendorType) {
        this.vendorType = vendorType;
    }


}

VendorForm

package com.springmvc;

public class VendorForm {
    private String name;
    private String address;
    private String mobile;
    private String email;
    private String password;
    private String vendortype;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }

    public String getAddress() {
        return address;
    }
    public void setAddress(String address) {
        this.address = address;
    }
    public String getMobile() {
        return mobile;
    }
    public void setMobile(String mobile) {
        this.mobile = mobile;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }

    public String getVendortype() {
        return vendortype;
    }
    public void setVendortype(String vendortype) {
        this.vendortype = vendortype;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }


}

spring-servlet

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"  
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
    xmlns:context="http://www.springframework.org/schema/context"  
    xmlns:mvc="http://www.springframework.org/schema/mvc"  
    xsi:schemaLocation="  
        http://www.springframework.org/schema/beans  
        http://www.springframework.org/schema/beans/spring-beans.xsd  
        http://www.springframework.org/schema/context  
        http://www.springframework.org/schema/context/spring-context.xsd  
        http://www.springframework.org/schema/mvc  
        http://www.springframework.org/schema/mvc/spring-mvc.xsd"> 

    <context:component-scan base-package="com.springmvc"/>
    <mvc:annotation-driven/>

    <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
     <property name="driverClassName" value="com.mysql.jdbc.Driver"></property>
     <property name="url" value="jdbc:mysql://localhost:3306/test"></property>
     <property name="username" value="root"></property>
     <property name="password" value=""></property>
    </bean>

    <bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
     <property name="dataSource" ref="dataSource"></property>
    </bean> 

    <bean id="inventorydao" class="com.springmvc.InventoryDao">
      <property name="jdbcTemplate" ref="jdbcTemplate"></property>
     </bean>

    <bean id="viewResolver"
        class="org.springframework.web.servlet.view.InternalResourceViewResolver" >
        <property name="prefix">
            <value>/WEB-INF/view/</value>
        </property>

        <property name="suffix">
            <value>.jsp</value>
        </property>
    </bean>
</beans>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
  <display-name>InventoryManagement</display-name>
  <absolute-ordering></absolute-ordering>
  <servlet>
      <servlet-name>spring</servlet-name>
      <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
      <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
      <servlet-name>spring</servlet-name>
      <url-pattern>/</url-pattern>
  </servlet-mapping>
</web-app>

view/Homepage.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri = "http://www.springframework.org/tags/form" prefix = "form"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>Homepage</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<style type="text/css">
@import url("https://fonts.googleapis.com/css2?family=Grandstander&display=swap");
body {
  font-family: "Grandstander", cursive;
}
* {
  margin: 0;
  padding: 5px;
  box-sizing: border-box;
}
.container {
  height: 100vh;
  width: 100%;
}
.side-nav,
.nav-menu {
  height: 100%;
}
.side-nav .nav-menu {
  list-style: none;
  padding: 40px 0;
  width: 240px;
  background-color: #3498db;
}
.side-nav .nav-item {
  position: relative;
  padding: 10px 20px;
}
.nav-item.active {
  background-color: #fff;
  box-shadow: 0px -3px rgba(0, 0, 0, 0.2), 0px 3px rgba(0, 0, 0, 0.2);
}
.nav-item.active a {
  color: #2980b9;
}
.nav-item a {
  text-decoration: none;
  color: #fff;
}
.menu-text {
  padding: 0 20px;
}
.side-nav .nav-item.active::before {
  content: "";
  position: absolute;
  background-color: transparent;
  bottom: 100%;
  right: 0;
  height: 100%;
  width: 20px;
  border-bottom-right-radius: 25px;
  box-shadow: 0 20px 0 0 #fff;
}
.side-nav .nav-item.active::after {
  content: "";
  position: absolute;
  background-color: transparent;
  top: 100%;
  right: 0;
  height: 100%;
  width: 20px;
  border-top-right-radius: 25px;
  box-shadow: 0 -20px 0 0 #fff;
}
 .body-main {
     background: #ffffff;
     border-bottom: 15px solid #1E1F23;
     border-top: 15px solid #1E1F23;
     margin-top: 30px;
     margin-bottom: 30px;
     padding: 40px 30px !important;
     position: relative;
     box-shadow: 0 1px 21px #808080;
     font-size: 10px
 }

 .main thead {
     background: #1E1F23;
     color: #fff
 }

 .img {
    height: 200px;
 }

 h1 {
     text-align: center
 }
</style>
    </head>
<body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<div class="container-fluid">
<div class="row">
<div class="col col-lg-3">
     <nav class="side-nav">
    <ul class="nav-menu">
      <li class="nav-item active" ><a href="#" id="unitform" ><i class="fas fa-play"></i><span class="menu-text">Unit Form</span></a></li>
      <li class="nav-item"><a href="#" id="itemform"><i class="fas fa-sitemap"></i><span class="menu-text">Item Form</span></a></li>
      <li class="nav-item"><a href="#" id="vendorform"><i class="fas fa-play"></i><span class="menu-text">Vendor Form</span></a></li>
      <li class="nav-item"><a href="#" id="purchaseform"><i class="fas fa-play "></i><span class="menu-text">Purchase Order</span></a></li>
      <li class="nav-item"><a href="#" id="inventoryform"><i class="fas fa-play "></i><span class="menu-text">Billing Report</span></a></li>
    </ul>
  </nav>
</div>
<div class="col col-lg-9">
<form id="uform" action="uform1" method="post" role="form" style="display: block; padding-left: 20%;padding-right: 20%; padding-top:10%;">
  <div class="form-group">
   <input type="text" id="unitid" tabindex="1" class="form-control" value="unitid" name="unitid" disabled="disabled">
   <button type="button" onclick="myFunction()">Generate Unit Id</button>
  </div>
  <div class="form-group">
    <input type="text" name="unitname" id="unitname" tabindex="2" class="form-control" placeholder="Unit Name">
  </div>
  <div class="form-group">
    <input type="number" name="quantity" id="quantity" tabindex="3" class="form-control" placeholder="unit quantity">
  </div>
  <div class="form-group">
    <div class="row">
      <div class="col-sm-6 col-sm-offset-3">
        <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-primary btn-block" value="Add">
      </div>
    </div>
  </div>
</form>
<form id="iform" action="iform1" method="post" role="form" style="display: block;  padding-left: 20%;padding-right: 20%; padding-top:10%;">
  <div class="form-group">
    <input type="number" name="itemcode" id="itemcode" tabindex="1" class="form-control" placeholder="Item Code" value="" onclick="myFunctionItem()">
  </div>
<div class="form-group">
    <select class="form-select" aria-label="Default select example" name="ptype">
      <option selected disabled="disabled">Unit Type</option>
      <option >${name}</option>
    </select>
</div>
  <div class="form-group">
    <input type="text" name="itemname" id="itemname" tabindex="2" class="form-control" placeholder="Item Name">
  </div>
  <div class="form-group">
    <input type="text" name="quantity" id="quantity" tabindex="3" class="form-control" placeholder="Item Quantity">
  </div>
   <div class="form-group">
    <input type="number" name="priceperitem" id="priceperitem" tabindex="3" class="form-control" placeholder="Price per Item">
  </div>
  <div class="form-group">
    <div class="row">
      <div class="col-sm-6 col-sm-offset-3">
        <input type="submit" tabindex="4" class="form-control btn btn-primary btn-block" value="Add">
      </div>
    </div>
  </div>
</form>
<form id="vform" action="vform1" method="post" role="form" style="display: block;  padding-left: 20%;padding-right: 20%; padding-top:10%;">
      <div class="form-group">
        <input type="number" name="vendorcode" id="vendorcode" tabindex="1" class="form-control" placeholder="Vendor Code" value="" onclick="myFunctionVendor()">
      </div>
      <div class="form-group">
        <input type="text" name="name" id="name" tabindex="2" class="form-control" placeholder="Vendor Name" value="">
      </div>
      <div class="form-group">
        <input type="text" name="address" id="address" tabindex="3" class="form-control" placeholder="Vendor Address" value="">
      </div>
      <div class="form-group">
        <input type="tel" name="mobile" id="mobile" tabindex="4" class="form-control" placeholder="Vendor Mobile" value="">
      </div>
      <div class="form-group">
        <input type="email" name="email" id="email" tabindex="5" class="form-control" placeholder="Vendor Email" value="">
      </div>
      <div class="form-group">
        <input type="password" name="password" id="password" tabindex="5" class="form-control" placeholder="Password" value="">
      </div>
      <div class="form-group text-center">
            <div class="form-check">
                <label class="form-check-label" for="sellor"><input class="form-check-input" type="radio" name="vendortype" id="sellor" value="sellor">
                            sellor
                          </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <label class="form-check-label" for="buyer"><input class="form-check-input" type="radio" name="vendortype" id="buyer" value="buyer">
                            buyer
                          </label>
                    </div>
                </div>
      <div class="form-group">
        <div class="row">
          <div class="col-sm-6 col-sm-offset-3">
            <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-primary btn-block" value="Save">
          </div>
        </div>
      </div>
</form>
<form id="pform" action="pform1" method="post" role="form" style="display: block;">
        <div class="container">
  <h2>Filterable Table</h2>
  <p>Type something in the input field to search the table for first names, last names or emails:</p>  
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody id="myTable">
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@mail.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@greatstuff.com</td>
      </tr>
      <tr>
        <td>Anja</td>
        <td>Ravendale</td>
        <td>a_r@test.com</td>
      </tr>
    </tbody>
  </table>

  <p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</form>
<form id="invform" action="invform1" method="post" role="form" id="myfrm">
    <div class="container" id="myfrm">
        <div class="row">
                <div class="col-md-10" style="padding: 80px;">
                    <div class="row">
                        <div class="col-md-4"> <img class="img" alt="Invoce Template" src="https://www.freepnglogos.com/uploads/shopping-cart-png/shopping-cart-donations-shopping-carts-forms-membershipworks-21.png" width="200" alt="shopping cart, donations shopping carts forms membershipworks" /> </div>
                        <div class="col-md-8 text-right">
                            <h4 style="color: #F81D2D;"><strong>${vendorcode}</strong></h4>
                            <p>221 ,Baker Street</p>
                            <p>9370780286</p>
                            <p>himanshuitankar1@gmail.com</p>
                        </div>
                    </div> <br />
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <h2>INVOICE</h2>
                            <h5 style="color: green;"><b>${vname}</b></h5>
                        </div>
                    </div> <br />
                    <div>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>
                                        <h5>Description</h5>
                                    </th>
                                    <th>
                                        <h5>Amount</h5>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="col-md-9">${itemname}</td>
                                    <td class="col-md-3"><i class="fas fa-rupee-sign" area-hidden="true"></i> 50,000 </td>
                                </tr>
                                <tr>
                                    <td class="col-md-9">JBL Bluetooth Speaker</td>
                                    <td class="col-md-3"><i class="fas fa-rupee-sign" area-hidden="true"></i> 5,200 </td>
                                </tr>
                                <tr>
                                    <td class="col-md-9">Apple Iphone 6s 16GB</td>
                                    <td class="col-md-3"><i class="fas fa-rupee-sign" area-hidden="true"></i> 25,000 </td>
                                </tr>
                                <tr>
                                    <td class="col-md-9">MI Smartwatch 2</td>
                                    <td class="col-md-3"><i class="fas fa-rupee-sign" area-hidden="true"></i> 2,200 </td>
                                </tr>
                                <tr>
                                    <td class="text-right">
                                        <p> <strong>Shipment and Taxes:</strong> </p>
                                        <p> <strong>Total Amount: </strong> </p>
                                        <p> <strong>Discount: </strong> </p>
                                        <p> <strong>Payable Amount: </strong> </p>
                                    </td>
                                    <td>
                                        <p> <strong><i class="fas fa-rupee-sign" area-hidden="true"></i> 500 </strong> </p>
                                        <p> <strong><i class="fas fa-rupee-sign" area-hidden="true"></i> 82,900</strong> </p>
                                        <p> <strong><i class="fas fa-rupee-sign" area-hidden="true"></i> 3,000 </strong> </p>
                                        <p> <strong><i class="fas fa-rupee-sign" area-hidden="true"></i> 79,900</strong> </p>
                                    </td>
                                </tr>
                                <tr style="color: #F81D2D;">
                                    <td class="text-right">
                                        <h4><strong>Total:</strong></h4>
                                    </td>
                                    <td class="text-left">
                                        <h4><strong><i class="fas fa-rupee-sign" area-hidden="true"></i> 79,900 </strong></h4>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div>
                        <div class="col-md-12">
                            <p><b>Date :</b> 6 June 2019</p> <br />
                            <p><b>Signature</b></p>
                        </div>
                        <div class="col-md-12">
                            <button type="button" class="btn btn-primary btn-lg btn-block" onclick="myPrint('myfrm')">Print</button>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</form>
</div>
  </div>
</div>
</body>
<script type="text/javascript">
$(function() {
    $("li").click(function(e) {
      e.preventDefault();
      $("li").removeClass("active");
      $(this).addClass("active");
    });
});
</script>
<script type="text/javascript">
$(document).ready(function(){
        $('#uform').show();
        $('#iform').hide();
        $('#vform').hide();
        $('#pform').hide();
        $('#invform').hide();
        $('#tform').hide();
});
$(document).ready(function(){
    $("#unitform").click(function(){
        $('#uform').show();
        $('#iform').hide();
        $('#vform').hide();
        $('#pform').hide();
        $('#invform').hide();
        $('#tform').hide();
    });
});
$(document).ready(function(){
    $("#itemform").click(function(){
        $('#uform').hide();
        $('#iform').show();
        $('#vform').hide();
        $('#pform').hide();
        $('#invform').hide();
        $('#tform').hide();
    });
});
$(document).ready(function(){
    $("#vendorform").click(function(){
        $('#uform').hide();
        $('#iform').hide();
        $('#vform').show();
        $('#pform').hide();
        $('#invform').hide();
        $('#tform').hide();
    });
});
$(document).ready(function(){
    $("#purchaseform").click(function(){
        $('#uform').hide();
        $('#iform').hide();
        $('#vform').hide();
        $('#pform').show();
        $('#invform').hide();
        $('#tform').show();
    });
});
$(document).ready(function(){
    $("#deliveryform").click(function(){
        $('#uform').hide();
        $('#iform').hide();
        $('#vform').hide();
        $('#pform').hide();
        $('#inwardform').hide();
        $('#sform').hide();
        $('#dform').show();
        $('#invform').hide();
        $('#tform').hide();
    });
});
$(document).ready(function(){
    $("#inventoryform").click(function(){
        $('#uform').hide();
        $('#iform').hide();
        $('#vform').hide();
        $('#pform').hide();
        $('#invform').show();
        $('#tform').hide();
    });
});

$(document).ready(function(){
    $("#enterIntoTable").click(function(){
        $('#itemtable').show();
    });
});
</script>
<script>
function myFunction() {
    document.getElementById("unitid").value = Math.floor((Math.random() * 10000) + 1);
    }
function myFunctionItem(){
    document.getElementById("itemcode").value = Math.floor((Math.random() * 10000) + 1);
}
function myFunctionVendor() {
    document.getElementById("vendorcode").value = Math.floor((Math.random() * 10000) + 1);
    }
</script>
<script type="text/javascript">
function myPrint(myfrm) {
    var printdata = document.getElementById(myfrm);
    newwin = window.open("");
    newwin.document.write(printdata.outerHTML);
    newwin.print();
    newwin.close();
}
</script>
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

</html>