How do I get value from javascript

Question

I have a form using add element containing a textbox and combobox.

My problem is I can't get the value from it. Only one array can be saved to the database.

I use print_r but I only get one record.

My javascript code:

function additem() {
    //                menentukan target append
    var itemlist = document.getElementById('itemlist');
    //                membuat element
    var row = document.createElement('tr');
    var namaBrg = document.createElement('td');
    var jumlahBrg = document.createElement('td');
    var satuanBrg = document.createElement('td');
    var kategoriBrg = document.createElement('td');
    var ketBrg = document.createElement('td');
    var aksi = document.createElement('td');
    aksi.setAttribute('align', 'center');
    //                meng append element
    itemlist.appendChild(row);
    row.appendChild(namaBrg);
    row.appendChild(jumlahBrg);
    row.appendChild(satuanBrg);
    row.appendChild(kategoriBrg);
    row.appendChild(ketBrg);
    row.appendChild(aksi);
    //                membuat element input
    var txtNamabarang = document.createElement('input');
    txtNamabarang.setAttribute("type", "text");
    txtNamabarang.setAttribute('name', 'txtNamabarang[]');
    txtNamabarang.setAttribute('class', 'form-control');
    txtNamabarang.setAttribute('placeholder', 'Nama Barang');
    var txtJumlahbarang = document.createElement('input');
    txtJumlahbarang.setAttribute('name', 'txtJumlahbarang[]');
    txtJumlahbarang.setAttribute('class', 'form-control');
    txtJumlahbarang.setAttribute('placeholder', 'Jumlah');
    var cmbSatuanbarang = document.createElement('input');
    cmbSatuanbarang.setAttribute('name', 'cmbSatuanbarang[]');
    cmbSatuanbarang.setAttribute('class', 'form-control');
    cmbSatuanbarang.setAttribute('placeholder', 'Satuan');
    //                membuat element combobox
    var myParent = document.body;
    var array = ["Choose...", "Bahan Baku", "Barang Jadi", "Scrap"];
    var cmbKategoribarang = document.createElement("select");
    cmbKategoribarang.setAttribute('name', 'cmbKategoribarang[]');
    cmbKategoribarang.setAttribute('class', 'form-control');
    cmbKategoribarang.id = "cmbKategoribarang";
    myParent.appendChild(cmbKategoribarang);
    for (var i = 0; i < array.length; i++) {
        var option = document.createElement('option');
        option.value = array[i];
        option.text = array[i];
        cmbKategoribarang.appendChild(option);
        cmbKategoribarang.appendChild(option);
    }
    var txtKet = document.createElement('input');
    txtKet.setAttribute('name', 'txtKet[]');
    txtKet.setAttribute('class', 'form-control');
    txtKet.setAttribute('placeholder', 'Keterangan');

    var hapus = document.createElement('span');
    //                meng append element input
    namaBrg.appendChild(txtNamabarang);
    jumlahBrg.appendChild(txtJumlahbarang);
    satuanBrg.appendChild(cmbSatuanbarang);
    kategoriBrg.appendChild(cmbKategoribarang);
    ketBrg.appendChild(txtKet);
    aksi.appendChild(hapus);
    hapus.innerHTML = '<button class="btn btn-small btn-default"><span class="glyphicon glyphicon-trash"></span></i></button>';
    //                membuat aksi delete element
    hapus.onclick = function () {
        row.parentNode.removeChild(row);
    };

}

I'm not sure what I'm doing wrong.

How do I get the value?

You are making life far too hard for yourself. Have you considered adding the elements by using an HTML-template string? This would shorten your script and improve its readability enormeously. — Carsten Massmann, Jun 14 '20 at 10:47
It's better if you would provide more information about the server side script (I suppose PHP, because of print_r()). It's maybe essential to resolve the problem. The JavaScript itself has no problem. — Hermann Schwarz, Jun 14 '20 at 11:12

Carsten Massmann · Answer 1 · 2020-06-14T15:11:17.543

As mentioned in my comment above: doing it with a template string would be easier. But your script seems to work nonetheless, as can be seen here:

Each call of additem() will add another line of input elements to your table.

additem();
additem()

