We Keep Coding

How to correctly send data to the server from the table?

I apologize for possible grammatical errors, this text was translated through Google translate.
I'm not very good at programming yet, I'm learning right away in practice. Now I'm making a Django web application for warehouse management.
I have a select with a list of products that is loaded via api, and when the select is selected, a row with the product is added to the table
success: function (res) {
let invoiceRow = document.querySelector(".invoice-add-table table tbody tr.add-elements").insertAdjacentHTML('beforebegin', '<tr class="invoice-row">' +
'<td align="right" class="fixed">'+ res.articul +'</td>' +
'<td class="name" align="left"><span title="'+ res.name +'" style="text-decoration: underline; cursor: pointer;">'+ res.name +'</span></td>' +
'<td align="right" class="fixed"><input name="quantity" value="1" class="ta-right fixed" type="text"></td>' +
'<td align="right" class="fixed"><input name="last_buy_price" value="'+ res.last_buy_price +'" class="ta-right fixed" type="text"></td>' +
'<td align="right" class="fixed"><input name="summ" value="" class="ta-right fixed" type="text"></td>' +
'<td align="right" class="fixed"><input name="sell_price" value="'+ res.sell_price +'" class="ta-right fixed" type="text"></td>' +
'<td align="right"><div style="display: flex;" class="edit-tool-table"><span class="iconify" data-icon="bx:trash" style="color: white;" data-width="20"></span></div></td>'+
'</tr>');
$(".add-items-select")[0].selectize.clear()
Question:
How do I identify each row to send it to the server, as well as the data in the inputs that are responsible for the quantity and price? There can be as many lines as you want, I don't understand how to get them on the server
Thanks

How to add dynamic change input value

I have problem. I use jquery to make dynamic input in php like this:
$(document).ready(function() {
var count = 0;
$("#add_btn").click(function(){
count += 1;
$('#container').append(
'<tr class="records">'
+ '<td ><div id="'+count+'">' + count + '</div></td>'
+ '<td><select class="form-control form-control-sm" name="site' + count + '" required><option value="">Input Item</option><option value="canon">canon</option><option value="nikon">nikon</option><option value="fuji">fuji</option></select></td>'
+ '<td><input name="codeitem' + count + '" type="text"></td>'
+ '<td><a class="remove_item" href="#" >Delete</a>'
+ '<input id="rows_' + count + '" name="rows[]" value="'+ count +'" type="hidden"></td>'
+ '</tr>'
);
});
$(".remove_item").live('click', function (ev) {
if (ev.type == 'click') {
$(this).parents(".records").fadeOut();
$(this).parents(".records").remove();
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="id_form" action="save.php" method="post">
<table>
<tr>
<td>
<input type="button" name="add_btn" value="Add" id="add_btn">
</td>
</tr>
<tr>
<td>No</td>
<td>Item</td>
<td>Code Item</td>
<td> </td>
</tr>
<tbody id="container">
<!-- nanti rows nya muncul di sini -->
</tbody>
<tr>
<td>
<input type="submit" name=submit value="Save">
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
Condition: If I chose canon in combo select menu, then at input codeitem show code of the item (in another case, I use PHP to get codeitem from SQL table.
At first row input field, that was success.. but, if I want add more input field with click 'add button' to entry another item (at second row input field), why first input codeitem change code item, not input codeitem at second row?
How can I input dynamic item with that condition?

If you are not working on a legacy code base then it is batter to use latest version of Jquery.
'<td ><div id="'+count+'">' + count + '</div></td>' , you can't use same id in multiple time, so change it to class.
'<td><input name="codeitem' + count + '" type="text"></td>' ,input field name should be fixed in order to process it in your php script after form submit but as you need to get multiple value make it an array codeitem[]
what is the use of rows[] input field?
To input codeitem dynamically on change combo select menu, you have to use "Ajax" to get the 'codeitem' value of the selected combo menu from your database.
Check this jsfiddle .
$(document).ready(function() {
$("#add_btn").click(function(){
let count = $('tr.records').length+1;
$('#container').append(
'<tr class="records">'
+ '<td ><div class="count">' + count + '</div></td>'
+ '<td><select class="site form-control form-control-sm" name="site[]" required><option value="">Input Item</option><option value="canon">canon</option><option value="nikon">nikon</option><option value="fuji">fuji</option></select></td>'
+ '<td><input class="codeitem" name="codeitem[]" type="text"></td>'
+ '<td><a class="remove_item" href="#" >Delete</a>'
+ '<input class="rows" name="rows[]" value="'+ count +'" type="hidden"></td>'
+ '</tr>'
);
});
$(document).on('click',".remove_item", function (ev) {
$(this).parents(".records").fadeOut();
$(this).parents(".records").remove();
//Re-arrange the Row Serial No
$('tr.records div.count').each(function(index) {
$(this).text(index+1)
});
});
$(document).on('change',".site", function (ev) {
let site = $(this).val();
let current = $(this).parents(".records");
if(site!=''){
//make an ajax call to get the corresponding CodeItem of the selected site
/* $.ajax({
url: "/yoururl",
data:{"id":site},
success: function(result){
$(current).find('.codeitem').val(result);
}
}); */
}else{
$(current).find('.codeitem').val('');
}
});
})

append table to another div | JS jQuery

JSFiddle Here
I have 2 div in HTML
The first div for the folder column.
<div class="columnFolder-container"></div>
The second div for the column table. with class ._zTable
<div class = "_zTable"> </ div>
Then in javascript, I have 1 variable (var div =)
which includes 1 div (class="folder") inside the div contains the table with id="exTable".
I want the table to be moved into ._zTable and not in the div class .folder.
Because I want the div .folder in the column folder.
var div = '<div class="folder"><span class="fname">Folder : '+name+'</span' +
'<table id="exTable' + currentFolderIndex + '" class="table table-bordered" cellspacing="0">' +
'<thead>' +
'<tr>' +
'<th style="border-color:rgb(221, 221, 221);"><input name="select_all" value="1" id="selectAll" type="checkbox" /></th>' +
'<th>Name</th>' +
'<th>Type</th>' +
'<th>Size</th>' +
'<th>Date Created</th>' +
'</tr>' +
'</thead>' +
'</table>' +
'</div>';

You will need to split your variable into two.
I notice your table is inside your .folder div. I presume that shouldn't be the case.
The variables are then:
var div = '<div class="folder"><span class="fname">Folder : '+name+'</span></div>'
var table = '<table id="exTable' + currentFolderIndex + '" class="table table-bordered" cellspacing="0">' +
'<thead>' +
'<tr>' +
'<th style="border-color:rgb(221, 221, 221);"><input name="select_all" value="1" id="selectAll" type="checkbox" /></th>' +
'<th>Name</th>' +
'<th>Type</th>' +
'<th>Size</th>' +
'<th>Date Created</th>' +
'</tr>' +
'</thead>' +
'</table>';
Then the code to put these in the right divs is:
document.getElementsByClassName("columnFolder-container")[0].innerHTML=div;
document.getElementsByClassName("_zTable")[0].innerHTML=table;
or with jquery:
$('.columnFolder-container').first().html(div);
$('._zTable').first().html(table);

Using Jquery :
`$(document).ready(function() {
$('#exTable').appendTo('.columnFolder-container');
});`

Open bootstrap table row in new table with possible field editor

I'm using bootstrap table library in my app that to render table with massive data and I need to open row in additional editable table. I found a lot of info in internet how to open row in model and put edited code to my app that to display row info inside div but cannot set it that to open it in editable table. I provide the plunker example.
Updated Cause I didn't get any work solution, I've tried to fix it by myself, so I know the solution isn't so good but for now it works for me. The question is still asking, how to edit field of new rendered table?
This is function of my solution:
$(function () {
var $result = $('#form');
$('#table').on('click-row.bs.table', function (e, row, $element) {
$('.success').removeClass('success');
$($element).addClass('success');
//alert('Selected name: ' + getSelectedRow().text);
function getSelectedRow() {
var index = $('#table').find('tr.success').data('index');
return $('#table').bootstrapTable('getData')[index];
}
$result.html(
'<table border="0" align="left" style="padding: 10px; margin: 10px; font-size: 14px; color: #0f0f0f">' + '<h3>'+
'<tr align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Name</td>' + '<td> </td>' + '<td>' + getSelectedRow().name + '</td>' + '</tr>' +
'<tr align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Structure</td>' + '<td> </td>' + '<td>' + getSelectedRow().stargazers_count + '</td>'+ '</tr>'+
'<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Class</td>' + '<td> </td>' + '<td>' + getSelectedRow().forks_count + '</td>'+ '</tr>'+
'<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Description</td>' + '<td> </td>' + '<td>' + getSelectedRow().description + '</td>'+ '</tr>'+
'</h3>' + '</table>'
);
})
});

You can use modals of boostrap, will open a modal. Check the documentation on http://getbootstrap.com/javascript/#via-javascript, just add the html, css and js references and call this code:
$('#table').on('click-row.bs.table', function (e, row, $element){ $('#myModal').modal('show') //Will be call the modal when you click a row
})
And you can pass all the information to the modal via javascript. Hope you understand me. :)

Not sure if I get what you need but i add this code on the
html:
<div id="form">
<input type="text" placeholder="Title1" id="titleForm1"></input>
<input type="text" placeholder="Title2" id="titleForm2"></input>
<input type="text" placeholder="Title3" id="titleForm3"></input>
<input type="text" placeholder="Title4" id="titleForm4"></input>
</div>
js:
$('#table').on('click-row.bs.table', function (e, row, $element) {
/*$result.html(
'<pre>' +
JSON.stringify(row, null, 1).replace(/,|}|{/g, " ")
//JSON.stringify(row).replace(/,/g, "<br/>")
+ '</pre>'
);*/
$('#titleForm1').val(row.name);
$('#titleForm2').val(row.stargazers_count);
$('#titleForm3').val(row.forks_count);
$('#titleForm4').val(row.description);
console.log(row);
})
Hope it helps you.

Find input field using jQuery

I've been trying to find three inputs (type=text) which were added dynamically using jQuery. I've tried to use .closest(), .parents(), .find(), and .children(), but I failed.
I also tried with document.getElementsByName, but it does not return the correct value if I create more than one group of inputs (which can be added dynamically, as I said before).
My code is the following:
function update(username, row) {
affiliation_val = $(document.getElementsByName('affiliation')).val(),
comments_val = $(document.getElementsByName('comments')).val(),
role_val = $(document.getElementsByName('role')).val();
//the search above does not work when I add multiple inputs… it returns only the first three inputs
console.log( $(row).closest(“input”) ); //one of my attempts... I also did using a combination of parents("tbody") and children("input"), for example... and many others
}
function format(d) {
var message1 = '<table cellpadding="8" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td class="text-right"><b>User ID:</b></td>'+
'<td class="text-left"> '+username+'</td>'+
'</tr>'+
'<tr>'+
'<td class="text-right"><b>Password last set:</b></td>'+
'<td class="text-left"> '+d.pwd_last_set+'</td>'+
'</tr>'+
'<tr>'+
'<td class="text-right"><b>Uid number:</b></td>'+
'<td class="text-left"> '+d.uid+'</td>'+
'</tr>'+
'<tr>'+
'<td class="text-right"><b>Email:</b></td>'+
'<td class="text-left"> '+d.email+'</td>'+
'</tr>'+
split_projects(d.projects_name, d.projects_role),
message2 = '<tr>'+
'<td class="text-right"><b>Affiliation:</b></td>'+
'<td class="text-left"><input type="text" name="affiliation" value="'+d.affiliation+'" '+readonly+' /></td>'+
'</tr>'+
'<tr>'+
'<td class="text-right"><b>Comments:</b></td>'+
'<td class="text-left"> <input type="text" name="comments" value="'+d.comment+'" '+readonly+' /></td>'+
'</tr>'+
'<tr>'+
'<td class="text-right"><b>Role:</b></td>'+
'<td class="text-left"><input type="text" name="role" value="'+d.role+'" '+readonly+' /></td>'+
'</tr>',
message3 = show_inconsistency(inconsistent)+
show_miss_uid(miss_uid)+
'<tr>'+
'<td> </td>' +
'<td>'+
'<button type="button" class="btn btn-default" onclick="sendMail(\'' +username+ '\'); return false">' +
'<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Request change of permission' +
'</button> <br/><br/> ' +
'</td>' +
'</tr>' +
'</table>',
button = '<tr><td> </td><td><button class="btn btn-default" onclick="update(\''+username+'\', this)">Update</button</td></tr>';
return message1+message2+button+message3;
}
Any help would be highly appreciate...

Use the jQuery( "[attribute='value']" ) selector
affiliation_val = $( "input[name='affiliation']" ).val();
comments_val = $( "input[name='comments']" ).val();
role_val = $( "input[name='role']" ).val();

As also suggested by #DBS, use .each().
$('[name="role"]').each(function(index, element){
console.log( $(element).val() );
});
This will loop through every element currently on the page with the name "role" and print their value to the console.
If you only needed to find the elements (to do something else with them, as you suggest in your question), then you can use element inside the .each() loop to do stuff with each element.
Here's another idea. If you know the parent of the elements (since it sounds like you have more than one of each of these elements on the page), and are interested in a particulare one, try this:
$('#myParentID [name="role"]');
This will select only the role input inside #myParentID.

The following should work as your selector, change "role" accordiingly:
$( '#tableId input[name="role"]' ).val();
Edited after more detail (see comments below)