Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript dynamic added row is not functioning properly

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

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom