I am new to the development field. There are two problem with this code. First when I click button for add_Row then a row gets added on screen but it disappears after 1-2 seconds and same thing happens with group_Create() popup.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Inventory Expert</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="../../Bootstrap-3.3.2-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../../CSS/ProductMaster/ProductMaster.css"/>
<link rel="stylesheet" href="../../CSS/ProductMaster/RawMaterialGroup.css"/>
<script src="../../JAVASCRIPT/ProductMaster/ProductMaster.js"></script>
<script src="../../JAVASCRIPT/ProductMaster/RawMaterialGroup.js"></script>
<script src="../../jquery-1.11.2.js"></script>
<script src="../../jquery-ui-1.11.2.custom/jquery-ui.js"></script>
<script src="../../jquery-ui-1.11.2.custom/jquery-ui.min.js"></script>
</head>
<body>
<img id="top" src="../../Images/shaddow_line_top.png" alt=""/>
<div class="container">
<h1><a>Product Master</a></h1>
<form id="productmasterForm">
<table class="table" id="productmasterTable">
<tr>
<td class="W45">Product Code <input id="productid" type="text"/></td>
<td class="W45">Product Name <input id="productname" type="text"/></td>
<td class="W10"></td>
</tr>
<tr>
<td class="W45">Basic Raw Material <input id="basicraw" type="text"/></td>
<td class="W45">Group Name <input id="groupname" type="text"/></td>
<td class="W10">
<div class="btn-group">
<button class="btn btn-info btn-sm" id="groupcreate" onclick="group_Create()">C</button>
<button class="btn btn-info btn-sm" id="groupedit" onclick="group_Edit()">E</button>
</div>
</td>
</tr>
<tr>
<td class="W40">Raw Material <input id="rm1" type="text"/></td>
<td class="W30">Size <input id="s1" type="text"/></td>
<td class="W20">Qty. <input id="q1" type="text"/></td>
<td class="W10">
<div class="btn-group">
<button class="btn btn-info btn-sm" onclick="maprawNsize()">C</button>
<button class="btn btn-info btn-sm" onclick="maprawNsize_Edit()">E</button>
<button class="btn btn-info btn-sm" id="pma" onclick="add_Row()">A</button>
</div>
</td>
</tr>
<tr>
<td class="W45">VAT Rate <input id="vat" type="text"/></td>
<td class="W45">Unit Of Measure <input id="uom" type="text"/></td>
<td class="W10"></td>
</tr>
<tr>
<td class="W45">Manufacturing Cost <input id="menucost" type="text"/></td>
<td class="W45">Sale Rate <input id="salerate" type="text"/></td>
<td class="W10"></td>
</tr>
<tr>
<td class="W45">Maximum Retail Price <input id="mrp" type="text"/></td>
<td class="W45">Default Discount <input id="defdisc" type="text"/></td>
<td class="W10"></td>
</tr>
<tr>
<td class="W45">Rate List Date <input id="listdate" type="text"/></td>
<td class="W45">Kit Reference <input id="kitref" type="text"/></td>
<td class="W10"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
JavaScript File ProductMaster.js
var rowCount = 1;
var rowPosition = 3;
var id = 2;
function add_Row() {
if (rowCount < 11) {
var table = document.getElementById("productmasterTable");
var row = table.insertRow(rowPosition);
rowPosition++;
for (i = 0; i < 1; i++) {
var td1 = document.createElement("td");
td1.innerHTML = 'Raw Material <input id="rm' + id + '" type="text"/>';
row.appendChild(td1);
td1.setAttribute("class", "W40");
}
for (i = 0; i < 1; i++) {
var td2 = document.createElement("td");
td2.innerHTML = 'Size <input id="s' + id + '" type="text"/>';
row.appendChild(td2);
td2.setAttribute("class", "W30");
}
for (i = 0; i < 1; i++) {
var td3 = document.createElement("td");
td3.innerHTML = 'Qty. <input id="q' + id + '" type="text"/>';
row.appendChild(td3);
td3.setAttribute("class", "W20");
}
id++;
rowCount++;
}
else {
alert("Only 10 Allowed");
}
}
JavaScript File RawMaterialGroup.js
function group_Create(){
document.getElementById('rawgroup').style.display = "block";
}
function group_Hide(){
document.getElementById('rawgroup').style.display = "none";
}
function group_Edit(){
alert("I Am Clicked");
}
var rowCount = 5;
var rowPosition = 7;
var id = 2;
function add_rawMaterial() {
if (rowCount < 16) {
var table = document.getElementById("groupTable");
var row = table.insertRow(rowPosition);
rowPosition++;
for (i = 0; i < 1; i++) {
var td1 = document.createElement("td");
td1.innerHTML = 'Raw Material <input id="rmgrm' + id + '" type="text"/>';
row.appendChild(td1);
td1.setAttribute("class", "W40");
}
for (i = 0; i < 1; i++) {
var td2 = document.createElement("td");
td2.innerHTML = 'Qty. <input id="rmgq' + id + '" type="text"/>';
row.appendChild(td2);
td2.setAttribute("class", "W20");
}
for (i = 0; i < 1; i++) {
var td3 = document.createElement("td");
td3.innerHTML = 'UOM <input id="rmguom' + id + '" type="text"/>';
row.appendChild(td3);
td3.setAttribute("class", "W20");
}
id++;
rowCount++;
}
else {
alert("Only 15 Allowed");
}
}
CSS File ProductMaster.css
body{
text-align: center;
overflow: hidden;
}
td{
float: left;
text-align: left
}
#rm1,#rm2,#rm3,#rm4,#rm5,#rm6,#rm7,#rm8,#rm9,#rm10{
width: 250px;
height: 30px
}
#s1,#s2,#s3,#s4,#s5,#s6,#s7,#s8,#s9,#s10{
width: 250px;
height: 30px;
}
#q1,#q2,#q3,#q4,#q5,#q6,#q7,#q8,#q9,#q10{
width: 100px;
height: 30px;
}
.W45{
width: 45%;
}
.W10{
width: 10%;
}
.W15{
width: 15%;
}
.W20{
width: 20%;
}
.W30{
width: 30%;
}
#productid{
width: 100px;
height: 30px;
}
#productname{
width: 300px;
height: 30px;
}
#basicraw{
width: 259px;
height: 30px;
}
#groupname{
width: 315px;
height: 30px;
}
#productmasterForm{
font-size: 20px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#vat{
width: 80px;
height: 30px;
}
#uom{
width: 80px;
height: 30px;
}
#menucost{
width: 80px;
height: 30px;
}
#salerate{
width: 80px;
height: 30px;
}
#mrp{
width: 80px;
height: 30px;
}
#defdisc{
width: 80px;
height: 30px;
}
#listdate{
width: 120px;
height: 30px;
}
#kitref{
width: 100px;
height: 30px;
}
CSS File RawMaterialGroup.css
h2 {
background-color:#00a2e2;
padding:20px 20px;
margin:-10px -10px;
text-align:center;
border-radius:10px 10px 0 0;
border: 1px solid #313131;
}
#rawgroup{
width: 100%;
height: 100%;
opacity: 0.95;
top: 0;
bottom: 0;
display: none;
position: fixed;
background-color: #313131;
overflow: hidden;
alignment-adjust: central;
}
div#groupPopup{
position: fixed;
left: 18%;
top: 17%;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
img#close_group{
position: absolute;
right: -7px;
top: -7px;
cursor: pointer;
}
#groupForm{
max-width: 900px;
min-width: 900px;
padding: 10px 10px;
border: 2px solid gray;
border-radius: 10px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: #fff;
margin:-10px -11px;
text-align:center;
border-radius:10px 10px 10px 10px;
}
.W40{
width: 40%;
}
.W20{
width: 20%;
}
.W10{
width: 10%;
}
#rmgrm1,#rmgrm2,#rmgrm3,#rmgrm4,#rmgrm5,#rmgrm6,#rmgrm7,#rmgrm8,#rmgrm9,#rmgrm10,#rmgrm11,#rmgrm12,#rmgrm13,#rmgrm14,#rmgrm15{
width: 215px;
height: 30px;
}
#rmgq1,#rmgq2,#rmgq3,#rmgq4,#rmgq5,#rmgq6,#rmgq7,#rmgq8,#rmgq9,#rmgq10,#rmgq11,#rmgq12,#rmgq13,#rmgq14,#rmgq15{
width: 80px;
height: 30px;
}
#rmguom1,#rmguom2,#rmguom3,#rmguom4,#rmguom5,#rmguom6,#rmguom7,#rmguom8,#rmguom9,#rmguom10,#rmguom11,#rmguom12,#rmguom13,#rmguom14,#rmguom15{
width: 50px;
height: 30px;
}
#rmggn{
width: 200px;
height: 30px;
}
#rmggi{
width: 100px;
height: 30px;
}
via
Chebli Mohamed
