I am making a dynamic table that you can add rows to it and when the user presses the save button I want the whole HTML code at that moment to go into a database variable. What I tried so far was the ob_start();and I tried sending them through POST but I couldn't because I don't know how many rows and variables are there. This is my code so far.
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<script>
var index = 1;
function insertRow(){
var table=document.getElementById("myTable");
var row=table.insertRow(table.rows.length);
var cell1=row.insertCell(0);
var t1=document.createElement("input");
t1.id = "txtName"+index;
cell1.appendChild(t1);
var cell2=row.insertCell(1);
var t2=document.createElement("input");
t2.id = "txtAge"+index;
cell2.appendChild(t2);
var cell3=row.insertCell(2);
var t3=document.createElement("input");
t3.id = "txtGender"+index;
cell3.appendChild(t3);
var cell4=row.insertCell(3);
var t4=document.createElement("input");
t4.id = "txtOccupation"+index;
cell4.appendChild(t4);
index++;
}
</script>
<table id="myTable">
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Occupation and Employer</th>
<th>Add</th>
<tr>
<td><input type="text" id="txtName" /></td>
<td><input type="text" id="txtAge" /></td>
<td><input type="text" id="txtGender" /></td>
<td><input type="text" id="txtOccupation" /></td>
<td><input type="button" id="btnAdd" class="button-add" onClick="insertRow()" value="add"></input></td>
</tr>
</table>
<input type=button name='save' value='save'>
</body>
</html>
Related
I have this code to automatically display a new row every time the students need to add a new subject to the table. After entering all the information needed, the student will have to click on a button that will enable the student to view the grades and gpa of each subject which is supposed to be displayed in a new added cell to the table.
My question is, how can I add a new cell to automatically display the grades and GPA for each subject based on the expected marks entered by the student?
<html>
<title> GPA Calculator </title>
<head>
<script>
function addRow(myTable) {
var table = document.getElementById("myTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
cell4.appendChild(element3);
}
</script>
</head>
<body>
<table id="myTable" border="1" ; width: "100%">
<tr>
<th>Code
<th>Subject
<th>Credit
<th>Expected Mark
</tr>
<tr>
<td><input type="text" name="code1" value="SCJ119"></td>
<td><input type="text" name="subject1" value="Object-Oriented Programming">
</td>
<td><input type="text" name="credit1" value="4"></td>
<td><input type="text" name="mark1" value=""></td>
</tr>
<tr>
<td><input type="text" name="code2" value="SCK302"></td>
<td><input type="text" name="subject2" value="Software Engineering"></td>
<td><input type="text" name="credit2" value="3"></td>
<td><input type="text" name="mark2" value=""></td>
</tr>
<tr>
<td><input type="text" name="code3" value="SCO107"></td>
<td><input type="text" name="subject3" value="Operating System"></td>
<td><input type="text" name="credit3" value="3"></td>
<td><input type="text" name="mark3" value=""></td>
</tr>
<tr>
<td><input type="text" name="code4" value="SSV901"></td>
<td><input type="text" name="subject4" value="Web Programming"></td>
<td><input type="text" name="credit4" value="3"></td>
<td><input type="text" name="mark4" value=""></td>
</tr>
<tr>
<td><input type="text" name="code5" value="ENG213"></td>
<td><input type="text" name="subject5" value="Advanced Academic English
Skills"></td>
<td><input type="text" name="credit5" value="2"></td>
<td><input type="text" name="mark5" value=""></td>
</tr>
<tr>
<td><input type="text" name="code6" value="QBS221"></td>
<td><input type="text" name="subject6" value="Structure and Functions of
Proteins"></td>
<td><input type="text" name="credit6" value="3"></td>
<td><input type="text" name="mark6" value=""></td>
</tr>
</table>
<br><input type="button" value="Add Subject" onclick="addRow('myTable')">
</body>
</html>
#RobG I think the only way, to my knowledge, would to use a SQL database and have it be updated via a SQL client. This can be done with software like ISS (built-in to Windows Vista+) or other third-party SQL clients.
Edit: #RobG, I understand that, however, the easiest way to accomplish this is to fetch rows out of a database or even a Microsoft Excel file to use as variables for the grades the student(s) have.
The jquery below works when the element's value changed;
$('.myElements').each(function() {
var elem = $(this);
// Save current value of element
elem.data('oldVal', elem.val());
// Look for changes in the value
elem.bind("propertychange change click keyup input paste", function(event){
// If value has changed...
if (elem.data('oldVal') != elem.val()) {
// Updated stored value
elem.data('oldVal', elem.val());
// Do action - You can call javascript function to add cell
....
}
});
});
When the input value changed you can add one more cell like this(Im in grade);
var row = document.getElementById("myRow");
var x = row.insertCell(0);
x.innerHTML = "New cell";
Once you have all grades you can calculate the GPA from grade's values as you wish.
I hope this helps you mate.
I am using netbeans with chrome extension (netbeans connector) , i created a jsp page like this :
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Form Page</title>
</head>
<body>
<div align = "center">
<form >
<table border="0">
<tbody>
<tr>
<td>Name : </td>
<td><input type="text" name="Name" value="" /></td>
</tr>
<tr>
<td>Password : </td>
<td><input type="password" name="Password" value="" /></td>
</tr>
<tr>
<td>Age : </td>
<td><input type="text" name="Age" value="" /></td>
</tr>
<tr>
<td></td>
<td><input type="reset" value="Reset" style="float: right"/>
<input type="submit" value="Submit" style="float: right" onclick="onSubmit()" />
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div align = "center">
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script language = "javascript">
function onSubmit(){
var name = document.getElementsByName('Name')[0] ;
var password = document.getElementsByName('Password')[0] ;
var age = document.getElementsByName('Age')[0] ;
if(age.value >= 50){
alert('You\'re too old !');
}
var table = document.getElementsByTagName('table')[1] ;
var body = table.getElementsByTagName('tbody')[0] ;
var trNode = document.createElement('tr') ;
var thNameNode = document.createElement('td') ;
var nameTextNode = document.createTextNode(name.value.toString()) ;
thNameNode.appendChild(nameTextNode) ;
var thAgeNode = document.createElement('td') ;
var ageTextNode = document.createTextNode(age.value) ;
thAgeNode.appendChild(ageTextNode) ;
trNode.appendChild(thNameNode) ;
trNode.appendChild(thAgeNode) ;
body.appendChild(trNode) ;
}
</script>
</body>
the function onSubmit() is supposed to add a row in the table dynamically, but when i run on the browser the changes appear briefly and i am redirected again to original page , what is exactly the problem?
Form gets submitted on onSubmit function, you can prevent it by return false.
So below should work
function onSubmit(){
var name = document.getElementsByName('Name')[0] ;
var password = document.getElementsByName('Password')[0] ;
var age = document.getElementsByName('Age')[0] ;
if(age.value >= 50){
alert('You\'re too old !');
}
var table = document.getElementsByTagName('table')[1] ;
var body = table.getElementsByTagName('tbody')[0] ;
var trNode = document.createElement('tr') ;
var thNameNode = document.createElement('td') ;
var nameTextNode = document.createTextNode(name.value.toString()) ;
thNameNode.appendChild(nameTextNode) ;
var thAgeNode = document.createElement('td') ;
var ageTextNode = document.createTextNode(age.value) ;
thAgeNode.appendChild(ageTextNode) ;
trNode.appendChild(thNameNode) ;
trNode.appendChild(thAgeNode) ;
body.appendChild(trNode) ;
return false;
}
You have few options to achieve this.
Use type = 'button' instead of type= 'submit'
Use return false in click handler. Not to forget return in inline event binding. e.g. onclick='return onSubmit()'. Fiddle here
Use e.preventDefault() Fiddle here
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>
i have a javascript function which has foor loop in it. once the loop exists it is not displaying alert can anyone suggest what might be wrong.
the code is below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<?PHP Include('Includes\common\header_items.php');
session_start();
?>
</head>
<body>
<form name="step2" method="POST">
<div id="qwe">
<table width="500px" id="myTable" name="myTable">
<thead>
<tr>
<td >Brawing / Document No.</th>
<td>Revision No.</th>
<td>Description (Optional)</th>
</tr>
</thead>
<tbody>
<tr>
<td width="40%"><input type="text" id="553" name="2" /></th>
<td width="10%"><input type="text" id="revID553" name="3" /></th>
<td width="45%"><input type="text" id="descpID553" name="4" /></th>
</tr>
<tr>
<td width="40%"><input type="text" id="4" name="21" /></th>
<td width="10%"><input type="text" id="15" name="31" /></th>
<td width="45%"><input type="text" id="6" name="41" /></th>
</tr>
<tr>
<td width="40%"><input type="text" id="556" name="2" /></th>
<td width="10%"><input type="text" id="revID556" name="3" /></th>
<td width="45%"><input type="text" id="descpID556" name="4" /></th>
</tr>
</tbody>
</table>
<input type="submit" onclick='Javascript: return testFunc();'>
</div>
</form>
<script language="javascript">
var table_row = [];
function testFunc(){
table_row.length = 0;
var count = 0;
var testing = document.getElementById("myTable").getElementsByTagName("input");
for (i=0; i<=testing.length; i++){
var data = document.getElementById("myTable").getElementsByTagName("input")[i].id;
if(data.substring(0,2) == "55")
{
var value_doc = document.getElementById("myTable").getElementsByTagName("input")[i].value;
var value_rev = 'revID'+data;
var rev = document.getElementById(value_rev).value;
var value_descp = 'descpID'+data;
var descp_data = document.getElementById(value_descp).value;
//code to add into array
table_row[count] = [data,rev,descp_data];
count ++;
}
}
alert("I am in the end");
</script>
</body>
</html>
i cant figure out why it is not displaying the last alert. Any suggestions? THe last alert is not working.
Hello Your code is working fine for me.
Write your function like this.
function testFunc(){
alert("I am in test function");
for (i=0; i<=5; i++){
//code to add values in array
// it displays the values added in array correctly
alert('call');
}
alert("Function is Ending"); //this is not displayed once loop runs 5 times.
return true;
}
Now Call your function in load.
$(document).ready(function () {
testFunc();
});
Fiddle Demo
You have not call your function :
JSFiddle
Check Below Code :
function testFunc(){
alert("I am in test function");
for (i=0; i<=5; i++){
//code to add values in array
// it displays the values added in array correctly
}
alert("Function is Ending"); //this is not displayed once loop runs 5 times.
return true;
}
testFunc(); // calling function
The main problem is in extra loop iteration.
I also rewrite code a little bit to avoid many document.getElementById("myTable").getElementsByTagName("input"), because it causes searching over DOM every time it appears.
<script language="javascript">
var table_row = [];
function testFunc() {
table_row.length = 0;
var count = 0;
var testing = document.getElementById("myTable").getElementsByTagName("input");
for (i = 0; i < testing.length; i++) {
var data = testing[i].id;
if (data.substring(0,2) == "55") {
var value_doc = testing[i].value;
var value_rev = 'revID' + data;
var rev = document.getElementById(value_rev).value;
var value_descp = 'descpID' + data;
var descp_data = document.getElementById(value_descp).value;
//code to add into array
table_row[count] = [data, rev, descp_data];
count ++;
}
}
alert("I am in the end");
}
</script>
There is form which has table containing 1 row and 4 column.The add row button creates a exact row but with different ids .I want to obtain the data filled in this form and send to a php script when clicked on save and continue later button at the bottom .How can I do this?This being a html page.
<form name="myform">
<h3 align="left"><b>Computer</b><h3>
<table id="POITable" border="1" width="100%">
<tr>
<th style="width:10%">Sr No.</th>
<th>Item Description</th>
<th>Quantity</th>
<th>Rate(Inclusive of Taxes)</th>
<th>Total Cost</th>
</tr>
<tr>
<td>1</td>
<td><textarea rows="4" cols="50" id="comp_item"></textarea></td>
<td><input size=25 type="number" id="comp_quant"/></td>
<td><input size=25 type="number" id="comp_rate"/></td>
<td><input size=25 type="number" id="comp_total"/></td>
</tr>
</table>
Total:<input type="text" name="computer" align="right"><br>
<input type="button" id="addmorePOIbutton" value="Add New Row" onclick="insRow()"/>
<script>
function insRow()
{
console.log( 'hi');
var x=document.getElementById('POITable');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;
var inp1 = new_row.cells[1].getElementsByTagName('textarea')[0];
inp1.id += len;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = '';
var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
inp3.id += len;
inp3.value = '';
var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
inp4.id += len;
inp4.value = '';
x.appendChild( new_row );
document.getElementsByName("len")[0].value=len;
}
</script>
<input type="submit" value="SAVE AND CONTINUE LATER">
</form>
</html>
To retrive your data in php you must add name attributes to your form input-fields. I have rewritten your code by replacing the input-id's with name instead, like so:
<td><textarea rows="4" cols="50" name="comp_item"></textarea></td>
<td><input size=25 type="number" name="comp_quant"/></td>
<td><input size=25 type="number" name="comp_rate"/></td>
<td><input size=25 type="number" name="comp_total"/></td>
also in your form-element you must specify action and method.
<form name="myform" action="myphpformhandler.php" method="POST">
I took the liberty to rewrite some of your code but the essentials are intact.
<form name="myform" action="myphpformhandler.php" method="POST"> <!-- point action towards the php-file where you wish to handle your data -->
<h3 align="left"><b>Computer</b><h3>
<table id="POITable" border="1" width="100%">
<tr>
<th style="width:10%">Sr No.</th>
<th>Item Description</th>
<th>Quantity</th>
<th>Rate(Inclusive of Taxes)</th>
<th>Total Cost</th>
</tr>
<tr>
<td>1</td>
<td><textarea rows="4" cols="50" name="comp_item"></textarea></td>
<td><input size=25 type="number" name="comp_quant"/></td>
<td><input size=25 type="number" name="comp_rate"/></td>
<td><input size=25 type="number" name="comp_total"/></td>
</tr>
</table>
Total:<input type="text" name="computer" align="right"><br>
<input type="button" id="addmorePOIbutton" value="Add New Row"/>
<input type="submit" value="SAVE AND CONTINUE LATER">
</form>
<script>
(function() { // Prevent vars from leaking to the global scope
var formTable = document.getElementById('POITable');
var newRowBtn = document.getElementById('addmorePOIbutton');
newRowBtn.addEventListener('click', insRow, false); //added eventlistener insetad of inline onclick-attribute.
function insRow() {
var new_row = formTable.rows[1].cloneNode(true),
numTableRows = formTable.rows.length;
// Set the row number in the first cell of the row
new_row.cells[0].innerHTML = numTableRows;
var inp1 = new_row.cells[1].getElementsByTagName('textarea')[0];
inp1.name += numTableRows;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.name += numTableRows;
inp2.value = '';
var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
inp3.name += numTableRows;
inp3.value = '';
var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
inp4.name += numTableRows;
inp4.value = '';
// Append the new row to the table
formTable.appendChild( new_row );
document.getElementsByName("len")[0].value = numTableRows;
}
})();
</script>
Now to access your data in your "myphpformhandler.php" you use the $_POST-variable with your html-element names. like so!
$_POST['comp_item'];
$_POST['comp_item1'];
$_POST['comp_quant'];
$_POST['comp_quant1']; //etc...