JavaScript dynamic added row is not functioning properly

Rammanish choubey

New Coder
Nov 19, 2019
1
0
1
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>
 

joe

Coder
Aug 21, 2019
39
20
8
Hey @Rammanish choubey ,

Looks like the issue is with the use of IDs. When you add a new row, the IDs of the inputs are also copied and repeated, while as per the HTML validation rule, an ID can only be used once. So, you have to find a way to access the inputs using something other than their IDs.
 
  • Like
Reactions: Malcolm