We Keep Coding

How to put values from html rows to sql database?

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[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "item";
element2.size = "40";
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "qty";
element3.style ="text-align: right";
cell4.appendChild(element3);
}
I am creating a set of columns using this code and by using a button action I am adding such rows continuously to the page.
Now along with this, I want to simultaneously add these values to SQL database.
Plus whenever i revisit this page I should have the previously entered data.
The setup have 3 buttons Delete Row, Add Row and Save.
I want to get all the rows into Database once I click Save.

Not able to retain the values in the row of dynamically formed table using javascript after page refresh

I have the following js code in my jsp. Im not able to retain those textbox values below after the page is refreshed. Any idea how to retain the values?
Im calling this js function onclick of a html button so that it dynamically adds the row to the table.
<script>
function addRow(tableID) {
if(validateForm()==true){
document.getElementById('cruisedowntime2').style.display = "block";
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.defaultChecked="true";
cell1.appendChild(element1);*/
var cell0 = row.insertCell(0);
var element0=document.createElement("select");
element0.name="cruiselinedropdown";
var dropdownlist1=document.getElementById("droplist1");
var defaultselected=dropdownlist1.options[dropdownlist1.selectedIndex].value;
//window.location.replace("http://localhost:8085/Bridge_Downtime_Utility/Servlet?var="+defaultselected);
<%Map<String, String> map = new HashMap<String,String>();
for (int i = 0; i < crsenamelist.size(); i++) {
map.put(crsenamelist.get(i),crsecodelist.get(i));
}
%>
element0.options.add( new Option(defaultselected,defaultselected,true,true) );
element0.options.add( new Option("--","") );
<%
for(Map.Entry m:map.entrySet()){ %>
element0.options.add( new Option("<%=m.getValue()%>","<%=m.getValue()%>") );
cell0.appendChild(element0);<%}%>
var textbox3=document.getElementById('starttime');
var textbox7=document.getElementById('startdate');
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.title="Date: YYYY-MM-DD";
element2.type = "text";
element2.name = "starttimetextbox";
element2.value=textbox7.value+" "+textbox3.value;
cell2.appendChild(element2);
var textbox5=document.getElementById('endtime');
var textbox9=document.getElementById('enddate');
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.title="Date: YYYY-MM-DD";
element3.type = "text";
element3.name = "endtimetextbox";
element3.value=textbox9.value+" "+textbox5.value;
cell3.appendChild(element3);
var textbox1=document.getElementById('descrip');
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "descriptextbox";
if(textbox1.value==''){element4.value="-";}
else
element4.value=textbox1.value;
cell4.appendChild(element4);
//cell4.contenteditable=true;
/* var addRowBox = document.createElement("input");
addRowBox.setAttribute("type", "button");
addRowBox.setAttribute("value", "Edit");
var cell5 = row.insertCell(5);
cell5.appendChild(addRowBox);*/
var deleteRowBox = document.createElement("input");
deleteRowBox.setAttribute("type", "button");
deleteRowBox.setAttribute("value", "X");
deleteRowBox.setAttribute("onclick","SomeDeleteRowFunction(this)");
var cell6 = row.insertCell(4);
cell6.appendChild(deleteRowBox);
}}
</script>

You can store data and then load from localStorage if you want it to persist after page refresh.

To keep your data upon page refresh you need to save it somewhere, for future (after page reload) access.
Store it somewhere at your backend, and then access your, for instance, REST service upon page load.
Store it in localStorage\sessionStorage in browser.
There are no other ways to keep data without actually keeping it :)

Javascript CreateElement button

I have a problem I been suffering on for a couple hours now.
The context is, I need to make a button with action listener in JavaScript and add it into a table.
Here is the code I have
var _button = document.createElement("button");
_button.data = _a;
_button.innerHTML = 'click me';
_button.onclick = function()
{
alert("hello, world");
}
var table = document.getElementById("tableOnline");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var _weakbutton = _button.outerHTML;
_weakbutton.onclick = function()
{
alert("hello, world");
}
cell1.innerHTML = "h";
cell2.innerHTML = "o";
cell3.innerHTML = _weakbutton;
The code works if I add the create the button and add it onto the body (without weakButton), but how can I make it work into a table?
Kind regards,
Zhendos.
EDIT:
Because requested, here is the table we talk about.
<div class = "container">
<div class = "table">
<thead id = "thead">
<tr>
<th> firstname <th>
<th> lastname </th>
<th> organisation </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

Instead of var _weakbutton = _button.outerHTML; create a copy of the button with var _weakbutton = _button.cloneNode(true);. This will create a new button, based on your original one.
Because this is now a button node, you can't add it with cell3.innerHTML = _weakbutton; but have to use cell3.appendChild( _weakbutton );
So, with your code it would be
var _button = document.createElement("button");
_button.data = "hi";
_button.innerHTML = 'click me';
_button.onclick = function()
{
alert("hello, world");
}
var table = document.getElementById("tableOnline");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var _weakbutton = _button.cloneNode(true)
_weakbutton.onclick = function()
{
alert("hello, world");
}
cell1.innerHTML = "h";
cell2.innerHTML = "o";
cell3.appendChild( _weakbutton );
<table id="tableOnline"></table>

Javascript - Id value Increment rows Does Not Work and Remove Rows By Id

