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.

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 give multiple select options for a dropdown created in javascript function

I have a javascript function where rows are added dynamically.
<script language="javascript">
// Add row to the HTML table
function addRow() {
var table = document.getElementById('my_table'); //html table
var rowCount = table.rows.length; //no. of rows in table
var columnCount = table.rows[0].cells.length; //no. of columns in table
var row = table.insertRow(rowCount); //insert a row
var cell1 = row.insertCell(0); //create a new cell
var element1 = document.createElement("input"); //create a new element
element1.type = "checkbox"; //set the element type
element1.setAttribute('id', 'newCheckbox'); //set the id attribute
element1.setAttribute('checked',true); //set checkbox by default checked
cell1.appendChild(element1); //append element to cell
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.setAttribute('id', 'newInput'); //set the id attribute
element2.setAttribute('name', 'sl'+rowCount);
element2.setAttribute('style', 'width: 50px');
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "textarea";
element3.setAttribute('rows', '4');
element3.setAttribute('cols','40');
element3.setAttribute('id', 'newInput'); //set the id attribute
element3.setAttribute('name', 'discription'+rowCount);
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.setAttribute('id', 'newInput'); //set the id attribute
element4.setAttribute('name', 'quantity'+rowCount);
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.setAttribute('id', 'newInput'); //set the id attribute
element5.setAttribute('name', 'price'+rowCount);
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.setAttribute('id', 'newInput'); //set the id attribute
element6.setAttribute('name', 'CST'+rowCount);
element6.setAttribute('style', 'width: 50px');
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("select");
var optarr = ['vat1','vat2','vat3','vat4','vat5','vat6'];
for(var i = 0;i<optarr.length;i++)
{
var opt = document.createElement("option");
opt.text = optarr[i];
opt.value = optarr[i];
opt.className = optarr[i];
element7.appendChild(opt);
}
element7.setAttribute('id', 'vat5'); //set the id attribute
element7.setAttribute('name','tax'+rowCount);
element7.setAttribute('value','vat5');
cell7.appendChild(element7);
}
In the last "cell7" i have drop-down along with options,i am selecting only one option.But i need multiple options to be selected. For example: vat1 and vat3 once,vat3 and vat5 and vat2 once like these.I tried element7.setAttribute("multiple","").But it is turning into a list in which i dont needed it.So i tried "jquery Multiselect" but it is out of reach for me because i really dont know about jquery and ajax that much.Any help in this one will be really appreciated.
Edit:After using "setAttribute('multiple','')

I don't know what should go wrong. I copied your example and added the call to set the multiple attribute and it seems to work.
http://plnkr.co/edit/6yAVtHyVwAWBFd3TBTc7?p=preview
var element7 = document.createElement("select");
element7.setAttribute('multiple', '');
var optarr = ['vat1','vat2','vat3','vat4','vat5','vat6'];
for(var i = 0;i<optarr.length;i++)
{
var opt = document.createElement("option");
opt.text = optarr[i];
opt.value = optarr[i];
opt.className = optarr[i];
element7.appendChild(opt);
}
var container = document.getElementById('container');
container.appendChild(element7);
Perhaps check if you made a typo in your own code, that somehow didn't make it to the example posted here.
EDIT: You feel that the default HTML representation of a multiple select is ugly. I can't say i don't agree. That said, this is standart HTML and the representation do change when you see it on a PC, Mac, iPad, Android Phone, etc.
Sounds like you would get the best visual "upgrade" by using a css framework. There are many of them out there. I can name two of the most popular ones:
Bootstrap and
Foundation

How do I add text boxes and buttons into a table using Javascript?

I'm sorry, I'm new to Javascript and this is one of the first websites that I have made. I was wondering why exactly my code isn't working properly.
Instead of a text box and a button showing up, in the cells where they are supposed to show up, [object HTMLInputElement] and [object HTMLButtonElement] show up.
function frenchBread(x){
var table = document.getElementById("orderTable");
var row = table.insertRow(0);
var rem = document.createElement("button");
var name = document.createTextNode("Remove");
rem.appendChild(name);
var num = document.createElement("input");
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "French Bread";
cell2.innerHTML = document.body.appendChild(num);
cell3.innerHTML = document.body.appendChild(rem);
x.disabled = true;
}
<button type = "button" class = "itemClick" onclick = "frenchBread(this);">French Bread</button>
<table id = "orderTable">
</table>

Just append your variables, no need to call innerHTML:
cell1.innerHTML = "French Bread";
cell2.appendChild(num);
cell3.appendChild(rem);
instead of:
cell1.innerHTML = "French Bread";
cell2.innerHTML = document.body.appendChild(num);
cell3.innerHTML = document.body.appendChild(rem);
FIDDLE

I added a little more HTML before making the adjustment to your code so that it can be run.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button type = "button" class = "itemClick" onclick = "frenchBread(this);">French Bread</button>
<table id="orderTable"></table>
<script>
function frenchBread(x){
var table = document.getElementById("orderTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var rem = document.createElement("button");
var name = document.createTextNode("Remove");
rem.appendChild(name);
var num = document.createElement("input");
cell1.innerHTML = "French Bread";
cell2.appendChild(num);
cell3.appendChild(rem);
x.disabled = true;
}
</script>
</body>
</html>
The reason that your code was failing was that the text "French Bread) that you assigned to cel1's innerHTML is valid HTML. innerHTML can only accept strings that are valid HTML. While it did not work for cel2 and cel3 because rem and num were DOM elements. therefore they can be assigned as children of the cel2 and cel3 (which are also DOM elements) by using the appendChild member functions of those two cell elements. Whe you tried to do that through the innerHTML JavaScript had to convert those DOM elements into text, and so the text that you saw resulted from the JS object being converted into strings.

Add and retrieve text boxes in jsp

I want to add textbox dynamically in jsp page on "Add Row" button click. I have written java script to add it. No issues with that. But I am not able to retrieve those values in Servlet page. Any ideas?
Here is the script:
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 cell3 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell3.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
cell4.appendChild(element4);
}
And here is the jsp where script is called:
<INPUT type="button"
value="Add Row" onclick="addRow('dataTable')" />

You need to specify the name attribute. It becomes the request parameter name.
You can just give them all the same name.
element.name = "foo";
Or if you want to "respect" IE6/7 users as well
document.createElement('<input type="text" name="foo">');
(jQuery makes it all easier and better crossbrowser compatible)
Then you can access them all as follows in the servlet
String[] foos = request.getParameterValues("foo");
They will appear in the order as they appear in the HTML DOM tree.