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
– Carsten Massmann, Commented Jun 14, 2020 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
– Hermann Schwarz, Commented Jun 14, 2020 at 11:12

user120242 · Accepted Answer · 2020-06-14 11:39:39Z

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
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.

Carsten Massmann · Accepted Answer · 2020-06-14 15:11:17Z

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
additem is working.. but i cannot get value from each item. i'm using $_POST['txtNamabarang'] in php in same page

Collectives™ on Stack Overflow

How do I get value from javascript

2 Answers 2

2 Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Linked

Related