We Keep Coding

How to make CRUD (Especially Edit View) of Forms That Generated using Append Row?

I have an add form like this :
It's a master detail form, which the row is appended using jQuery, it's not a problem until I make an edit form using the same PHP file the result are like this : (It's a bit messy I still don't know how to choose the select option value), but the point is, I know it's not a right way to do and edit form like this, can you suggest me how to make an edit form using 1 PHP file and using jQuery ?
Here's the code that I use to show the data, I'm using append row to generate the data stored in my database, I know it's not the right way to do this.
$.get(url)
.done((response) => {
$('#modal-form [name=nomor]').val(response.produksi.nomor_laporan);
$('#modal-form [name=tanggal]').val(response.produksi.tanggal);
$('#modal-form [name=jumlah_billet]').val(response.produksi.jumlah_billet);
$('#modal-form [name=jumlah_avalan]').val(response.produksi.jumlah_avalan);
$('#modal-form [name=mesin]').val(response.produksi.mesin);
$('#modal-form [name=shift]').val(response.produksi.shift);
// $('#modal-form [name=foto]').val(response.produksi.foto);
$('#modal-form [name=anggota]').val(response.produksi.anggota);
$('#modal-form [name=total_produksi]').val(response.produksi.total_produksi);
$('#modal-form [id=nama0]').val(response.produksidetail[0].id_aluminium_base).change();
$('#modal-form [id=berat0]').val(response.produksidetail[0].berat);
$('#modal-form [id=qty0]').val(response.produksidetail[0].qty);
var data = '';
if(response.produksidetail.length>0){
for(i=1; i<response.produksidetail.length; i++){
data += '<tr>';
data += '<td>' + '<input type="text" class="form-control matras" name="addmore[' +i+ '][matras]" id="matras' +i+ '" value="' + response.produksidetail[i].no_matras + '">' + '</td>'
// data += '<td><select class="form-control nama" name="addmore['+i+'][nama]" id="nama'+i+'" required >' +
// '<option disabled="disabled" selected="selected" value="" >Select Produk</option>' +
// '#foreach($produk as $pro)' +
// '<option value="{{$pro->id}}" data-berat="{{ $pro->berat_maksimal }}">{{$pro->nama}}</option>' +
// '#endforeach' +
// '</select></td>';
// data += '<td>' + response.produksidetail[i].id_aluminium_base + '</td>';
data += '<td>' + '<input type="text" class="form-control nama" name="addmore[' +i+ '][nama]" id="nama' +i+ '" value="' + response.produksidetail[i].id_aluminium_base + '">' + '</td>'
data += '<td>' + '<input type="text" class="form-control berat" name="addmore[' +i+ '][berat]" id="berat' +i+ '" value="' + response.produksidetail[i].berat + '">' + '</td>'
data += '<td>' + '<input type="text" class="form-control qty" name="addmore[' +i+ '][qty]" id="qty' +i+ '" value="' + response.produksidetail[i].qty + '">' + '</td>'
data += '<td>' + '<input type="text" class="form-control subtotal" name="addmore[' +i+ '][subtotal]" id="subtotal' +i+ '"readonly>' + '</td>'
data += '<td><button id="remove_row" type="button" name="remove_row" class="btn btn-sm btn-danger remove"> -</button></td></tr>'
data += '</tr>';
}
$('#kas_table').append(data);
console.log(data);
}
})
other problem is, when I close the modal, and I click the edit button again, the row won't reset, it make a new row again below, so in order to reset the form, I use this code, but really it's doesn't work well too.
$("#modal-form").on("hidden.bs.modal", function(){
$(".modal-body").html("");
});
Edit: I've solved this by adding this code before the loop
$('#kas_table').empty();
This is my controller that passing the data :
public function show($id)
{
$data = array();
$data['produksi'] = Produksi::find($id);
$data['produksidetail'] = ProduksiDetail::where('id_laporan_produksi', $id)->get();
return response()->json($data);
}

PHP to AJAX, only one checkbox appears

