In my application i have a view page(html or jsp) with five field (Qualification, Semester, Maximum Mark, Obtained Mark, Percentage).
I have one add button, if i click on add button one java-script will be called and it will display a row in the same page with five column (Qualification, Semester, Maximum Mark, Obtained Mark, Percentage)
Whenever i will click on add button, a new row will be added. Now I want to store this dynamic row's value to database (using servlet).
How can i do this?
I want to store when form is submitted.
I am having problem to store it in database, because every column may have multiple rows. So how can i pass it to the servlet.
Qualify | Semester | Maximum Mark | Obtained Mark | Percentage
BSc | 1 | 100 | 85 | 85%
Bcom | 2 | 100 | 75 | 75%
Now i want to pass these 5 rows to the database through servlet.
I know that for a value i can do it using request.getparameter("");but here the values are dynamic. How can i do it
Request to provide the code........to go ahead.....
function insRows()
{
var insertedTable = document.getElementById('finalMarks');
var x;
var c2Val = document.getElementById('txtsem').value
var c3Val = parseInt(document.getElementById('txtmaxmrk').value,10)
var c4Val = parseInt(document.getElementById('txtobtmrk').value,10)
if (c2Val.length<1 || c3Val<=0 || c4Val<=0)
{
alert("Invalid semester, max mark, or obtain mark value");
return; // not add if any of values is invalid
}
if (document.all)
{ // IE
x = document.getElementById('finalMarks').insertRow();
}
else
{ // other browsers
x = document.getElementById('finalMarks').insertRow(insertedTable.getElementsByTagName("tr").length);
}
var cell0 = x.insertCell(0);
var cell1 = x.insertCell(1);
var cell2 = x.insertCell(2);
var cell3 = x.insertCell(3);
var cell4 = x.insertCell(4);
var cell5 = x.insertCell(5);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell0.appendChild(element1);
cell1.innerHTML = document.getElementById('txtqualify').options[document.getElementById('txtqualify').selectedIndex].text;
cell2.innerHTML = c2Val;
cell3.innerHTML = c3Val;
cell4.innerHTML = c4Val;
//cell5.innerHTML = (c4Val/c3Val)*100 + "%";
}
function function1()
{
var myTable = document.getElementById("finalMarks");
var selDegree = document.getElementById('txtqualify').options[document.getElementById('txtqualify').selectedIndex].text
var myRows = myTable.getElementsByTagName("tr"); // should work in both IE and others
var mm=0, om=0, row, cells, maxOm=0;
for (var i=1; i<myRows.length; i++)
{ // caution! should declare 'i' as local variable
row = myRows[i]; // obtain the table row element
cells = row.getElementsByTagName("td");
if (selDegree==cells[1].innerHTML)
{ // the row degree is the same as selected
mm += parseInt(cells[3].innerHTML, 10); // cumulate max marks
om += parseInt(cells[4].innerHTML, 10); // cumulate obtained marks
if (om>maxOm)
{
maxOm = om;
}// get max value of obtained mark
}
}
document.getElementById('txtperct').value = (om/mm)*100 + "%";
document.getElementById('degr').value = selDegree;
document.getElementById('txtper').value = om; // write total obtain marks
document.getElementById('txtpert').value = mm;
}
HTML CODE:
<body bgcolor="#C0C0C0" onload="loadArray('Qualfy', '', 'txtqualify')">
<form id ="" name ="" action="" >
<br> <center><h3>APPLICATION FORM FOR SOFTWARE TECHNICIAN / HARDWARE ENGINEER </h3></center> <br>
<table BORDER ="6" width="85%"align="center" bgcolor="#00FFFF" style="font-family: Verdana;color: black;font-size: 12px">
<tr>
<td align="center" width="25%" height="40"> Qualification:</td>
<td align="left" style="WIDTH:25%" >
<select id ="txtqualify" style ="width:150px;height:25px" name ="txtqualify" > </select> </td>
<td align="center" width="25%" height="40">Semester:</td>
<td> <input type = "text" SIZE="8" maxlength = "3" id = "txtsem" name = "txtsem"> </td>
</tr>
<tr>
<td align= "center" width ="25%" height="40">Max.Marks:</td>
<td> <input type = "text" SIZE="8" maxlength = "3" id = "txtmaxmrk" name = "txtmaxmrk"> </td>
<td align= "center" width ="25%" height="40">Obtained.Marks:</td>
<td> <input type = "text" SIZE="8" maxlength = "3" id = "txtobtmrk" name = "txtobtmrk"> </td>
</tr>
<tr>
<td align= "center" width ="25%" height="40">Percentage:</td>
<td> <input type = "text" SIZE="8" maxlength = "5" id = "txtper" readonly name = "txtper">
<td align="center" colspan="4" valign="middle">
<input type="RESET" align="middle" style="width:20%" value="ADD" onclick="insRows()" >
<input type="button" align="middle" style="width:20%" value="SUM" onclick="function1()" >
</td>
</tr>
<tr>
<td align="center" height="40"> <input type = "text" SIZE="8" maxlength = "5" id = "txtpert" name = "txtpert"> </td>
<td align="center"> <input type = "text" SIZE="8" maxlength = "5" id = "txtperct" name = "txtperct"> </td>
<td align="center"> <input type = "text" SIZE="10" maxlength = "5" readonly id = "degr" name = "degr"> </td>
</tr>
</table>
<table id ="finalMarks" BORDER ="6" width="85%"align="center" bgcolor="#00FFFF" style="font-family: Verdana;color: black;font-size: 12px">
<thead>
<th height="40">Remove</th>
<th>Qualification</th>
<th>Sem/Year</th>
<th>Max.Marks</th>
<th>Obt.Marks</th>
<th>Percentage of Marks:</th>
</thead>
</table>
</form>
</body>
Regards,
Santhosh A