function additem() {
  //                menentukan target append
  var itemlist = document.getElementById('itemlist');
  //                membuat element
  var row = document.createElement('tr');
  var namaBrg = document.createElement('td');
  var jumlahBrg = document.createElement('td');
  var satuanBrg = document.createElement('td');
  var kategoriBrg = document.createElement('td');
  var ketBrg = document.createElement('td');
  var aksi = document.createElement('td');
  aksi.setAttribute('align', 'center');
  //                meng append element
  itemlist.appendChild(row);
  row.appendChild(namaBrg);
  row.appendChild(jumlahBrg);
  row.appendChild(satuanBrg);
  row.appendChild(kategoriBrg);
  row.appendChild(ketBrg);
  row.appendChild(aksi);
  //                membuat element input
  var txtNamabarang = document.createElement('input');
  txtNamabarang.setAttribute("type", "text");
  txtNamabarang.setAttribute('name', 'txtNamabarang[]');
  txtNamabarang.setAttribute('class', 'form-control');
  txtNamabarang.setAttribute('placeholder', 'Nama Barang');
  var txtJumlahbarang = document.createElement('input');
  txtJumlahbarang.setAttribute('name', 'txtJumlahbarang[]');
  txtJumlahbarang.setAttribute('class', 'form-control');
  txtJumlahbarang.setAttribute('placeholder', 'Jumlah');
  var cmbSatuanbarang = document.createElement('input');
  cmbSatuanbarang.setAttribute('name', 'cmbSatuanbarang[]');
  cmbSatuanbarang.setAttribute('class', 'form-control');
  cmbSatuanbarang.setAttribute('placeholder', 'Satuan');
  //                membuat element combobox
  var myParent = document.body;
  var array = ["Choose...", "Bahan Baku", "Barang Jadi", "Scrap"];
  var cmbKategoribarang = document.createElement("select");
  cmbKategoribarang.setAttribute('name', 'cmbKategoribarang[]');
  cmbKategoribarang.setAttribute('class', 'form-control');
  cmbKategoribarang.id = "cmbKategoribarang";
  myParent.appendChild(cmbKategoribarang);
  for (var i = 0; i < array.length; i++) {
    var option = document.createElement('option');
    option.value = array[i];
    option.text = array[i];
    cmbKategoribarang.appendChild(option);
    cmbKategoribarang.appendChild(option);
  }
  var txtKet = document.createElement('input');
  txtKet.setAttribute('name', 'txtKet[]');
  txtKet.setAttribute('class', 'form-control');
  txtKet.setAttribute('placeholder', 'Keterangan');

  var hapus = document.createElement('span');
  //                meng append element input
  namaBrg.appendChild(txtNamabarang);
  jumlahBrg.appendChild(txtJumlahbarang);
  satuanBrg.appendChild(cmbSatuanbarang);
  kategoriBrg.appendChild(cmbKategoribarang);
  ketBrg.appendChild(txtKet);
  aksi.appendChild(hapus);
  hapus.innerHTML = '<button class="btn btn-small btn-default"><span class="glyphicon glyphicon-trash"></span></i></button>';
  //                membuat aksi delete element
  hapus.onclick = function() {
    row.parentNode.removeChild(row);
  };

}

<table id="itemlist"></table>

Here is another version with a template string to generate your input fields:

var tr=`<tr>
 <td><input type="text" name="txtNamabarang[]" class="form-control" placeholder="Nama Barang"></td>
 <td><input name="txtJumlahbarang[]" class="form-control" placeholder="Jumlah"></td>
 <td><input name="cmbSatuanbarang[]" class="form-control" placeholder="Satuan"></td>
 <td><select name="cmbKategoribarang[]" class="form-control" id="cmbKategoribarang">
      <option value="Choose...">Choose...</option>
      <option value="Bahan Baku">Bahan Baku</option>
      <option value="Barang Jadi">Barang Jadi</option>
      <option value="Scrap">Scrap</option>
     </select></td>
 <td><input name="txtKet[]" class="form-control" placeholder="Keterangan"></td>
 <td align="center"><button class="btn btn-small btn-default del">&#x1F5D1;</button></td></tr>`;
var il=document.getElementById('itemlist');
il.innerHTML+=tr+tr+tr+tr;   // add 4 lines of input fields

il.onclick=ev=>{ let btn=ev.target;  // action of delete buttons
 if (btn.classList.contains('del')) {
  row=btn.closest('tr'); 
  row.parentNode.removeChild(row); 
 }
}
document.getElementById('go').onclick=ev=>{  // go: show values
 let obj=[...document.querySelectorAll('#itemlist input[name]')].reduce((o,e)=>{
    let nam=e.name.replace("[]","");
    (o[nam]=o[nam] || []).push(e.value);
    return o;
   }, {});
   console.log(obj);
}

<table id="itemlist"></table>
<button id="go">go</button>

