I am working on a project using jsp and html, in which I am adding rows in table dynamically on addRow button click. After adding the rows I am getting the values of all rows in jsp page. But its not getting the values back on jsp page as the name of the parameter is not recognized by jsp page
I am using the following code. Suggest me where i have been stuck.
HTML code:
<!doctype html>
<html lang="en">
<head>
<script language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell0 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "line"+(rowCount+1);
element1.value=""+(rowCount+1);
cell0.appendChild(element1);
document.getElementById("countofrows").value=table.rows.length;
}
</script>
</head>
<body>
<form name="" action="myjsp.jsp">
<table id="receiptTable">
<tr>
<td><input tye="text" name="line1" value="0"></td>
<input type="hidden" name="countofrows">
</tr>
</table>
<table>
<tr>
<input type="button" name="addrow" onClick="addRow('receiptTable')" value="Add Line">
</tr>
</table>
</form>
</body>
</html>
Following is the JSP scriptlet code
<%
int count=Integer.parseInt(request.getParameter("countofrows"));
for(int i=1 ; i<=count ; i++;) {
String value=request.getParameter("line"+i));
out.println(" value here is"+value);
}
%>
It's working fine for the default row element but getting null in case of adding row
Replace
<input type="hidden" name="countofrows">
with
<input type="hidden" name="countofrows" id="countofrows">
and try again.
How about this one
<script language="javascript">
function addRow(tableID,theForm)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell0 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "line"+(rowCount+1);
element1.value=""+(rowCount+1);
cell0.appendChild(element1);
theForm.countofrows.value=table.rows.length;
}
</script>
<form name="" action="myjsp.jsp">
<table id="receiptTable">
<tr>
<td>
<input tye="text" name="line1" value="0">
</td>
<input type="hidden" name="countofrows" id="countofrows" >
</tr>
</table>
<table>
<tr>
<input type="button" name="addrow" onClick="addRow('receiptTable',this.form)" value="Add Line">
</tr>
</table>
</form>
Related
I want to use a javascript in my jsp page in order to insert value of the input box into a table row.
My Jsp Page:-
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<script type="text/javascript">
function addData(){
var x = 1;
var a = document.getElementById('area').value;
var table = document.getElementByTagName('table')[0];
var row = table.insertRow(table.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = x++;
cell2.innerHTML = a;
}
</script>
</head>
<body>
<h2>Area...</h2>
Area: <input type="text" id="area" name="area" required/><label>sq. ft.
<button onclick="addData();">Add To Table</button>
</br></br>
<div>
<h2>Area Table...</h2>
<table border="1">
<tr>
<th>Section</th>
<th>Area</th>
</tr>
<tr>
<td>1</td>
<td>125.4485</td>
</tr>
</table>
</div>
</body>
</html>
Here i wanted to insert a row into a table from the input box. But the value is not being inserted.
Is there any problem in the code.
use the console developer tools of your browser, to see errors,
here is the error :
Uncaught TypeError: document.getElementByTagName is not a function
at addData (a.html:11)
at HTMLButtonElement.onclick (a.html:28)
which means javascript doesn't recognise this function , so you have to look , the right notation of the function which is
getElementsByTagName
Please correct the spelling getElementByTagName to getElementsByTagName
Typo
Try like this, TagName is the multiple selector.you are missing s
var table = document.getElementsByTagName('table')[0];
instead of
var table = document.getElementByTagName('table')[0];
function addData() {
var x = 1;
var a = document.getElementById('area').value;
var table = document.getElementsByTagName('table')[0];
var row = table.insertRow(table.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = x++;
cell2.innerHTML = a;
}
<h2>Area...</h2>
Area: <input type="text" id="area" name="area" required/><label>sq. ft.
<button onclick="addData();">Add To Table</button>
</br></br>
<div>
<h2>Area Table...</h2>
<table border="1">
<tr>
<th>Section</th>
<th>Area</th>
</tr>
<tr>
<td>1</td>
<td>125.4485</td>
</tr>
</table>
</div>
I am trying to display the database values in a html table using javascript but i am getting only the last value in the database table
function productValues() {
if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
var responseJson= JSON.parse(xmlHttp.responseText);
var length=responseJson.a1.length;
document.getElementById("nid").value="";
document.getElementById("pid").value="";
document.getElementById("cid").value="";
document.getElementById("name").value="";
document.getElementById("price").value="";
for(i=0;i<length;i++){
var a=responseJson.a1[i];
var b=responseJson.a2[i];
var c=responseJson.a3[i];
var d=responseJson.a4[i];
var e=responseJson.a5[i];
document.getElementById("nid").value=a;
document.getElementById("pid").value=b;
document.getElementById("cid").value=c;
document.getElementById("name").value=d;
document.getElementById("price").value=e;
}
}
}
//response
ProductSearch prod=new ProductSearch();
prod.setA1(a1);
prod.setA2(a2);
prod.setA3(a3);
prod.setA4(a4);
prod.setA5(a5);
String responseJson = new Gson().toJson(prod);
//html code
</head>
<form id="form1" method="post" action="ProductNameSearchF">
<table align="center">
<tr>
<td><font color="#006400"><b> Select Item:</b></font>
<input type="text" name="searchname" id="user" onclick="clearFields()"/>
<input type="button" id="submit" style=" color:#280000 ;font-size: medium;" value="Edit" onclick="getDetails();" />
<tr>
<br/></td></tr>
<div id="welcometext" align="center">
</div>
</table>
<TABLE cellpadding="8" id ="table" border="1" align="center" style="background-color: #EEEEEE;">
<TR bgcolor="#66CCFF"><font color="#fff">
<TD color="#0080FF" width="0.1%" ><B>Id</B></TD>
<TD color="#0080FF" width="0.5%"><B>ProductType_Id</B></TD>
<TD width="0.1%"><B>Cuisine_Id</B></TD></font>
<TD width="0.5%"><B>Name</B></TD></font>
<TD width="0.5%"><B>Price</B></TD></font>
</TR>
<TR>
<TD><input type="text" name="id" id="nid" style="background-color:transparent; color:blue; " readonly ></TD>
<TD><input type="text" name="productid" id="pid" style="background-color:transparent; color:red; " ></TD>
<TD><b><input type="text" name="cuisineid" id="cid" style="background-color:transparent; color:red; " ></b></TD>
<TD><b><input type="text" name="name" id="name" style="background-color:transparent; color:red; "></b></TD>
<TD><b><input type="text" name="price" id="price" style="background-color:transparent; color:red;" ></b></TD></input>
</TR>
</font>
<font size="+3" color="red"></b>
</font>
<TR>
</tr>
</TABLE>
<table align="center">
<tr>
<td colspan=""> <img src="clear.jpg" width="50" height="30" ></img> <button type="submit" name="someName" value="someValue"><img src="redsubmit.png" width="70" height="30" ></button> </td>
</tr>
</table>
</table>
</form>
Here is my html code , i am adding only the essntial code of the html page
#user3825041: In Html elements id a are unique in nature. I mean if we you repeatedly set same ids with different values, at the end you will have single value(i.e is the last one) updated. Due to which you are getting only last value.
Please try to change ids with each row update.
Or else you can use html table plugins like bootstrap table which are easy and responsive to use. You just need to provide data(JSON/XML format) to these plugins.
http://getbootstrap.com/css/#tables
You can generate table dynamically from javascript, to achieve it your (servlet) response should be like:
ArrayList<ProductSearch> al = new ArrayList<ProductSearch>();
... databse code ...
while(rs.next()) {
ProductSearch prod=new ProductSearch();
prod.setA1(a1);
prod.setA2(a2);
prod.setA3(a3);
prod.setA4(a4);
prod.setA5(a5);
al.add(prod);
}
...
String responseJson = new Gson().toJson(al);
response.getWriter().println(responseJson);
And your html should be like:
<input type="button" value="Show Results" onclick="showTable()" />
<div id="dvTable"></div>
<script type="text/javascript">
function showTable() {
if (xmlHttp.readyState == 4) {
var responseJson = JSON.parse(xmlHttp.responseText);
var table = document.createElement("TABLE");
table.border = "1";
var row = table.insertRow(-1);
var headerCell = document.createElement("TH");
headerCell.innerHTML = "nid";
row.appendChild(headerCell);
var headerCell = document.createElement("TH");
headerCell.innerHTML = "pid";
row.appendChild(headerCell);
var headerCell = document.createElement("TH");
headerCell.innerHTML = "cid";
row.appendChild(headerCell);
var headerCell = document.createElement("TH");
headerCell.innerHTML = "name";
row.appendChild(headerCell);
var headerCell = document.createElement("TH");
headerCell.innerHTML = "price";
row.appendChild(headerCell);
for (var i = 0; i < responseJson.length; i++) {
row = table.insertRow(-1); //creates new row
row.id = "row1"; // if you want to set id of row
var cell = row.insertCell(-1); // creates new column
cell.innerHTML = responseJson[i].a1; // put data in column
cell.id = "column1"; // if you want to set id of column
var cell = row.insertCell(-1);
cell.innerHTML = responseJson[i].a2;
var cell = row.insertCell(-1);
cell.innerHTML = responseJson[i].a3;
var cell = row.insertCell(-1);
cell.innerHTML = responseJson[i].a4;
var cell = row.insertCell(-1);
cell.innerHTML = responseJson[i].a5;
}
var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
}
}
</script>
I have added a row using javascript. Now I want the new columns's value to be picked from the input box text by id. There's some sort of error in it, which I'm unable to get.
<html>
<head>
<script>
function addtosubtotal() {
var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = getElementById("cid");
cell2.innerHTML = document.getElementById("name");
}
</script>
</head>
<body>
<table id="myTable" >
<tr>
<td>S. No</td>
<td>Item Name</td>
<td>Subtotal</td>
</tr>
<tr>
<td><input type="text" id="cid" name="id" /> </td>
<td><button onclick="addtosubtotal()" /></td>
</tr>
</table>
</body>
</html>
You don't have an id for the input name:
<input type="text" id="name" name="name" />
So you wont get it by id
You can also combine the two statements in your JavaScript if you want to
<script>
function addtosubtotal() {
var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0).innerHTML = document.getElementById("cid").value;
var cell2 = row.insertCell(1).innerHTML = document.getElementById("name").value;
}
</script>
Based upon user-input I want to generate a matrix / table for display. Here is the html
html
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<title>lostBondUserPmtEntry</title>
<body>
<form name="test" ><font face="Verdana" size = "2">
<input name="Text1" type="text" /> score <br>
<input type="submit" Name ="test" id="gp"/>
<input type="hidden" name="dateFactor">
<table border="1">
<tr>
<td>sensitivity level</td>
<td>criticality level</td>
<td>priority level</td>
<td>Response time</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>high</td>
<td>2 hours</td>
</tr>
</table>
</form>
</body>
DEMO
The brief algo is
if score is 10 (certain value) populate the table as with predefined values (those values with column names are shown in DEMO). I want the table to be generated on particular button. I can call function, but I want to know how to append the html code for table on function call.
Thanks.
To append a row to the table you can try something like this:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = "cell 1 text";
var cell2 = row.insertCell(1);
cell2.innerHTML = "cell 2 text";
var cell3 = row.insertCell(2);
cell3.innerHTML = "cell 3 text";
}
i want to save all record of this dynamically created table row into mysql database but i m unable to get name value for dynamically added feilds which i can use in $_POST method .Kindly help me out .And Also tell me how to convert JavaScript var into Php Variable
<?php
if(isset($_POST['buton_sumit']))
{
$nav_id =1;
$item1=$_POST['name1'];
$item1=$_POST['name2'];
echo $item1 + $item2;
}
?>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
</HEAD>
<BODY>
<table id="extra" width="499" >
<th width="24">R</th><th width="19">Sr.</th><th width="133">Item-Name</th><th width="144">Quantity</th><th width="145">price</th>
</table>
<form action="table1.php" method="post" name="input">
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD width="24"><INPUT type="checkbox" name="chk"/></TD>
<TD width="19"> 1 </TD>
<TD width="133"> <INPUT type="text" name="name1"/> </TD>
<TD width="133"> <INPUT type="text" name="qty1"/> </TD>
<TD width="133"> <INPUT type="text" name="price1"/> </TD>
</TR>
</TABLE>
<INPUT type="button" value="Add Item" onclick="addRow('dataTable')" />
<INPUT type="button" value="Remove Item" onclick="deleteRow('dataTable')" />
<INPUT type="submit" value="End Sale" name="buton_sumit" />
</form>
<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";
element2.name="name"+ cell2.innerHTML;
var element2id="myid"+cell2.innerHTML;
element2.setAttribute('id',element2id);
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
element3.name="qty"+ cell2.innerHTML;
cell4.appendChild(element3);
var cell5 = row.insertCell(4);
var element4 = document.createElement("input");
element4.type = "text";
element4.name="price"+ cell2.innerHTML;
cell5.appendChild(element4);
}
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);
}
}
javascript:(document.write(document.forms[0].elements[2].name))
var myname2=2;
</SCRIPT>
</BODY>
</HTML>
I used the same kinda code and my problem was that when I clicked checkbox for row number 2 ... in Php I always get the result as row number 1 checkbox is checked which is wrong...
enter code here
<html><body>
<?php
$col = $_POST['Colname'];
$dtype = $_POST['Datatype'];
$pk = $_POST['Pk'];
$dbname= $_POST['Dbname'];
$space=$_POST['Space'];
$concount=$_POST['Concount'];
$qps=$_POST['Qps'];
echo "$dbname <br/> $space <br/> $concount <br/> $qps <br/> ";
$result=count($col);
echo($result);
while($result!=0)
{
$result-=1;
echo "<table><tr>";
echo "<td>$col[$result]</td>";
echo "<td>$dtype[$result]</td>";
echo "<td>$pk[$result]</td>";
echo "</tr></table>";
}
?>
</html></body>
What is the error/output that you get on echo?
Also send the number of rows 'rowCount' to the Server using a hidden field. This rowcount will help you define end point for loop
Add to HTML
<input type="hidden" id="rowCount"/>
in JS code
<script>
var objInputFieldRowCount = docuement.getElemendbyId("rowCount");
var jsRowCount = table.getElementsByTagName("TR").length;
objInputFieldRowCount.value = jsRowCount;
</script>