I have this error when selecting more than one values like this:
https://lh3.googleusercontent.com/-D1oucKVR7rA/W0_PM1Po-9I/AAAAAAAAAjU/pWAGZCFY8cg6nHK6ALTWwSvZ38QdmsiqQCL0BGAYYCw/h544/2018-07-18.png
https://lh3.googleusercontent.com/-jC8w5UQTKvg/W0_PNj03yJI/AAAAAAAAAjU/JBTRKBdb0_Eha5-yhVJa5F9F8B1PfY6lACL0BGAYYCw/h314/2018-07-18.png
It shows only the first one checkbox.
A piece of code:
for (i in json['shipping_method']) {
html += '<p><strong>' + json['shipping_method'][i]['title'] + '</strong></p>';
if (!json['shipping_method'][i]['error']) {
for (j in json['shipping_method'][i]['quote']) {
html += '<div class="radio">';
html += ' <label>';
if (json['shipping_method'][i]['quote'][j]['code'] == '<?php echo $shipping_method; ?>') {
html += '<input type="radio" name="shipping_method[]" value="' + json['shipping_method'][i]['quote'][j]['code'] + '" checked="checked" />';
} else {
html += '<input type="radio" name="shipping_method[]" value="' + json['shipping_method'][i]['quote'][j]['code'] + '" />';
}
html += json['shipping_method'][i]['quote'][j]['title'] + ' - ' + json['shipping_method'][i]['quote'][j]['text'] + '</label></div>';
}
} else {
html += '<div class="alert alert-danger">' + json['shipping_method'][i]['error'] + '</div>';
}
}

Binding Dropdown in ASP.NET

I have problem binding data in dropdown for adding data in grid. I want to pass airline name in the agent column. The dropdown value can't be changed How do I change the value of dropdown. Only the first index airline is shown in the dropdown.
Controller:
public ActionResult Create()
{
ViewBag.AID = db.Airlines.ToList();
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(FormCollection frmcoll, ICollection<string> hddrowpindex)
{
foreach (var row in hddrowpindex)
{
InternationalArrival stock = new InternationalArrival();
stock.AgentName = How to take selected textvalue Name from dropdown???;
stock.AgentCode = (frmcoll["AgentCode-" + row]).ToString();
stock.ArrivalDate = DateTime.ParseExact(frmcoll["ArrivalDate-" + row], "yyyy-MM-dd", null);
stock.ForPAX = Convert.ToInt32(frmcoll["ForPAX-" + row]);
stock.IndPAX = Convert.ToInt32(frmcoll["IndPAX-" + row]);
db.InternationalArrivals.Add(stock);
db.SaveChanges();
}
return RedirectToAction("Index");
}
View:
var sectorlist=(List<CompetitorAnalysis.Models.Airline>) ViewBag.AID;
string sectorddl= "";
foreach(var sector in sectorlist)
{
sectorddl = "<option value='"+sector.Name+"'>"+sector.Name+"</option>";
<input type="hidden" id="hddsector" value="#sectorddl" />
}
<script>
var d = new Date();
var rowindex = 1;
function addItem() {
msg = '<tr><input type="hidden" name="hddrowpindex" value="' + rowindex + '" class="rowcount"/>';
//added for bringing dropdown
msg += '<td class="center-fix" >';
msg += '<select>';
msg += document.getElementById("hddsector").value;
msg += '</select>'
msg += '</td>';
msg += '<td class="nocap-col-sm-2">';
msg += '<input type="text" class="form-control" style="text-transform:uppercase" name="AgentCode-' + rowindex + '" id="AgentCode-' + rowindex + '" placeholder="Code"/>';
msg += '</td>';
msg += '<td class="nocap-col-sm-2">';
msg += '<input type="text" class="form-control datepicker" name="ArrivalDate-' + rowindex + '" id="ArrivalDate-' + rowindex + '" placeholder="YYYY/MM/DD"/>';
msg += '</td>';
msg += '<td class="nocap-col-sm-2">';
msg += '<input type="text" class="form-control" name="ForPAX-' + rowindex + '" id="ForPAX-' + rowindex + '" placeholder="ForPAX" value="0" />';
msg += '</td>';
msg += '<td class="nocap-col-sm-2 center-fix">';
msg += '<input type="text" class="form-control" name="IndPAX-' + rowindex + '" id="IndPAX-' + rowindex + '" placeholder="IndPAX" value="0" />';
msg += '</td>';
msg += '<td class="nocap-col-sm-2 center-fix" style="text-align:center;"><i class="fa fa-trash"></i>Remove</span>';
msg += ' <span id="perror-' + rowindex + '" style="display:none"><i class="fa fa-exclamation-triangle faa-exclamation-triangle animated"></i></span></td>';
msg += '</tr>';
$('table#portfolio tbody').append(msg);
rowindex++;
}
</script>
How do I make the dropdown populated. In this case the first data of Airline table is shown in the dropdown. And how do i get the selected value in the Post method of controller.

Your immediate problem is inside of your loop:
var sectorlist=(List<CompetitorAnalysis.Models.Airline>) ViewBag.AID;
string sectorddl= "";
foreach(var sector in sectorlist)
{
sectorddl = "<option value='"+sector.Name+"'>"+sector.Name+"</option>";
<input type="hidden" id="hddsector" value="#sectorddl" />
}
It appears to me that you are attempting to build an html string for a select list dropdown. However, on each pass of the loop, you are overwriting the value in sectorddl by using sectorddl = "some value" Perhaps you mean sectorddl += "some value"?
As an aside, this really isn't a good way to build a dropdown in ASP.NET MVC.
You can simplify your code by doing something like this:
Controller
var items = from aid in db.Airlines
select new SelectListItem
{
Text = aid.Name, //or whatever the field names are
Value = aid.Id
};
ViewBag.AID = items.ToList();
View
#Html.DropDownList(model => model.SelectedAirlineId,
new SelectList(ViewBag.AID, "Value", "Text"))

