We Keep Coding

JavaScript clone row multi input [] request.getParameterValues() data not coming

When I clone the rows of a dynamic html table with Javascript and try to fetch the data in each row in the Java Spring MVC Controller, the data does not come.
My jsp and Javascript code :
<script type="text/javascript">
function patBasTesBosTabloSatirEkle() {
document.getElementById("trPatBasTescTablosunuOlusturmakİcinSatirEkle").value = "Tabloya Satır Ekle";
if(document.getElementById("ticarilesmeRaporuPatentBasvuruTescilleri_empty").style.display=="none"){
document.getElementById("ticarilesmeRaporuPatentBasvuruTescilleri_empty").style.display = "";
}else{
var x = document.getElementById('ticarilesmeRaporuPatentBasvuruTescilleri_empty');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
x.style.display = "";
var inp0 = new_row.cells[0].getElementsByTagName('input')[0];
inp0.value = '';
var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.value = '';
x.appendChild(new_row);
}
}
</script>
<div class="set-form">
<table id="ticarilesmeRaporuPatentBasvuruTescilleri_empty" class="veriListeTablo table table-bordered" style="display:none">
<thead>
<tr>
<td align="center" style="display:none;">Id</td>
<td align="center">Buluş Başlığı</td>
</tr>
</thead>
<tr>
<td style="display:none;"><input type="text" class="textbox" name="patBasTesId[]" id="patBasTesId[]" value=""/></td>
<td><input type="text" class="textbox" name="basvuruBasligi[]" id="basvuruBasligi[]" value=""/></td>
</tr>
</table>
<br>
<input type="button" value="Tablo Oluştur" id="trPatBasTescTablosunuOlusturmakİcinSatirEkle" onclick="patBasTesBosTabloSatirEkle()" />
</div>
My Controller Codes:
String [] basvuruBasliklari = (String[])request.getParameterValues("basvuruBasligi[]");
Finally I want to get data for input called "basvuruBasliklari" but I can't.
Only the data in the row with display="none" property is coming. The data in the second clone row is not coming.
Please help me. Thank you.

Set input value for post from results of javascript function

I have an HTML page with a search function that returns a table of search results. For each row of the table, there is a drop-down for the amount to donate and a Donate button. I would like to post the value from the row upon clicking Donate, but am unable to figure it out.
I have the confirm alert working with all the correct row information on click, but I am unable to set the hidden input value from within that function. So I made a second function results() and tried to set the value from that, but it's not working. If I just set it with some text (document.getElementById('donation').value = "some_text"), that works fine. But I would like to set the data from the row in which the button was clicked and set it as a value for POST.
This is my code:
{% extends "layout.html" %}
{% block title %}
Donate
{% endblock %}
{% block main %}
<form action="/donate" method="post">
<div class="form-group">
<input autocomplete="off" autofocus class="form-control" name="name"
placeholder="What animal would you like to support?" type="text" size="40">
</div>
<button id="search" class="btn btn-primary" type="submit" name="search">Search</button>
</form>
<br>
<table class="table" id="sponsor_table">
<thead class="thead-light">
<tr>
<th scope="col">Scientific Name</th>
<th scope="col">English Name</th>
<th scope="col">Red List Category</th>
<th scope="col">Donation</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
{% for animal in animals %}
<tr>
<th scope="row">{{ animal.canonicalName }}</th>
<td>{{ animal.vernacularName }}</td>
<td>{{ animal.redlistCategory }}</td>
<td> <select id="price" name="price" onChange="calc();">
<option value="">Amount</option>
<option value="25">$25.00</option>
<option value="50">$50.00</option>
<option value="100">$100.00</option>
<option value="200">$200.00</option>
<option value="500">$500.00</option>
<option value="1000">$1000.00</option>
</select>
</td>
<form action="/donate" method="post">
<td><input name="donation" type="hidden" value="">
<button id="donation" class="btn btn-primary" name="donation" value="Donate" >Donate</button></td>
</form>
</tr>
{% endfor %}
</table>
<script type="text/javascript">
$(document).ready(function () {
// code to read selected table row cell data (values).
$("#donation").on('click',function(){
// get the current row
var currentRow=$(this).closest("tr");
var col1=currentRow.find("td:eq(0)").text(); // get current row 1st TD value
var col2=currentRow.find("td:eq(1)").text(); // get current row 2nd TD
var col3=currentRow.find("td:eq(2) option:selected").text(); // get current row 3rd TD
var col4=currentRow.find("td:eq(3)").text(); // get current row 3rd TD
confirm("Would you like to support the " + col2 + " " + col1 + " population with a donation of " + col3 + "?");
});
});
function results()
{
var rowId = event.target.parentNode.parentNode.id;
var data = document.getElementById(rowId).querySelectorAll(".row-data");
var species = data[0].innerHTML;
var name = data[1].innerHTML;
var category = data[2].innerHTML;
var amount = data[3].innerHTML;
return species;
} ;
document.getElementById('donation').value = results();
</script>
{% endblock %}
SOLVED:
<form action="/donate" method="post">
<td><input name="donation" type="hidden" id="test" value="">
<button id="donation" class="btn btn-primary" name="donation" value="Donate" >Donate</button></td>
</form>
</tr>
{% endfor %}
</table>
<script type="text/javascript">
$(document).ready(function () {
// code to read selected table row cell data (values).
$("#donation").on('click',function(){
// get the current row
var currentRow=$(this).closest("tr");
var col1=currentRow.find("td:eq(0)").text(); // get current row 1st TD value
var col2=currentRow.find("td:eq(1)").text(); // get current row 2nd TD
var col3=currentRow.find("td:eq(2) option:selected").text(); // get current row 3rd TD
var col4=currentRow.find("td:eq(3)").text(); // get current row 3rd TD
confirm("Would you like to support the " + col2 + " " + col1 + " population with a donation of " + col3 + "?");
document.getElementById('test').value = [col1, col2, col3];
});
});

