如何从 javascript 中获取价值

Question

我有一个使用包含文本框和组合框的添加元素的表单。

我的问题是我无法从中获得价值。数据库中只能保存一个数组。

我使用print_r，但我只得到一条记录。

我的 javascript 代码：

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

}

我不确定自己做错了什么。

我如何获得价值？

Answer 1

您可以使用FormData 直接从表单中收集值，或使用 API 手动添加它们。
可直接与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>

Answer 2

正如我在上面的评论中提到的：使用模板字符串会更容易。但您的脚本似乎仍然有效，如下所示：

每次调用additem() 都会在您的表格中添加另一行输入元素。

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>

这是另一个带有模板字符串的版本，用于生成您的输入字段：

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>

我添加了另一个由“#go”按钮触发的函数，其中所有输入的值都收集到一个公共对象obj。

如果您想将表单元素传递到 URL 查询字符串中，您需要执行如下所述的操作：getting all form values by javascript。