How to delete a row in html table and reset key every row to default [0,1,2 ...]

I have a table with every row is a multidimensional array, with row name like name="product[key][order]"
The key have default value is in ascending order (0,1,2,3...)
Whenever I click delete button each a row, I want to all key values in table are reset to default value but I dont know how to do?
It like table have rows got name like: name="product[1][name]", name="product[2][name]", name="product[3][name]".
If I delete row get name="product[2][name]", I want the third row change the key from 3 to 2, etc...
Update question:
I have a problem when try to set key to the hidden input.I dont know How to set the key value for hidden input like
<input type=hidden name="products['+i+'][id]">
Anyone help me plz?
Table like
https://jsfiddle.net/soulcrys/eydx7dn0
<table id="list">
<tr>
<input type="hidden" maxlength="2" id="id" name="product[1][id]" value="" />
<td>
<input type="text" maxlength="2" id="display_order" name="product[1][order]" value="1" />
</td>
<td>
<input type="text" maxlength="20" id="name" name="product[1][name]" value="">
</td>
<td>
</td>
</tr>
</table>
<input type="button" value="Add" id="add_more" />
$('#add_more').click(function() {
var currentLength = $('#list tr').length + 1;
var htmldata = '<tr>';
htmldata += '<td>' + '<input type="text" maxlength="2" id="order" name="product[' + currentLength + '][order]" value="' + currentLength + ' " />' + '</td>';
htmldata += '<td>' + '<input type="text" maxlength="2" id="name" name="product[' + currentLength + '][name]" value="" />' + '</td>';
htmldata += '<td>' + '<input type="button" class="deleteBtn" value="Delete">' + '</td>';
htmldata += '</tr>';
$("#list").append(htmldata);
})
$(document).on('click','.deleteBtn',function() {
$(this).closest('tr').remove();
var i=1;
var j = 1;
$('tr td input[type="text"]').each(function(index){
var id = $(this).attr('id');
console.log($(this).attr('name'));
if(id == 'order')
{
$(this).attr('name','products['+i+'][order]')
$(this).val(i);
}else if(id == 'name')
{
$(this).attr('name','products['+i+'][name]')
}
if(j == 2)
{
j = 1;
i++;
}else{
j++;
}
})
})

Try this code to reset your ids
Working fiddle : https://jsfiddle.net/eydx7dn0/7/
$('#add_more').click(function() {
var currentLength = $('#list tr').length + 1;
var htmldata = '<tr>';
htmldata += '<td>' + '<input type="text" maxlength="2" id="order" name="product[' + currentLength + '][order]" value="' + currentLength + ' " />' + '</td>';
htmldata += '<td>' + '<input type="text" maxlength="2" id="name" name="product[' + currentLength + '][name]" value="" />' + '</td>';
htmldata += '<td>' + '<input type="button" class="deleteBtn" value="Delete">' + '</td>';
htmldata += '</tr>';
$("#list").append(htmldata);
})
$(document).on('click','.deleteBtn',function() {
$(this).closest('tr').remove();
var i=1;
var j = 1;
$('tr td input[type="text"]').each(function(index){
var id = $(this).attr('id');
console.log($(this).attr('name'));
if(id == 'order' || id == 'display_order')
{
$(this).attr('name','products['+i+'][order]')
$(this).val(i);
}else if(id == 'name')
{
$(this).attr('name','products['+i+'][name]')
}
if(j == 2)
{
j = 1;
i++;
}else{
j++;
}
})
})

