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.

Jquery - add new rows table into wrong div

I am pretty new to jquery. I have the following code. Here I wants to get new rows in the table on clicking add button in Fill 3. I succeend to add that row, but when I get new divs then I wants to get new rows in the table on clicking add button in Fill 3. It added into wrong div.
can someone tell me what mistake I've done here?
var id = 0; //global id to create unique id
$(document).ready(function() {
//attach click event to element/button with id add and remove
$("#add,#remove").on('click', function() {
var currentElemID = $(this).attr('id'); //get the element clicked
if (currentElemID == "add") { //if it is add elem
var cloneParent = $("#dataTes").clone(); //clone the dataTes element
id=$("div[id^=dataTes]").length + 1;//get the count of dataTes element
//it will be always more than last count each time
cloneParent.find('[id]').each(function() {
//loop through each element which has id attribute in cloned set and replace them
//with incremented value
var $el = $(this); //get the element
$el.attr('id', $el.attr('id') + id);
//ids would now be add1,add2 etc.,
});
cloneParent.attr('id', cloneParent.attr('id') + id);//replace cloneParent id
cloneParent.appendTo('#result');//append the element to fieldset
$("#remove").show();//show remove button only if there is more than one dataTes element
} else {
$("div[id^=dataTes]:last").remove();
//just remove the last dataTes
//[id^=dataTes]:last annotates remove last div whose id begins with dataTes
//remember we have id like dataTes1,dataTes2 etc
if($("div[id^=dataTes]").length==1){
//check if only one element is present
$("#remove").hide();//if yes hide the remove button
}
}
});
});
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount > 1) {
table.deleteRow(rowCount - 1);
}
else {
alert("Tidak dapat menghapus semua baris!");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="result">
<legend>Test</legend>
<input type="submit" class="button" id="add" value="+" title="#">
<input type="submit" class="button" id="remove" value="-" style="display:none;" title="#">
<!--hide the remove button with display:none initially-->
<div id="dataTes">
<table align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-top:10px;" width="97%">
<tr>
<td width="100px">Test</td>
<td width="2px">:</td>
<td>
<input type="text" name="usrname">
</td>
</tr>
<table align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-top:5px;margin-left:40px;" width="97%">
<tr>
<td width="2px"></td>
<td width="100px">Fill 1</td>
<td width="2px">:</td>
<td>
<input type="text" name="usrname">
</td>
</tr>
<tr>
<td width="2px"></td>
<td width="100px">Fill 2</td>
<td width="2px">:</td>
<td>
<input type="text" name="usrname">
</td>
</tr>
<table id="dataIP" align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-left:40px;" width="97%">
<tr>
<td width="2px"></td>
<td width="100px">Fill 3</td>
<td width="2px">:</td>
<td width="2px">
<input type="text" name="usrname">
</td>
<td>
<input type="submit" class="button" value="+" onClick="addRow('dataIP')" title = "#">
<input type="submit" class="button" value="-" onClick="deleteRow('dataIP')" title = "#">
</td>
</tr>
</table>
</table>
</table>
</div>
</fieldset>
Thanks in advance!

<table id="dataIP" align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-left:40px;" width="97%">
<tr>
<td width="2px"></td>
<td width="100px">Fill 3</td>
<td width="2px">:</td>
<td width="2px">
<input type="text" name="usrname">
</td>
<td>
<input type="submit" class="button" value="+" onClick="addRow('dataIP')" title = "#">
<input type="submit" class="button" value="-" onClick="deleteRow('dataIP')" title = "#">
</td>
</tr>
</table>`
so what will we do here is that we will change addRow(this) instead of addRow('dataIp') because we know that "this" keyword has a high priority in terms of passing the ID of the element .. the "this" keyword has a general purpose vs passing of id into a function .. just try changing all parameter to the "this".

function addRow(tableID) {
var par = tableID.parentNode.parentNode.parentNode.id;
var table = document.getElementById(par);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
this is what ive done when I change the parameter of the add and delete function in your input i get the param parent node the element for the purpose of specific element inside the parent element...
}

by the way.. you must change your third index table to tbody. the result of getting the parentnode will be a tbody. because putting table inside a table is redundant window read it as tbody
we must follow the rule
<table>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>

pass values of textboxes of the same name to jquery and then to php page for storing the values to database

I have a list of textboxes as follows :
` <table id="div1" style="width:100%;">
<tr>
<td>
<label>Question Text</label>
</td>
<td colspan="5">
<textarea rows="4" cols="500" name="questiontext" id="questiontext" > <?php print $view->questions->getQuestion_Text() ?></textarea>
</td>
</tr>
<tr>
<td> <label>Option a) </label></td>
<td colspan="5"> <textarea rows="1" cols="200" name="Optiontext[]" id="text1"> </textarea> </td>
</tr>
<tr>
<td> <label> Option b) </label></td>
<td colspan="5"> <textarea rows="1" cols="200" name="Optiontext[]" id="text2"> </textarea> </td>
</tr>
<tr>
<td>
</td>
</tr>
</table>`
I need to pass the values to a jquery function as follows :
$(document).ready(function(){
$('#question').live('submit',function(){
var params={};
params.action='saveQuestion';
params.questionid=$('#questionid').val();
params.questiontext=$('#questiontext').val();
return false;
})
});
My question is how do i pass the values of the textarea to the jquery function as textarea can be dynamically created.
I tried to access the values of textarea directly in php as follows but the values are not passed:
$option_key = 1;
for($i = 0;$i<= count($_POST['Optiontext']);$i++){
$option = $_POST['Optiontext'][$i];
if(isset($option))
{
$query_options="INSERT INTO `XXX`(`Question_ID`, `Option_Key`, `Option_Value`) VALUES ($max_id,'$option_key','$option')";
$sql = mysql_query($query_options)or die($query_options."<br/><br/>".mysql_error());
$option_key = $option_key + 1;
}
}// for loop ends

The contents of each textarea are posted to the form as a comma-delimited variable called 'Optiontext[]'.
Since commas can be added in the textareas, it could get interesting trying to split the data back into the correct fields! Possibly a better solution would be a finite number of textarea fields with unique names, or dynamically create them as needed using javascript/jQuery.

I was able to pass the value of textboxes by map function as follows
$(document).ready(function(){
$('#question').live('submit',function(){
var params={};
params.action='saveQuestion';
params.questionid=$('#questionid').val();
params.questiontext=$('#questiontext').val();
var Optiontext = [];
Optiontext = $('textarea[name^="Optiontext\\["]').map(function() {
var value_textarea = $(this).val();
if(value_textarea && value_textarea != ' ')
{
return $(this).val();
}
}).get();
params.Optiontext=Optiontext;
return false;
}) });

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];
}
}

Using Javascript How to loop through a div containing checkboxes and get the value checked from each check box

I have a table with each row containing a cell that has 8 check boxes(Column4)
Here is an example
<table id="enc-assets" class="table">
<thead>
<tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4(CONTAINS OPTIONS)</th>
</thead>
<tbody>
<tr>
<td id="sc-isrc"></td>
<td id="sc-filename"></td>
<td id="sc-path" hidden></td>
<td id="sc-platforms">
<div id="sc-inline" style="display: inline-block;">
<div >
<div ng-repeat="p in products ">
<label id="enc"><input id="Platform" ng-checked="prod[p.name]" ng-model="prod[p.name]" ng-init="prod[p.name] = true" type="checkbox"/></label>
</div>
</div>
</div>
</td>
<td>
</td>
<td><br/><br/><button id="enqueuebtn" type="button" ng-click="Show(test)" class="btn-primary"></button></td>
</tr>
</tbody>
</table>
I am trying to loop through each row and assign values from each cell into an object .
I am having problems getting the value checked from the cell that contains the 8 check boxes. I can get values from the other cells just fine.
I have tried the following:
$("#enc-assets tbody tr").each(function() {
var message;
message = new Object();
message.isrc = $(this).find('#sc-isrc').text();
message.path = $(this).find('#sc-path').text();
$("#sc-platforms div div").each(function() {
var platform, selected;
selected = $(this).find('#Platform div label input').checked;
if (selected === true) {
platform = $(this).find('#enc').text();
This is the part that I am not sure if works:
selected = $(this).find('#Platform div label input').checked;
Do I have the correct nesting here to get the values from the check boxes?

Try this:
jsFiddle here
$("#enc-assets tbody tr").each(function() {
var message;
message = new Object();
message.isrc = $(this).find('#sc-isrc').text();
message.path = $(this).find('#sc-path').text();
$("#sc-platforms>div>div").each(function() {
alert( $(this).attr('id') );
var platform, selected;
selected = $(this).find('#Platform');
if(selected.is(':checked')) {
alert('Checked');
}
platform = $(this).find('#enc').text();
alert(platform);
}); //END each #sc-platforms>div>div
}); //END each #enc-assets tbody tr