I have a Javascript value from a.jsp and I want to pass the value of it to b.jsp.
how can it be done?
a.jsp
<script type="text/javascript">
var inspection_method_row_limit=50;
</script>
as example I want to pass to value of inspection_method which can be used in b.jsp.
In a.jsp, you need to forward to another jsp. I am assuming you will do it on a click of some anchor.
In javascript code, Make the final url.
var forward_url = "/jsp/b.jsp?inspection_method_row_limit="+50;
Update the location probably, on a click of an anchor tag...
Forward.
In the target jsp, use the following...
The value of inspection_method_row_limit is <b>
<%= request.getParameter("inspection_method_row_limit") %></b>!
<script type="text/javascript">
var inspection_method_row_limit=0;
var deleted_row_inspection_method="";
function myCreateFunction(tableID) {
var ClickMax = 5;
if (inspection_method_row_limit < ClickMax){
var table = document.getElementById(tableID);
var x = inspection_method_row_limit + 1;
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
//compare if no deleted row before then enter if statement and numbering is follow inspection_method_row_limit
if (deleted_row_inspection_method == ""){
var cell2 = row.insertCell(1);
cell2.innerHTML = x;
var cell3 = row.insertCell(2);
var element2 = document.createElement("textarea");
element2.type = "textarea";
var txt = tableID + x;
element2.name = txt;
element2.className = "textarea2";
cell3.appendChild(element2);
}
//if user had deleted row before then the numbering of previously will be reuse
else
{
var stringlength = deleted_row_inspection_method.length;
var foundLocation = deleted_row_inspection_method.search("-");
var subStringname = deleted_row_inspection_method.substring(0,foundLocation);
deleted_row_inspection_method = deleted_row_inspection_method.slice(foundLocation + 1,stringlength);
var cell2 = row.insertCell(1);
cell2.innerHTML = subStringname;
var cell3 = row.insertCell(2);
var element2 = document.createElement("textarea");
element2.type = "textarea";
element2.name = tableID + subStringname;
element2.className = "textarea2";
cell3.appendChild(element2);
}
inspection_method_row_limit ++;
}
function myDeleteFunction(tableID) {
//delete row for inspection method
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) {
var res = row.cells[1].innerHTML + "-";
deleted_row_inspection_method = deleted_row_inspection_method.concat(res);
table.deleteRow(i);
rowCount--;
i--;
inspection_method_row_limit --;
}
}
}catch(e) {
alert(e);
}
</script>
<form action="index.html?pageid=inspection_session&content=inspection_summary_result" name="form1" id="form1" method="post" onsubmit="return validateForm(document.form1)" >
<tr>
<td width="300" height="100"><font style="font-size:18px">2. Inspection Method <img src="images/information.png" width="20" height="20" align="absmiddle" style="cursor:pointer;" title="Add Row for More Data" alt="Add Row for More Data"></font></td>
<td valign="top">
<button type="button" class="mybtn" onclick="myCreateFunction('inspection_method')"><img align="absmiddle" src="icons/action_add.png"/> Add Row</button>
<button type="button" class="mybtn" onclick="myDeleteFunction('inspection_method')"><img align="absmiddle" src="icons/action_remove.png"/> Delete Row</button>
<table id="inspection_method" border="1">
<tr>
<td width="50"><img src="images/001_06.gif" width="20" height="20" align="absmiddle" style="cursor:pointer;" title="Tick to Delete" alt="Tick to Delete"></td>
<td width="50">No.</td>
<td width="589">Description</td>
</tr>
</table><br>
</td>
</tr>
<table>
<tr>
<td height="45" colspan="4"><input type="submit" name="submit" class="mybtn3" value="Next"/> <input type="reset" class="mybtn3" name="reset" value="Reset"/></td>
</tr>
</table>
</form>
Related
I have created a table. On every button click a new row is added in the table. Now I want to limit the maximum number of rows (10) that can be created. I want to do this using Javascript. Help is appreciated.
Here is my code till now:
<div id="div1" class="container input-group">
<input type="text" name="textbox1" id="textbox1" class="form-control" placeholder="Input Box" align="center">
<button class="btn btn-primary" name="btn1" id="btn1" onclick="myFunction()">Add</button>
<input type="submit" name="sub1" id="sub1" class="btn btn-success">
<table border="1" id="tb1" class="table table-bordered">
<tr>
<td>Sr. No.</td>
<td>Value</td>
<td id="td3">Action</td>
</tr>
</table>
</div>
<script type="text/javascript">
function myFunction() {
var table = document.getElementById("tb1");
var text1 = document.getElementById("textbox1").value;
var x = document.getElementById("tb1").rows.length;
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell2.innerHTML = text1;
for (var i = 0; i < x; i++) {
cell1.innerHTML = i;
}
cell3.innerHTML = '<input type="button" class="btn" id="del1" name="del1" value="Delete" onclick="funDel(this)">';
}
</script>
Now I just want to limit the no. of rows which can be created by button click.
You are already getting your row count with this part of your code:
var x = document.getElementById("tb1").rows.length;
So just check x to see if that count is less than 10 if so add another row, if not then just return without adding another.
if(x > 9){
return;
}
Note though that rows.length when accessed from your table element will return the number of all rows, this includes those that might be in a thead,tfoot and any tbody.
So if you end up wanting to make sure thead,tfoot, or a certain tbody has a certain number of rows then you have to access rows.length from that particular element
//For thead
var num_rows = document.querySelector("#tb1").tHead.rows.length;
//For tbody, [0] swap 0 with the whichever tbody index you want to check
var num_rows = document.querySelector("#tb1").tBodies[0].rows.length;
//For tFoot
var num_rows = document.querySelector("#tb1").tFoot.rows.length;
Demo
var mainBody = document.querySelector("#tb1").tBodies[0];
document.querySelector("button").addEventListener("click", function() {
var num_rows = mainBody.rows.length;
if (num_rows > 9) return;
var row = mainBody.insertRow();
row.insertCell(0).textContent = "Row "+(num_rows+1);
row.insertCell(1).textContent = "Col 2";
row.insertCell(2).textContent = "Col 3";
});
<table id="tb1">
<tbody>
<tr>
<td>Row 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</tbody>
</table>
<button>Add Row</button>
Just add 3 lines to your script part, rest will be same. Jsfiddle here
1 - var totalRows = 0;
2 - if(totalRows <= 10)
3 - totalRows = totalRows + 1;
Updated script part is :
var totalRows = 0;
function myFunction() {
if(totalRows <= 10){
var table = document.getElementById("tb1");
var text1 = document.getElementById("textbox1").value;
var x = document.getElementById("tb1").rows.length;
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell2.innerHTML = text1;
for (var i = 0; i < x; i++) {
cell1.innerHTML = i;
}
cell3.innerHTML = '<input type="button" class="btn" id="del1" name="del1" value="Delete" onclick="funDel(this)">';
}
totalRows = totalRows + 1;
}
Create a variable and update it with each addition of row, Once the variable reach 10, stop adding new row
var countRow = 0; // variable to track the row count
function myFunction() {
if(countRow<=10){
var table = document.getElementById("tb1");
var text1 = document.getElementById("textbox1").value;
var x = document.getElementById("tb1").rows.length;
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell2.innerHTML = text1;
for (var i = 0; i < x; i++) {
cell1.innerHTML = i;
}
cell3.innerHTML = '<input type="button" class="btn" id="del1" name="del1" value="Delete" onclick="funDel(this)">';
}
countRow++; // increase variable by 1
}
DEMO
Try This -
var indx = 0;
function myFunction() {
indx++;
if(indx<=10){
var table = document.getElementById("tb1");
var text1 = document.getElementById("textbox1").value;
var x = document.getElementById("tb1").rows.length;
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell2.innerHTML = text1;
for (var i = 0; i < x; i++) {
cell1.innerHTML = i;
}
cell3.innerHTML = '<input type="button" class="btn" id="del1" name="del1" value="Delete" onclick="funDel(this)">';
}
}
<div id="div1" class="container input-group">
<input type="text" name="textbox1" id="textbox1" class="form-control" placeholder="Input Box" align="center">
<button class="btn btn-primary" name="btn1" id="btn1" onclick="myFunction()">Add</button>
<input type="submit" name="sub1" id="sub1" class="btn btn-success">
<table border="1" id="tb1" class="table table-bordered">
<tr>
<td>Sr. No.</td>
<td>Value</td>
<td id="td3">Action</td>
</tr>
</table>
</div>
Try adding a variable to count. Make a global variable 'count' and increment it every time when 'myFunction()' is called. use an if else in 'myFunction()' to control or limit the rows.
<input type="text" name="textbox1" id="textbox1" class="form-control" placeholder="Input Box" align="center">
<button class="btn btn-primary" name="btn1" id="btn1" onclick="myFunction()">Add</button>
<input type="submit" name="sub1" id="sub1" class="btn btn-success">
<table border="1" id="tb1" class="table table-bordered">
<tr>
<td>Sr. No.</td>
<td>Value</td>
<td id="td3">Action</td>
</tr>
</table>
</div>
<script type="text/javascript">
var count=0;
function myFunction() {
count++;
if(count<11)
{
var table = document.getElementById("tb1");
var text1 = document.getElementById("textbox1").value;
var x = document.getElementById("tb1").rows.length;
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell2.innerHTML = text1;
for (var i = 0; i < x; i++) {
cell1.innerHTML = i;
}
cell3.innerHTML = '<input type="button" class="btn" id="del1" name="del1" value="Delete" onclick="funDel(this)">';
} }
</script>
Use your function as below,
<script>
var totalCount = 0;
function myFunction() {
if(totalCount >= 10)
{
alert("You can add only 10 records");
return false;
}
else
{
totalCount++;
//your function for Adding Data
return true;
}
}
//Also Manage your funDel() function if you want like below
function funDel()
{
//Your code for deletion
totalCount--;
}
</script>
I have an HTML table that imports data from a database. Currently, I have 3 buttons at the bottom. Add Row, Save, and Delete. I have the "Add Row" and "Delete" button working and functioning correctly. So my question is, is there a way that when I click the "Save" button, it automatically updates and saves the data to the database that I am accessing?
HTML/PHP:
<table id="html_master">
<thead>
<tr>
<td>MR_ID</td>
<td>MR_Name</td>
<td>Buyer_ID</td>
<td>MR_POC_N</td>
<td>MR_POC_E</td>
<td>MR_POC_P</td>
<td>Select</td>
</tr>
</thead>
<tbody>
<?php
foreach ($dbh->query($sql) as $rows){
?>
<tr>
<td id="mr_id"><?php echo intval ($rows['MR_ID'])?></td>
<td id="mr_name"><div contenteditable><?php echo $rows['MR_Name']?></div></td>
<td id="buyer_id"><div contenteditable><?php echo $rows['Buyer_ID']?></div></td>
<td id="poc_n"><div contenteditable><?php echo $rows['MR_POC_N']?></div></td>
<td id="poc_e"><div contenteditable><?php echo $rows['MR_POC_E']?></div></td>
<td id="poc_p"><div contenteditable><?php echo $rows['MR_POC_P']?></div></td>
<td align="center"><input type="checkbox" name="check" value="checked"></td>
</tr>
<?php
}
?>
</tbody>
</table>
<input type="button" class="add" value="Add Row" onclick="addRow('html_master')">
<input type="button" id="save" value="Save">
<input type="button" id="delRow" value="Delete" onclick="deleteRow('html_master')">
</body>
</html>
Javascript:
// ----- Delete Row -----
function deleteRow(html_master){
var tbl=document.getElementById(html_master);
var col=tbl.querySelectorAll('input[type=\"checkbox\"]:checked');
if( col ){
for( var n in col )if( col[ n ].nodeType==1 ){
try {
var tr=col[ n ].parentNode.parentNode;
var tbody=tr.parentNode;
tbody.removeChild( tr );
}catch( err ){
console.warn(err);
continue;
}
}
}
}
// ----- Add Row -----
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 = rowCount;
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "txtbox[]";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox[]";
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "txtbox[]";
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("input");
element7.type = "checkbox";
element7.name="chkbox[]";
cell7.appendChild(element7);
}
I was trying to make a delete button to delete rows or using chkbox and button to delete rows. When I use the deleteRow function, it will delete all rows in the table. Also, I have assigned an element id to do other functions, so I cannot change the addrow function about assign element id.
When i use delete button, it can do i wanted. I want to delete the row when the checkbox checked How can i use checkbox to delete row ?
Here's my code:
HTML:
<form>
<table>
<tr>
<td align="center" colspan="3"></td>
</tr>
</table>
<table id="dataTable" class='table table-striped table-hover table-bordered'>
<tr>
<td align="center"><b>Product ID:</b></td>
<td><input type="text" name="productid" id="productid" class="form-control" /></td>
<td align="center"><b>QTY:</b></td>
<td><input type="text" name="poqty" id="poqty" class="form- control"></td>
</tr>
<tr>
<input type="button" value="Add Item" onclick="addRow('dataTable')" class="form-control" />
<input type="button" value="del Item" onclick="deleteRow('dataTable')" class="btn btn-default" />
</tr>
<tr>
<td>
<input type="submit" value="confirm">
</td>
</tr>
<div id="txtHint"></div>
<div id="qty123"></div>
</td>
</tr>
</table>
</form>
Javascript:
<script language="javascript">
var y = 0;
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";
element1.name = "chkbox";
element1.id = "chkone" + y;
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox1[]";
element2.id = "txtone" + y;
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox2[]";
element3.id = "txtre" + y;
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "txtbox3[]";
element4.id = "qtyone" + y;
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox4[]";
element5.id = "txtra" + y;
cell5.appendChild(element5);
y++;
}
</script>
<script>
function deleteRow(dataTable) {
var table = document.getElementById(dataTable);
var row = document.getElementById(dataTable);
row.parentNode.removeChild(row);
}
</script>
I want to delete the row when the checkbox checked , How can i use checkbox to delete row ?
There's probably more than one problem here, but what sticks out to me is this:
<input type="button" value="Add Item" onclick="addRow(tableID)" class="form-control" />
It doesn't look like you're correctly passing tableID to this function, whereas you're correctly passing a parameter to the deleteRow() function. Where is tableID in your code?
Given the code you've posted, nothing happens when you invoke addRow() because the function is never fired - tableID is undefined.
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);
I am new in javascript and I want to generate rows dynamically when "Tab" is pressed and want to get the values enterd in dynamically generated rows so that i could use these values in my servlet code.
Here is my html
<html>
<head>
<title> Add/Remove dynamic rows in HTML table </title>
<script src="table.js" language="javascript" /></script>
</head>
<body onload="hello()">
<form action="servletname">
<input type="button" value="Delete Row" onclick="deleteRow()" />
<table id="table1" width="350px" border="2">
<tr>
<td align="center"> Sr.No </td>
<td align="center" style="width:50px;"> Code </td>
<td align="center" style="width:1100px;"> Test Name </td>
<td align="center" style="width:80px;"> Rate </td>
</tr>
</table>
<table id="table2" width="350px" border="2">
<tr>
<td><input type="checkbox" name="chk"/></td>
<td> 1 </td>
<td> <input type="text" id="tc" style="width:50px;" /> </td>
<td> <input type="text" id="tn" style="width:190px;" /> </td>
<td> <input type="text" id="rt" style="width:80px;" onkeypress="KeyCheck(event)" /> </td>
</tr>
</table>
<br><input type="text" id="rt1" style="width:80px;"/>
</form>
</body>
</html>
code of "row.js" file is:
function hello()
{
document.getElementById("tc").focus();
}
function KeyCheck(e)
{
var KeyID = (window.event) ? event.keyCode : e.keyCode;
if(KeyID==9)
{
addRow();
}
}
function addRow()
{
var table = document.getElementById("table2");
var rowCount = table.rows.length;
var row = table.insertRow(table.rows.length);
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.style.width = "50px";
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
cell4.appendChild(element3);
var cell5 = row.insertCell(4);
var element4= document.createElement("input");
element4.type = "text";
element4.style.width = "80px";
cell5.appendChild(element4);
element4.focus(); // to shift focus on last cell in newly generated row
//to generate new row if enter is pressed in focused cell of newly generated row.
element4.onkeypress=KeyCheck;
}
But it doesnot detect "Tab" or any other key except than "Enter" key. plz tell me how to detect "Tab" or some other key in this program and how can I access values entered in these dyanamically generated rows.
Use the following js function for add row:
function addRow() {
var table = document.getElementById("table2");
var rowCount = table.rows.length;
var row = table.insertRow(table.rows.length);
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.style.width = "50px";
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
cell4.appendChild(element3);
var cell5 = row.insertCell(4);
var element4 = document.createElement("input");
element4.type = "text";
element4.style.width = "80px";
element4.onkeypress = KeyCheck;
cell5.appendChild(element4);
element4.focus();// to shift focus on last cell in newly generated row
//to generate new row if enter is pressed in focused cell of newly generated row.
}
You're setting up the event handler incorectly. It should be:
element4.onkeypress=KeyCheck
http://jsfiddle.net/SMDhu/4/
For Tab key you need to handle keydown with keycode 9.
To get the value inside the value inside the field, simply access the value property of the DOM element.
http://jsfiddle.net/mihaifm/24s8e/2/