The answer by #sabbirspi addresses one potential issue, but to answer the actual question (and shamelessly borrowing his first line of code)
$(document).on('click', '#deleteBtn', function() {
$(this).closest('tr').remove();
$('#list tr').each(function(index, tr) {
$(this).find('input[type=text]').each(function(unused, input) {
this.name = this.name.replace(/^(product\[)\d+(\].*)$/, function(match, p1, p2) {
return p1 + (index + 1) + p2;
});
if(this.name.indexOf('[order]') > 0) {
this.value = index + 1;
}
});
});
});

you need to work on live. change this code and maybe solve
$(document).on('click', '#deleteBtn', function() {
$(this).closest('tr').remove();
})

Remove last TD before append to element in dynamic content

I have this piece of code where content is generated dynamically and it's executed each time a SELECT change it's value:
var htmlFabricanteBody = '',
htmlSelFabricanteBody;
htmlFabricanteBody += '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
htmlFabricanteBody += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBody += '<td>' + data.ent.nombre + '</td>';
htmlFabricanteBody += '<td>' + data.ent.direccion + '</td>';
htmlFabricanteBody += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBody += '<td>' + data.ent.telefono + '</td>';
htmlFabricanteBody += '<td><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></td>';
htmlFabricanteBody += '</tr>';
htmlSelFabricanteBody = '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
htmlSelFabricanteBody += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
htmlSelFabricanteBody += '<td>' + data.ent.nombre + '</td>';
htmlSelFabricanteBody += '<td>' + data.ent.direccion + '</td>';
htmlSelFabricanteBody += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
htmlSelFabricanteBody += '<td>' + data.ent.telefono + '</td>';
htmlSelFabricanteBody += '</tr>';
$(htmlFabricanteBody).appendTo("#fabricanteBody");
$(htmlSelFabricanteBody).appendTo("#selFabricanteBody");
The only difference between htmlFabricanteBody and htmlSelFabricanteBody is this line:
htmlFabricanteBody += '<td><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></td>';
In order to avoid DRY, it's possible to remove the line above from htmlFabricanteBody before append to #selFabricanteBody? In other words #fabricanteBody should have the content of htmlFabricanteBody intact as it's, #selFabricanteBody should have the same content of htmlFabricanteBody minus the line I'm talking about, any advice? Workaround?

can combine into a simple function that determines whether to add link or not. Seems a lot easier to read also since your variable names are very similar.
The other benefit is you can move the function out of the logic flow in your script and put it anywhere
function getRowHtml(data, showLink) {
var row = '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
row += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
row += '<td>' + data.ent.nombre + '</td>';
row += '<td>' + data.ent.direccion + '</td>';
row += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
row += '<td>' + data.ent.telefono + '</td>';
/* only variation */
if (showLink) {
row += '<td><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></td>';
}
row += '</tr>';
return row;
}
$(getRowHtml(data,true)).appendTo("#fabricanteBody");
$(getRowHtml(data,false)).appendTo("#selFabricanteBody");

The simplest way, while maintaining your code structure, is this:
var htmlFabricanteBase = '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
htmlFabricanteBase += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBase += '<td>' + data.ent.nombre + '</td>';
htmlFabricanteBase += '<td>' + data.ent.direccion + '</td>';
htmlFabricanteBase += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBase += '<td>' + data.ent.telefono + '</td>';
var htmlFabricanteBody = htmlSelFabricanteBody = htmlFabricanteBase;
htmlFabricanteBody += '<td><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></td>';
htmlFabricanteBody += '</tr>';
htmlSelFabricanteBody += '</tr>';
$(htmlFabricanteBody).appendTo("#fabricanteBody");
$(htmlSelFabricanteBody).appendTo("#selFabricanteBody");
However, a more elegant and powerful solution would be to leverage a templating language, like handlebars. If you anticipate the complexity of this increasing, then a template language will become increasingly more useful.