How to save HTML dynamic table into database

My problem is I am creating dynamic HTML table by using javascript.
How do I save this dynamic HTML table into a DataBase using CodeIginter?
This my input text code:
<table id="tb3" name="tb3">
<tr>
<td>Product Code</td>
<td>Product Name</td>
<td>Qty</td>
<td>Rate</td>
<td>Amount</td>
</tr>
<tr>
<td>
<input type="text" onkeyup="autofill()" id="Product_Code" name="Prdtcode" class="form-control input-xs Product_Code " required>
</td>
<td ><input type="text" id="Product_Name" name="Prdtname" class="form-control input-xs"></td>
<td><input type="text"
onkeypress="javascript:doit_onkeypress(event)" id="Qty" onkeyup="movetoNext(this, 'addMore3')" name="Qty"class="form-control input-xs" required>
</td>
<td><input type="text" id="Rate" class="form-control input-xs"name="Rate" value="" ></td>
<td><input type="text" id="Value" name="Value" class="form-control input-xs" ></td>
</tr>
</table>
This code gets data from a TextBox and displays in table format using javascript:
<table class="table table-bordered table-striped table-xxs" id="tb2" name="tb2">
<tr>
<th>Product Code</th>
<th>Product Name</th>
<th>Qty</th>
<th>Rate</th>
<th>Amount</th>
</tr>
This is the javascript code to create table
function doit_onkeypress(event)
{
if (event.keyCode == 13 || event.which == 13){
if(!checkEmptyInput()){
var newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3),
cell5 = newRow.insertCell(4),
code = document.getElementById("Product_Code").value,
name = document.getElementById("Product_Name").value,
qty = document.getElementById("Qty").value,
rate = document.getElementById("Rate").value,
amt = document.getElementById("Value").value;
cell1.innerHTML = code;
cell2.innerHTML = name;
cell3.innerHTML = qty;
cell4.innerHTML = rate;
cell5.innerHTML = amt;
var prdtcode = $("#Product_Code").val("");
var Prdtname = $("#Product_Name").val("");
var qty = $("#Qty").val("");
var Rate = $("#Rate").val("");
var amt = $("#Value").val("");
}
}
}
My problem is I am creating a dynamic HTML table by using javascript,how I save this dynamic html table into database using codeiginter.

Store whole table html data into one variable
var table_data = $("#table_id").html();
$.trim(table_data. replace(/>[\n\t ]+</g, "><"));
Now Send this table_data variable to controller function to add data
Make sure the datatype of your field should be text or longtext then normally do the insertdata query in controller's function.
The ajax code is as below:
$.ajax({
url:"path to your controller function",
type: 'POST',
data:{
table_data:table_data,
},
success:function(result){
console.log(result);
},
});
The controller's function code is as below:
function insert_table_data(){
$data = array('table_data' => $this->input->post('table_data'));
$this->db->insert('table_name', $data);
}

Creating 2 html tables using javascript