I added another function that is triggered by the "#go" button, where the values from all inputs are collected into a common object obj.

If you want to deliver the form elements into a URL query-string you need to do something like is described here: getting all form values by javascript.

the problem is the query can not insert all value to database. only 1 record array inserted — Supratman Suriadi, Jun 14 '20 at 11:15
additem is working.. but i cannot get value from each item. i'm using $_POST['txtNamabarang'] in php in same page — Supratman Suriadi, Jun 14 '20 at 17:05

user120242 · Answer 2 · 2020-06-14T11:39:39.467

You can use FormData to collect the values directly from a form, or add them manually using the API.
Can be used directly with the fetch API.

function addRow(){
additem()
}
function getData(){
console.log(JSON.stringify([...(
  new FormData(form)
)]))
}

function additem() {
  //                menentukan target append
  var itemlist = document.getElementById('itemlist');
  //                membuat element
  var row = document.createElement('tr');
  var namaBrg = document.createElement('td');
  var jumlahBrg = document.createElement('td');
  var satuanBrg = document.createElement('td');
  var kategoriBrg = document.createElement('td');
  var ketBrg = document.createElement('td');
  var aksi = document.createElement('td');
  aksi.setAttribute('align', 'center');
  //                meng append element
  itemlist.appendChild(row);
  row.appendChild(namaBrg);
  row.appendChild(jumlahBrg);
  row.appendChild(satuanBrg);
  row.appendChild(kategoriBrg);
  row.appendChild(ketBrg);
  row.appendChild(aksi);
  //                membuat element input
  var txtNamabarang = document.createElement('input');
  txtNamabarang.setAttribute("type", "text");
  txtNamabarang.setAttribute('name', 'txtNamabarang[]');
  txtNamabarang.setAttribute('class', 'form-control');
  txtNamabarang.setAttribute('placeholder', 'Nama Barang');
  var txtJumlahbarang = document.createElement('input');
  txtJumlahbarang.setAttribute('name', 'txtJumlahbarang[]');
  txtJumlahbarang.setAttribute('class', 'form-control');
  txtJumlahbarang.setAttribute('placeholder', 'Jumlah');
  var cmbSatuanbarang = document.createElement('input');
  cmbSatuanbarang.setAttribute('name', 'cmbSatuanbarang[]');
  cmbSatuanbarang.setAttribute('class', 'form-control');
  cmbSatuanbarang.setAttribute('placeholder', 'Satuan');
  //                membuat element combobox
  var myParent = document.body;
  var array = ["Choose...", "Bahan Baku", "Barang Jadi", "Scrap"];
  var cmbKategoribarang = document.createElement("select");
  cmbKategoribarang.setAttribute('name', 'cmbKategoribarang[]');
  cmbKategoribarang.setAttribute('class', 'form-control');
  cmbKategoribarang.id = "cmbKategoribarang";
  myParent.appendChild(cmbKategoribarang);
  for (var i = 0; i < array.length; i++) {
    var option = document.createElement('option');
    option.value = array[i];
    option.text = array[i];
    cmbKategoribarang.appendChild(option);
    cmbKategoribarang.appendChild(option);
  }
  var txtKet = document.createElement('input');
  txtKet.setAttribute('name', 'txtKet[]');
  txtKet.setAttribute('class', 'form-control');
  txtKet.setAttribute('placeholder', 'Keterangan');

  var hapus = document.createElement('span');
  //                meng append element input
  namaBrg.appendChild(txtNamabarang);
  jumlahBrg.appendChild(txtJumlahbarang);
  satuanBrg.appendChild(cmbSatuanbarang);
  kategoriBrg.appendChild(cmbKategoribarang);
  ketBrg.appendChild(txtKet);
  aksi.appendChild(hapus);
  hapus.innerHTML = '<button class="btn btn-small btn-default"><span class="glyphicon glyphicon-trash"></span></i></button>';
  //                membuat aksi delete element
  hapus.onclick = function() {
    row.parentNode.removeChild(row);
  };

}

<form id="form"><table id="itemlist"></table></form>

<button onclick="addRow()">add row</button>
<button onclick="getData()">get data</button>

additem is working.. but i cannot get value from each item. i'm using $_POST['txtNamabarang'] in php in same page — Supratman Suriadi, Jun 14 '20 at 17:08
make sure you enclose all the rows in one form. or when you collect form data that you actually grab all of them. I suspect that you are actually only submitting a form data with only the first row. — user120242, Jun 14 '20 at 20:31

How do I get value from javascript

2 Answers2