I am creating a application that could dynamically add rows to my html/jsp page and when clicked submit, data will be saved on the database. I am using javascript in order to add rows dynamically.When I enter data and hit submit , my modelAttribute does not bind to the fields in form page. To avoid array Index out of bound exception made use of autopopulating list.
Below is the form page
<%# 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>Add/Remove dynamic rows</title>
<SCRIPT lang="javascript">
function addRow(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var counts = rowCount - 1;
var cell1 = row.insertCell(0);
var ldap = document.createElement("input");
ldap.type = "text";
ldap.id="incident"+counts+".ldap"
ldap.name = "incident[" + counts + "].ldap";
cell0.appendChild(ldap);
var cell2 = row.insertCell(1);
var ticket = document.createElement("input");
ticket.type = "text";
ticket.id = "incident"+ counts +".ticket";
ticket.name = "incident[" + counts + "].ticket";
cell2.appendChild(ticket);
var cell3 = row.insertCell(2);
var status = document.createElement("select");
status.type = "text";
status.id = "incident"+ counts +".status";
status.name = "incident[" + counts + "].status";
var opt=document.createElement("option");
opt.text="Pending";
opt.value="Pending";
status.options.add(opt);
var opt=document.createElement("option");
opt.text="Completed";
opt.value="Completed";
status.options.add(opt);
cell3.appendChild(status);
var cell4 = row.insertCell(3);
var comment = document.createElement("input");
comment.type = "text";
comment.id = "incident"+ counts +".comment
comment.name = "incident[" + counts + "].comment";
cell4.appendChild(comment);
var cell5=row.insertCell(4);
var time=document.createElement("input");
time.type="date";
time.id="incident"+ counts +".time";
time.name="incident["+ counts +"].time";
cell5.appendChild(time);
var cell6=row.insertCell(5);
var time=document.createElement("input");
effort.type="text";
effort.name="incident["+ counts +"].effort";
cell6.appendChild(effort);
}
</SCRIPT>
</HEAD>
<BODY>
<div align="center" style="border:1px solid black">
<h>AGILE</h>
</div>
<form action="saveIncident" modelAttribute="incidentList" method="post">
<div align="center">
<TABLE id="incidentTable">
<TR>
<TD>Ldap</TD>
<TD>Ticket No</TD>
<TD>Status</TD>
<TD>Comment</TD>
<TD>Date</TD>
<TD>Effort</TD>
</TR>
<TR>
<TD><input type="text" id="incident0.ldap" name="incident[0].ldap"/></TD>
<TD><INPUT type="text" id="incident0.ticket" name="iincident[0].ticket" /></TD>
<TD><select name="incident[0].status" id="ncident0.status">
<option value="Pending">Pending</option>
<option value=Completed">Completed</option>
</select></TD>
<TD><INPUT type="text" id="incident0.comment" name="incident[0].comment" /></TD>
<TD><input type="date" id="incident0.time" name="incident[0].time"/></TD>
<TD><INPUT type="text" id="incident0.effort" name="incident[0].effort" /></TD>
</TR>
</TABLE>
<INPUT type="button" value="Add Row" onclick="addRow('incidentTable')" />
<input type="submit" value="SUBMIT" />
</div>
</form>
</BODY>
</HTML>
Below is the controller:
package com.syed.agile;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.util.AutoPopulatingList;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
#Controller
public class HomeController {
#Autowired
private EmpIncidentDao empIncidentDao;
#RequestMapping(value={"/"})
public ModelAndView newIncident(ModelAndView model)
{
//IncidentList incidentList=new IncidentList();
//model.addObject("incidentList",incidentList);
model.setViewName("/index");
return model;
}
#RequestMapping(value="/newIncident")
public ModelAndView newIncident1(ModelAndView model)
{
IncidentForm incidentList=new IncidentForm();
incidentList.setIncidentForm(new AutoPopulatingList(Incident.class) );
model.addObject("incidentList",incidentList);
model.setViewName("/Incident");
return model;
}
#RequestMapping(value="/saveIncident", method=RequestMethod.POST)
public ModelAndView saveIncident(#ModelAttribute() IncidentForm incidentList)
{ System.out.println("In Controller");
empIncidentDao.saveOrUpdate(incidentList);
return new ModelAndView("redirect:/");
}
}
Anyhelp on this will be appreciated.
You had some typos, try now and remember that on server side you receive keys-values for each cell of the table, so appropriate processing is most likely needed.
EDIT:
That's beacause your IncidentForm leaves something to be desidered, as I already told you keep in mind that:
on server side you receive keys-values for each cell of the table, so
appropriate processing is most likely needed.
If you are getting exception that means that you have to correct the way you are processing those keys-values.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"
<title>Add/Remove dynamic rows</title>
<SCRIPT lang="javascript">
function addRow(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var counts = rowCount - 1;
var cell1 = row.insertCell(0);
var ldap = document.createElement("input");
ldap.type = "text";
ldap.id="incident"+counts+".ldap"
ldap.name = "incident[" + counts + "].ldap";
cell1.appendChild(ldap);
var cell2 = row.insertCell(1);
var ticket = document.createElement("input");
ticket.type = "text";
ticket.id = "incident"+ counts +".ticket";
ticket.name = "incident[" + counts + "].ticket";
cell2.appendChild(ticket);
var cell3 = row.insertCell(2);
var status = document.createElement("select");
status.type = "text";
status.id = "incident"+ counts +".status";
status.name = "incident[" + counts + "].status";
var opt=document.createElement("option");
opt.text="Pending";
opt.value="Pending";
status.options.add(opt);
var opt=document.createElement("option");
opt.text="Completed";
opt.value="Completed";
status.options.add(opt);
cell3.appendChild(status);
var cell4 = row.insertCell(3);
var comment = document.createElement("input");
comment.type = "text";
comment.id = "incident"+ counts +".comment";
comment.name = "incident[" + counts + "].comment";
cell4.appendChild(comment);
var cell5=row.insertCell(4);
var time=document.createElement("input");
time.type="date";
time.id="incident"+ counts +".time";
time.name="incident["+ counts +"].time";
cell5.appendChild(time);
var cell6=row.insertCell(5);
var effort=document.createElement("input");
effort.type="text";
effort.id ="incident["+ counts +"].effort";
effort.name = "incident["+ counts +"].effort";
cell6.appendChild(effort);
}
</SCRIPT>
</HEAD>
<BODY>
<div align="center" style="border:1px solid black">
<h2>AGILE</h2>
</div>
<form action="saveIncident" modelAttribute="incidentList" method="post">
<div align="center">
<TABLE id="incidentTable">
<TR>
<TD>Ldap</TD>
<TD>Ticket No</TD>
<TD>Status</TD>
<TD>Comment</TD>
<TD>Date</TD>
<TD>Effort</TD>
</TR>
<TR>
<TD><input type="text" id="incident0.ldap" name="incident[0].ldap"/></TD>
<TD><INPUT type="text" id="incident0.ticket" name="iincident[0].ticket" /></TD>
<TD><select name="incident[0].status" id="ncident0.status">
<option value="Pending">Pending</option>
<option value=Completed">Completed</option>
</select></TD>
<TD><INPUT type="text" id="incident0.comment" name="incident[0].comment" /></TD>
<TD><input type="date" id="incident0.time" name="incident[0].time"/></TD>
<TD><INPUT type="text" id="incident0.effort" name="incident[0].effort" /></TD>
</TR>
</TABLE>
<INPUT type="button" value="Add Row" onclick="addRow('incidentTable')" />
<input type="submit" value="SUBMIT" />
</div>
</form>
</BODY>
</HTML>
Related
it should appear new row in my table that contain data i input in the form, but instead it does not appear anything when submit. I can not find any wrong there though. can you help me?
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){ //declare my function to add table
var tbl = document.getElementById("myTable");
var r = tbl.insertRow();
var cell1 = r.insertcell();
var cell2 = r.insertcell();
var cell3 = r.insertcell();
var cell4 = r.insertcell();
cell1.innerHTML = document.getElementById("tid").value;
cell2.innerHTML = document.getElementById("tusername").value;
cell3.innerHTML = document.getElementById("toccupation").value;
}
</script>
</head>
<body>
<form onsubmit="myFunction(); return false;"> //form
<input type="Number" id="tid" placeholder="ID"/><br/>
<input type="text" id="tusername" placeholder="Name"/><br/>
<input type="text" id="toccupation" placeholder="Occupation"/><br/>
<input type="submit" value="Add data"/>
<input type="reset" value="clear"/>
</form>
<table id="myTable" border=1>
<tr>
<th>ID</th>
<th>Name</th>
<th>Occupation</th>
</tr>
</table><br>
</body>
</html>
The method to insert a cell is called insertCell, not insertcell as per https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/insertCell
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() { //declare my function to add table
var tbl = document.getElementById("myTable");
var r = tbl.insertRow();
var cell1 = r.insertCell(); // EDITED
var cell2 = r.insertCell(); // EDITED
var cell3 = r.insertCell(); // EDITED
var cell4 = r.insertCell(); // EDITED
cell1.innerHTML = document.getElementById("tid").value;
cell2.innerHTML = document.getElementById("tusername").value;
cell3.innerHTML = document.getElementById("toccupation").value;
}
</script>
</head>
<body>
<form onsubmit="myFunction(); return false;"> //form
<input type="Number" id="tid" placeholder="ID" /><br/>
<input type="text" id="tusername" placeholder="Name" /><br/>
<input type="text" id="toccupation" placeholder="Occupation" /><br/>
<input type="submit" value="Add data" />
<input type="reset" value="clear" />
</form>
<table id="myTable" border=1>
<tr>
<th>ID</th>
<th>Name</th>
<th>Occupation</th>
</tr>
</table><br>
</body>
</html>
I have a HTML form. The save and delete button are working fine. But I want to write JavaScript (not jQuery or AngularJS) code of edit and update button. When I click the edit the data of particular row should be displayed in the textboxes and when I press update button the updated data of that particular row should get submitted in the HTML table.
function addRow() {
var id= document.getElementById("id");
var name= document.getElementById("name");
var gender= document.getElementById("gender");
var address= document.getElementById("address");
var email = document.getElementById("email");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= id.value;
row.insertCell(1).innerHTML= name.value;
row.insertCell(2).innerHTML= gender.value;
row.insertCell(3).innerHTML= address.value;
row.insertCell(4).innerHTML= email.value;
row.insertCell(5).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(6).innerHTML= '<input type="button" value = "Edit" onClick="Javacsript:updateRow(this)">';
id.value="";
name.value="";
gender.value="";
address.value="";
email.value="";
}
function updateRow(obj){
}
function reset(){
var id= document.getElementById("id");
var name= document.getElementById("name");
var gender= document.getElementById("gender");
var address= document.getElementById("address");
var email = document.getElementById("email");
var table = document.getElementById("myTableData");
id.value="";
name.value="";
gender.value="";
address.value="";
email.value="";
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
}
Add Function will look like this..
function addRow() {
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var id = document.getElementById("id");
var name = document.getElementById("name");
var gender = document.getElementById("gender");
var address = document.getElementById("address");
var email = document.getElementById("email");
var cell1 = row.insertCell(0);
cell1.innerHTML=id.value;
var cell2 = row.insertCell(1);
cell2.innerHTML = name.value;
var cell3 = row.insertCell(2);
cell3.innerHTML = gender.value;
var cell4 = row.insertCell(3);
cell4.innerHTML = address.value;
var cell5 = row.insertCell(4);
cell5.innerHTML = email.value;
var cell6 = row.insertCell(5);
var strHtml5 = "<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"UpdateRow(" + rowCount + ")\" VALUE=\"Update Row\">|<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"delRow(" + rowCount + ")\" VALUE=\"Delete Row\">";
cell6.innerHTML = strHtml5;
}
</script>
I copied your code and executed in my machine and found minor errors as well as big mistake you did by not using form tag and created the form.
After reverse engineering I appended your code and made it fully functional as well as simple to understand.
<!DOCTYPE html>
<html>
<head>
<title>HTML dynamic table using JavaScript</title>
<!-- ### <script type="text/javascript" src="D:\LatestNewProject-JavaScript\script.js"></script> -->
</head>
<body>
<div id="myform">
<b>Employee Information</b>
<form method="post" action=""> <!-- ###Form tag is not used -->
<table>
<tr>
<td>ID:</td> <!-- ###change id to empId as id="id" will cause ambiguity -->
<td><input type="text" id="empId"></td> <!-- ###use text field instead of number to make input of 3 digit no. easy -->
</tr>
<tr>
<td>Name:</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Gender:</td> <!-- ### imstead of select option you must use radio button -->
<td> <input type="radio" id="gender" value="male" /> Male <br>
<input type="radio" id="gender" value="Female" /> FeMale
</td>
</tr>
<tr>
<td>Address:</td>
<td><input type="textarea" id="address"></td> <!-- ###insted of text field you should give textarea field-->
</tr>
<tr>
<td>Email:</td> <!-- ###email is new element in HTML5 so, id="email" can cause issue, so email=Email -->
<td><input type="email" id="mail" name="Email"></td>
</tr>
<!-- No need to use this [<table>] --> <!-- ### onclick should be onClick [best practice]-->
<tr>
<td><input type="button" id="add" value="Add" onclick="javascript:addRow()"></td>
<td><input type="reset" value="Reset" /> </td>
<td><input type="button" id="update" value="Update" onClick=""></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="mydata">
<table id="myTableData" border="1" cellpadding="2">
<tr>
<td><b>ID</b></td>
<td><b>Name</b></td>
<td><b>Gender</b></td>
<td><b>Address</b></td>
<td><b>Email</b></td>
<td><b>Action</b></td>
</tr>
</table>
</div>
<!-- ============ JavaScript ========== -->
<script>
function addRow() {
var id= document.getElementById("empId");
var name= document.getElementById("name");
var gender= document.getElementById("gender");
var address= document.getElementById("address");
var email = document.getElementById("mail");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= empId.value;
row.insertCell(1).innerHTML= name.value;
row.insertCell(2).innerHTML= gender.value;
row.insertCell(3).innerHTML= address.value;
row.insertCell(4).innerHTML= mail.value;
row.insertCell(5).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(6).innerHTML= '<input type="button" value = "Edit" onClick="Javacsript:updateRow(this)">';
empId.value="";
name.value="";
gender.value="";
address.value="";
mail.value="";
}
function updateRow(obj){
}
function reset(){
var id= document.getElementById("empId");
var name= document.getElementById("name");
var gender= document.getElementById("gender");
var address= document.getElementById("address");
var email = document.getElementById("mail");
var table = document.getElementById("myTableData");
empId.value="";
name.value="";
gender.value="";
address.value="";
mail.value="";
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
</script>
</body>
</html>
I am trying to implement a dynamic table but when the button is pressed to add a row the row is added but the input text box is not inserted in both cells. Any idea how to solve this problem.
<html>
<body>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<table id="dataTable" width="150px" border="1">
<tr>
<td height="27">
1
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var firstCell = row.insertCell(0);
firstCell.innerHTML = rowCount + 1;
var secondCell = row.insertCell(1);
var thirdCell = row.insertCell(2);
var element = document.createElement("input");
element.type = "text";
element.name = "txtbox[]";
secondCell.appendChild(element);
}
</script>
You need to add another "input" element and append this into the thirdCell.
Try changing the last bit of your javascript function to this:
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox1[]";
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox2[]";
secondCell.appendChild(element1);
thirdCell.appendChild(element2);
Shown here
Note: Your script tag should go inside the body of the html.
Here is what the final code could look like:
<html>
<body>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<table id="dataTable" width="150px" border="1">
<tr>
<td height="27">
1
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var firstCell = row.insertCell(0);
firstCell.innerHTML = rowCount + 1;
var secondCell = row.insertCell(1);
var thirdCell = row.insertCell(2);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox1[]";
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox2[]";
secondCell.appendChild(element1);
thirdCell.appendChild(element2);
}
</script>
</body>
</html>
You have not written the code to add a new text element to the third column. Add the below mentioned code after "secondCell.appendChild(element);" section of your code:
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox2[]";
thirdCell.appendChild(element2);
my javascript function is below where I am creating the 2 textboxes dynamically each time when the addRow() function is called on button click.Also,I am setting name attribute for each textbox dynamically.but I am not able to access these textbox values from servlet and getting null value as output.
<html>
<head>
<script>
var count=1;
function addRow()
{
var table = document.getElementById('table');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "item "+ count;
// document.write(element1.name);
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "amount" + count;
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
cell3.innerHTML = ' <input type="button" value="Edit" onclick="editRow(this)"/><input type="button" value="Delete" onclick="deleteRow(this)"/>';
cell3.setAttribute("style", "display:none;");
var cell4 = row.insertCell(3);
cell4.innerHTML = '<input type="button" value="Save" onClick="saveRow(this)">';
document.listform.hfield.value=rowCount;
count++;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="css/style.css" type="text/css">
<title>Create your list</title>
</head>
<body>
<form name="listform" method="post" action="Billingservlet">
<div class="wrap">
<center>
<div id="display">
<table id='table' border="0">
<tr id='id'>
<th>
Item Name
</th>
<th>
No. of units
</th>
</tr>
</table>
<input type="button" value="Add another item" onclick="addRow()">
<input type="submit" value="Submit List">
<input type="hidden" name="hfield">
</div>
</center>
</div>
</form>
</body>
</html>
I have this form code to dynamically add rows. How can I add a date dynamically?
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
cell3.appendChild(element2);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
</TR>
</TABLE>
</BODY>
</HTML>
This the code for adding row dynamically
This is the code for calendar
<script language="JavaScript" src="calendar_us.js"></script>
<link rel="stylesheet" href="calendar.css">
<INPUT type="text" name="testinput" />
<script language="JavaScript">
new tcal ({
// form name
'formname': 'testform',
// input name
'controlname': 'testinput'
});
</script>
add a new cell for example,
var cell4 = row.insertCell(3);
cell4.innerHTML = new Date();
.
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
<TD> <INPUT type="text" name="testinput" /></TD>
</TR>
can you explain where to insert the date?