I'm trying to create 2 dynamic html tables using Javascript with data from html inputs. I was able to create the first table I wanted but I've been unable to create 2 different tables using different inputs on the same page.
I tried changing the addRow() functions in the html and JS to have different names but this caused both tables to fail.
Any help would be appreciated. Here's the test code I've been using.
<!DOCTYPE html>
<body onload="load()">
<div id="myform">
<table>
<tr>
<td>Name:</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="number" id="age">
<input type="button" id="add" value="Add" onclick="addRow()"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<table>
<tr>
<td>Height:</td>
<td><input type="text" id="height"></td>
</tr>
<tr>
<td>Width:</td>
<td><input type="text" id="width">
<input type="button" id="addDim" value="Add" onclick="addRow()"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="mydata">
<table id="myTableData" border="1" cellpadding="2">
<tr>
<td> </td>
<td><b>Name</b></td>
<td><b>Age</b></td>
</tr>
</table>
<table id="myTableData2" border="1" cellpadding="2">
<tr>
<td> </td>
<td><b>Height</b></td>
<td><b>Width</b></td>
</tr>
</table>
</body>
</html>
function addRow() {
var myName = document.getElementById("name");
var age = document.getElementById("age");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="deleteRow(this)">';
row.insertCell(1).innerHTML= myName.value;
row.insertCell(2).innerHTML= age.value;
var width = document.getElementById("width");
var height = document.getElementById("height");
var table2 = document.getElementById("myTableData2");
var rowCount2 = table2.rows.length;
var row2 = table2.insertRow(rowCount2);
row.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick="deleteRow(this)">';
row.insertCell(1).innerHTML = width.value;
row.insertCell(2).innerHTML = height.value;
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
function load() {
console.log("Page load finished");
}

Looks like in the bottom section, you're not using the row2 variable you've defined.
Should be:
var rowCount2 = table2.rows.length;
var row2 = table2.insertRow(rowCount2);
row2.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick="deleteRow(this)">';
row2.insertCell(1).innerHTML = width.value;
row2.insertCell(2).innerHTML = height.value;

here how i did it. you can use the same function for any amount of table, if pass the parameter in the function.
http://jsfiddle.net/8t5aqomk/2/
function myFunction(thisTable) {
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var age = document.getElementById('age').value;
var info = [firstName,lastName,age]
var table = document.getElementById(thisTable);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cellCount = table.rows[0].cells.length;
for(var i=0; i<cellCount; i++) {
row.insertCell(i).innerHTML=info[i];
}
}

html5/javascript multiplying input types and displaying in table

How could I create a button so onclick it takes these two values that will be entered, and multiply them together and display them in a table? Even if you can't help me with the table part the multiplication would be very helpful!

Lets say your HTML is:
<form>
<label>First number</label>
<input type="text" id="number-1">
<label>Second Number</label>
<input type="text" id="number-2">
<input type="submit" value="multiply" id="multiply">
</form>
<table>
<thead>
<tr>
<th>Value 1</th>
<th>Value 2</th>
<th>result</th>
And then your javascript, having jQuery, is:
$(function(){
$('#multiply').click(function(event){
event.preventDefault();
var value1 = $("#number-1").val();
var value2 = $("#number-2").val();
var result = value1 * value2;
var newRow = $("<tr></tr>");
var firstCell = $("<td></td>");
var secondCell = $("<td></td>");
var resultCell = $("<td></td>");
var valueOne = $("#number-1").val();
var valueTwo = $("#number-2").val();
var result = valueOne * valueTwo;
firstCell.append( valueOne );
secondCell.append( valueTwo);
resultCell.append( result );
newRow.append(firstCell);
newRow.append(secondCell);
newRow.append(resultCell);
$('#table-body').append(newRow);
});
});
</script>
That should do the trick if I understood what you want :-)

<script>
$(document).ready(function(){
$('#multiply').click(function(event){
event.preventDefault();
var n1=$('#number-1').val();
var n2=$('#number-2').val();
var result=n1*n2;
$('#resultholder').fadeIn(200);
$('#number1').append(n1);
$('#number2').append(n2);
$('#result').append(result);
});
});
</script>
Now here is your NIPUT
<form>
<label>First number</label>
<input type="text" id="number-1">
<label>Second Number</label>
<input type="text" id="number-2">
<input type="submit" value="multiply" id="multiply">
</form>
here is your result
<div id="resultholder" style="display:none">
<table border="1">
<tr>
<td id="number1"></td>
<td id="number2"></td>
<td id="result"></td>
</tr>
</table>
</div>