Rammanish choubey
New Coder
Hello i have created on ejsp page in which i have used a javascript to dynamically add row on "add new row button" . Now i have performed some multiplication operations on two cells and shown data in third cell using other javascript . code works properly for first row but does not works for other added rows.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
var http;
function fun1() {
var no_of_offices = document.getElementById("no_of_offices").value;
var resource_per_office = document
.getElementById("resource_per_office").value;
var sanction_posts = no_of_offices * resource_per_office;
document.getElementById('sanction_posts').value = sanction_posts;
var ctc_per_month = "";
var resource_type = document.getElementById("resource_type").value;
if (resource_type == "Unskilled")
{
ctc_per_month = 11909.93;
}
else if (resource_type == "Semi - Unskilled")
{
ctc_per_month = 13235.49;
}
else if (resource_type == "Skilled")
{
ctc_per_month = 15366.9;
}
else if (resource_type == "Super - Skilled")
{
ctc_per_month = 17377.67;
}
var budget_allotted = (ctc_per_month * sanction_posts*12)/100000;
document.getElementById('budget_allotted').value = budget_allotted;
}
function ram2() {
document.getElementById("i1").innerHTML = http.responseText;
}
</script>
</head>
<body>
<%
String budget_no = null;
String office_name = request.getParameter("office_name");
String service_type = request.getParameter("service_type");
String start_date = request.getParameter("start_date");
String end_date = request.getParameter("end_date");
budget_no = new BudgetController().Generate_BudgetNoOfcwise(con.getCon(), bgt, office_name, start_date,
end_date);
%>
<form method="POST" action="create_budget1.jsp" id="frm1" name="frm1">
<div class="card">
<div class="card-header">
<h5>Create Budget Form</h5>
<div class="card-header-right"></div>
</div>
<div class="card-block">
<div class="m-b-20 table-responsive">
<table class="table table-bordered" id="headtable">
<tr>
<th>office name</th>
<th>Budget number</th>
<th>Budget start date</th>
<th>budget end date</th>
</tr>
<tr>
<td><input class="form-control round-input"
name="office_name" id="office_name" value="<%=office_name%>"
readonly></td>
<td><input class="form-control round-input" name="budget_no"
id="budget_no" value="<%=budget_no%>" readonly></td>
<td><input type="text" class="form-control round-input"
name="start_date" id="start_date" value="<%=start_date%> "
readonly /></td>
<td><input type="text" class="form-control round-input"
name="end_date" id="end_date" value="<%=end_date%>" readonly /></td>
</tr>
</table>
<table class="table table-bordered" id="myTable">
<tr>
<th>Item of expenditure</th>
<th>Details for Calculations</th>
<th>No.of offices</th>
<th>Resources per office</th>
<th>Type of outsource resource</th>
<th>Sanction Posts</th>
<th>Budget Allotted(in Lacks)</th>
<th>Delete/Add Row</th>
<!-- <th>Number of rows to be created</th> -->
</tr>
<tr>
<!-- third column -->
<td><input type="text1" class="form-control"
list="languages" name="item_of_expenditure"
id="item_of_expenditure"
placeholder="Select item_of_expenditure" required> <datalist
id="languages"> <%
ArrayList<String> explist = new ExpenditureController()
.Generate_item_of_expenditure_service_wise(con.getCon(), exp, service_type, "0");
for (int j = 0; j <= explist.size() - 1; j++) {
%>
<option value="<%=explist.get(j)%>"><%=explist.get(j)%></option>
<%
}
%> </datalist></td>
<!-- fourth column -->
<td><input type="text" class="form-control"
name="details_for_calc" id="details_for_calc"
placeholder="Enter Details for Calculation" required></td>
<!-- fifth column -->
<td><input type="text" class="form-control"
name="no_of_offices" id="no_of_offices"
placeholder="Enter no of offices" required onChange="fun1()"></td>
<!-- sixth column -->
<td><input type="text" class="form-control"
name="resource_per_office" id="resource_per_office"
placeholder="Enter resource per office" required
onChange="fun1()"></td>
<!-- seventh column -->
<td><select type="text" class="form-control"
name="resource_type" id="resource_type"
placeholder="Enter resource Type" required onChange="fun1()">
<option value="">Select Option</option>
<option value="Unskilled">Unskilled</option>
<option value="Semi-Unskilled">Semi-Unskilled</option>
<!-- <option value="Semi-Skilled">Semi-Skilled</option> -->
<option value="Skilled">Skilled</option>
<option value="Super-Skilled">Super-Skilled</option>
</select></td>
<td><input type="text" class="form-control round-input"
name="sanction_posts" id="sanction_posts" readonly></td>
<td><input type="text" class="form-control round-input"
name="budget_allotted" id="budget_allotted" readonly></td>
<!-- delete column -->
<td><input type="button" id="delPOIbutton" value="Delete"
onclick="deleteRow(this)" />
</tr>
</table>
<div class="row form-group">
<div class="col-md-12 text-center">
<input type="submit" value="Next" name="B1"
class="btn btn-primary btn-round waves-effect waves-light hor-grd" />
<input type="reset" id=reset value="Reset" name="B2"
class="btn btn-dark btn-round waves-effect waves-light hor-grd">
<input type="button"
class="btn btn-secondary btn-round waves-effect waves-light hor-grd"
id="addmorePOIbutton" value="Add new row" onclick="insRow()" />
</div>
</div>
</div>
</div>
</div>
</form>
</body>
<SCRIPT language="javascript">
function deleteRow(row)
{
var i = row.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(i);
}
function insRow() {
var x = document.getElementById('myTable');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
x.appendChild(new_row);
}
</script>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
var http;
function fun1() {
var no_of_offices = document.getElementById("no_of_offices").value;
var resource_per_office = document
.getElementById("resource_per_office").value;
var sanction_posts = no_of_offices * resource_per_office;
document.getElementById('sanction_posts').value = sanction_posts;
var ctc_per_month = "";
var resource_type = document.getElementById("resource_type").value;
if (resource_type == "Unskilled")
{
ctc_per_month = 11909.93;
}
else if (resource_type == "Semi - Unskilled")
{
ctc_per_month = 13235.49;
}
else if (resource_type == "Skilled")
{
ctc_per_month = 15366.9;
}
else if (resource_type == "Super - Skilled")
{
ctc_per_month = 17377.67;
}
var budget_allotted = (ctc_per_month * sanction_posts*12)/100000;
document.getElementById('budget_allotted').value = budget_allotted;
}
function ram2() {
document.getElementById("i1").innerHTML = http.responseText;
}
</script>
</head>
<body>
<%
String budget_no = null;
String office_name = request.getParameter("office_name");
String service_type = request.getParameter("service_type");
String start_date = request.getParameter("start_date");
String end_date = request.getParameter("end_date");
budget_no = new BudgetController().Generate_BudgetNoOfcwise(con.getCon(), bgt, office_name, start_date,
end_date);
%>
<form method="POST" action="create_budget1.jsp" id="frm1" name="frm1">
<div class="card">
<div class="card-header">
<h5>Create Budget Form</h5>
<div class="card-header-right"></div>
</div>
<div class="card-block">
<div class="m-b-20 table-responsive">
<table class="table table-bordered" id="headtable">
<tr>
<th>office name</th>
<th>Budget number</th>
<th>Budget start date</th>
<th>budget end date</th>
</tr>
<tr>
<td><input class="form-control round-input"
name="office_name" id="office_name" value="<%=office_name%>"
readonly></td>
<td><input class="form-control round-input" name="budget_no"
id="budget_no" value="<%=budget_no%>" readonly></td>
<td><input type="text" class="form-control round-input"
name="start_date" id="start_date" value="<%=start_date%> "
readonly /></td>
<td><input type="text" class="form-control round-input"
name="end_date" id="end_date" value="<%=end_date%>" readonly /></td>
</tr>
</table>
<table class="table table-bordered" id="myTable">
<tr>
<th>Item of expenditure</th>
<th>Details for Calculations</th>
<th>No.of offices</th>
<th>Resources per office</th>
<th>Type of outsource resource</th>
<th>Sanction Posts</th>
<th>Budget Allotted(in Lacks)</th>
<th>Delete/Add Row</th>
<!-- <th>Number of rows to be created</th> -->
</tr>
<tr>
<!-- third column -->
<td><input type="text1" class="form-control"
list="languages" name="item_of_expenditure"
id="item_of_expenditure"
placeholder="Select item_of_expenditure" required> <datalist
id="languages"> <%
ArrayList<String> explist = new ExpenditureController()
.Generate_item_of_expenditure_service_wise(con.getCon(), exp, service_type, "0");
for (int j = 0; j <= explist.size() - 1; j++) {
%>
<option value="<%=explist.get(j)%>"><%=explist.get(j)%></option>
<%
}
%> </datalist></td>
<!-- fourth column -->
<td><input type="text" class="form-control"
name="details_for_calc" id="details_for_calc"
placeholder="Enter Details for Calculation" required></td>
<!-- fifth column -->
<td><input type="text" class="form-control"
name="no_of_offices" id="no_of_offices"
placeholder="Enter no of offices" required onChange="fun1()"></td>
<!-- sixth column -->
<td><input type="text" class="form-control"
name="resource_per_office" id="resource_per_office"
placeholder="Enter resource per office" required
onChange="fun1()"></td>
<!-- seventh column -->
<td><select type="text" class="form-control"
name="resource_type" id="resource_type"
placeholder="Enter resource Type" required onChange="fun1()">
<option value="">Select Option</option>
<option value="Unskilled">Unskilled</option>
<option value="Semi-Unskilled">Semi-Unskilled</option>
<!-- <option value="Semi-Skilled">Semi-Skilled</option> -->
<option value="Skilled">Skilled</option>
<option value="Super-Skilled">Super-Skilled</option>
</select></td>
<td><input type="text" class="form-control round-input"
name="sanction_posts" id="sanction_posts" readonly></td>
<td><input type="text" class="form-control round-input"
name="budget_allotted" id="budget_allotted" readonly></td>
<!-- delete column -->
<td><input type="button" id="delPOIbutton" value="Delete"
onclick="deleteRow(this)" />
</tr>
</table>
<div class="row form-group">
<div class="col-md-12 text-center">
<input type="submit" value="Next" name="B1"
class="btn btn-primary btn-round waves-effect waves-light hor-grd" />
<input type="reset" id=reset value="Reset" name="B2"
class="btn btn-dark btn-round waves-effect waves-light hor-grd">
<input type="button"
class="btn btn-secondary btn-round waves-effect waves-light hor-grd"
id="addmorePOIbutton" value="Add new row" onclick="insRow()" />
</div>
</div>
</div>
</div>
</div>
</form>
</body>
<SCRIPT language="javascript">
function deleteRow(row)
{
var i = row.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(i);
}
function insRow() {
var x = document.getElementById('myTable');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
x.appendChild(new_row);
}
</script>
</html>