I already created the add rows but my problem is, the value of the id that I created doesn't increment. I just stick to 1 result.
I also want to include remove rows so whenever I click the button "remove" the row with specific id will remove.
Here's my jsfiddle
<script>
var rowID;
function myFunction() {
rowID++;
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
rowID=1;
cell1.innerHTML = "###";
cell2.innerHTML = "###";
cell3.innerHTML = rowID;
cell4.innerHTML = "<button id=''>Remove</button>";
}
Thanks in advance

This is because you set it back here
var cell4 = row.insertCell(3);
rowID=1; //<-- NOT NEED
cell1.innerHTML = "###";
remove this row.
Here is the jsFiddle. And init it with var rowID = 0;

You need to set your variable to 0 when defining it in order to add 1 to it with the ++ operator. Also remove the rowID = 1 (it resets it to 1) in your code as following:
<script>
var rowID = 0;
function myFunction() {
rowID++;
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = "###";
cell2.innerHTML = "###";
cell3.innerHTML = rowID;
cell4.innerHTML = "<button id=''>Remove</button>";
}

I think you had a couple of typos, see in the comments:
//rowId must be initialized to a number or you'll get Nan with rowId++
var rowID = 0;
function myFunction() {
rowID++;
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
//this is the reason of your bug
//rowID=1;
cell1.innerHTML = "###";
cell2.innerHTML = "###";
cell3.innerHTML = rowID;
cell4.innerHTML = "<button id=''>Remove</button>";
}

var rowID = 0;
function myFunction() {
rowID++;
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
//rowID=1;
cell1.innerHTML = "###";
cell2.innerHTML = "###";
cell3.innerHTML = rowID;
cell4.innerHTML = "<button id=''>Remove</button>";
}
Initialize the var rowID to 0 during declaration (considered good practice)
You made a silly mistake of assigning the rowid in the function itself.
jsFiddle: https://jsfiddle.net/z51z3jj1/2/

You are setting rowID=1 so every time it will have value 1. Also you need to set rowID=0 if you want to increment it otherwise if you don'y initialize it it will result in NaN
<script>
var rowID;
function myFunction() {
rowID++;
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
rowID=1;
cell1.innerHTML = "###";
cell2.innerHTML = "###";
cell3.innerHTML = rowID;
cell4.innerHTML = "<button id="+rowID+" onclick='Remove(this)'>Remove</button>";
}
function Remove(btn){
btn.parentElement.parentElement.remove();
}
Here is jsfiddle

If you want remove elements, this is an option
row.setAttribute("onclick","remove(this)");
https://jsfiddle.net/z51z3jj1/4/

How to display dynamically added form data in a table in a different webpage when the data is saved in the local storage using purely javascript?

I'm doing a school project in which I'm creating web pages to allow users to input and then display it on another page. I am only using JavaScript, HTML and CSS for the web pages.
On the "Create An Event" page there is a form. I have saved all the input into local storage but now I am not sure how to retrieve the data to display it on the "Events Created" page (which shows the past events that the user has created).
Here is my JavaScript code:
document.addEventListener("DOMContentLoaded", docIsReady);
var eventHist;
function docIsReady() {
eventHist = localStorage.getItem("createEvent");
if (eventHist == null) {
eventHist = [];
} else {
eventHist = JSON.parse(eventHist);
}
//building of the table
for (var i = 0; i < eventHist.length; i++) {
var row = document.getElementById("list").insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.innerHTML = eventHist[i].name;
cell2.innerHTML = eventHist[i].positions;
cell3.innerHTML = eventHist[i].venue;
cell4.innerHTML = eventHist[i].date;
cell5.innerHTML = eventHist[i].timeStart;
cell6.innerHTML = eventHist[i].timeEnd;
}
}
function addHistory() {
var obj;
var name = document.getElementById("name").value;
if (!checkExisting(name)) {
var positions = document.getElementById("pos").value;
var venue = document.getElementById("venue").value;
var date = document.getElementById("date").value;
var starttime = document.getElementById("timeStart").value;
var endtime = document.getElementById("timeEnd").value;
obj = {
"name": name,
"venue": venue,
"date": date,
"timeStart": starttime,
"timeEnd": endtime
};
eventHist.push(obj)
localStorage.setItem("createEvent", JSON.stringify(obj));
}
//add to table
var row = document.getElementById("list").insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.innerHTML = obj.name;
cell2.innerHTML = obj.positions;
cell3.innerHTML = obj.venue;
cell4.innerHTML = obj.date;
cell5.innerHTML = obj.timeStart;
cell6.innerHTML = obj.timeEnd;
}
function sortTable() {
eventHist.sort(function(obj1, obj2) {
if (obj1.date > obj2.date)
return 1;
else if (obj1.date < obj2.date)
return -1;
else
return 0;
});
console.log("Sorted");
//reload table
var tableRow = document.querySelectorAll("#list tr");
console.log(tableRow);
console.log("no of rows=" + tableRow.length);
for (var i = 0; i < eventHist.length; i++) {
var row = document.getElementById("list").insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.innerHTML = eventHist[i].name;
cell2.innerHTML = eventHist[i].positions;
cell3.innerHTML = eventHist[i].venue;
cell4.innerHTML = eventHist[i].date;
cell5.innerHTML = eventHist[i].timeStart;
cell6.innerHTML = eventHist[i].timeEnd;
}
document.getElementById("list").style.display = "table";
}
Here is my HTML code:
<table border="1px" id="list" onload="addRow();">
<tr>
<th>Name of event</th>
<th>Positions</th>
<th>Venue</th>
<th>Date</th>
<th>Start Time</th>
<th>End Time</th>
<!--<th>Points Awarded</th>-->
</tr>
</table>