Here I have created one html page where multiple dynamic divisions are involved. I'm attaching my html code below:
<%@page import="beans.*"%><%@page import="java.util.*" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>div data entry</title></head>
<body><br><div class="transbox">
<form action="dataentryservletclass" method="post"><center>
<table><tr><td>Class Name</td> <td><input type="text" name="c_cname"></td>
<td>Class ID</td> <td><input type="text" name="c_cid" placeholder="Enter a Text"></td></tr>
<tr><td>Class Start Date</td> <td><input type="date" name="c_csdate"></td>
<td>Total Marks</td> <td><input type="text" name="c_tmarks" id="txttotal" readonly></td></tr></table>
No. of Students <select class="selectbtn" name="c_nos" onchange="myFunction(this)">
<option>Select One</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></select>
<div id="myDIV1" style="display:none"><center>
<table><tr>
<th>Student Name</th>
<th>Student Roll No.</th>
<th>Marks Obtain</th>
</tr><tr>
<td><input type="text" id="txt11-1" name="c_sname1"></td>
<td><input type="text" id="txt12-1" name="c_sroll1"></td>
<td><input type="text" id="txt13-1" name="c_marks1" onkeyup="sum1()" onchange="sum1()"></td></tr>
</table></center></div>
<div id="myDIV2" style="display:none"><center>
<table><tr>
<th>Student Name</th>
<th>Student Roll No.</th>
<th>Marks Obtain</th>
</tr><tr>
<td><input type="text" id="txt11-2" name="c_sname1"></td>
<td><input type="text" id="txt12-2" name="c_sroll1"></td>
<td><input type="text" id="txt13-2" name="c_marks1" onkeyup="sum2()" onchange="sum2()"></td></tr>
<tr>
<td><input type="text" id="txt21-2" name="c_sname2"></td>
<td><input type="text" id="txt22-2" name="c_sroll2"></td>
<td><input type="text" id="txt23-2" name="c_marks2" onkeyup="sum2()" onchange="sum2()"></td></tr>
</table></center></div>
<div id="myDIV3" style="display:none"><center>
<table><tr>
<th>Student Name</th>
<th>Student Roll No.</th>
<th>Marks Obtain</th>
</tr><tr>
<td><input type="text" id="txt11-3" name="c_sname1"></td>
<td><input type="text" id="txt12-3" name="c_sroll1"></td>
<td><input type="text" id="txt13-3" name="c_marks1" onkeyup="sum3()" onchange="sum3()"></td></tr>
<tr>
<td><input type="text" id="txt21-3" name="c_sname2"></td>
<td><input type="text" id="txt22-3" name="c_sroll2"></td>
<td><input type="text" id="txt23-3" name="c_marks2" onkeyup="sum3()" onchange="sum3()"></td></tr>
<tr>
<td><input type="text" id="txt31-3" name="c_sname3"></td>
<td><input type="text" id="txt32-3" name="c_sroll3"></td>
<td><input type="text" id="txt33-3" name="c_marks3" onkeyup="sum3()" onchange="sum3()"></td></tr>
</table></center></div>
<script>
function myFunction(objDrop) {
var a = document.getElementById("myDIV1");
var b = document.getElementById("myDIV2");
var c = document.getElementById("myDIV3");
if(objDrop.value=="1"){
if (a.style.display === "none") {
a.style.display = "block";
b.style.display = "none";
c.style.display = "none";}
else {
a.style.display = "none";}}
else if(objDrop.value=="2"){
if (b.style.display === "none") {
a.style.display = "none";
b.style.display = "block";
c.style.display = "none";}
else {
b.style.display = "none";}}
else if(objDrop.value=="3"){
if (c.style.display === "none") {
a.style.display = "none";
b.style.display = "none";
c.style.display = "block";}
else {
c.style.display = "none";}}
}
function sum3(){
var x=document.getElementById('txt13-3').value;
var y=document.getElementById('txt23-3').value;
var z=document.getElementById('txt33-3').value;
var xyz=document.getElementById('txttotal');
if(x==""){x=0;}
if(y==""){y=0;}
if(z==""){z=0;}
var result=parseInt(x)+parseInt(y)+parseInt(z);
if(!isNaN(result)){xyz.value=result;}
}
function sum1(){
var x=document.getElementById('txt13-1').value;
var xyz=document.getElementById('txttotal');
if(x==""){x=0;}
var result=parseInt(x);
if(!isNaN(result)){xyz.value=result;}
}
function sum2(){
var x=document.getElementById('txt13-2').value;
var y=document.getElementById('txt23-2').value;
var xyz=document.getElementById('txttotal');
if(x==""){x=0;}
if(y==""){y=0;}
var result=parseInt(x)+parseInt(y);
if(!isNaN(result)){xyz.value=result;}
}
</script></center>
<hr><hr>
<button type="submit" value="Submit" class="submitbtn" style="float:right">Submit</button>
</form></div></body></html>
I also wrote the necessary code for it, like db connection,getter setter method,servlet. But here, the problem is, from dropdown list when I'm choosing '1' then the code works fine for me, every value get stored into the database. But when I choose '2' or '3' then the problem arises. Then only the last 'c_sname','c_sroll','c_marks' set, get entered into the database. Please make a solution for this problem , thanks in advance.