如何從 javascript 獲得價值

Question

我有一個使用包含文本框和 combobox 的添加元素的表單。

我的問題是我無法從中獲得價值。 只能將一個數組保存到數據庫中。

我使用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

正如我在上面的評論中提到的：使用模板字符串會更容易。 但是您的腳本似乎仍然有效，如下所示：

每次調用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”按鈕觸發的 function，其中所有輸入的值都收集到一個公共 object obj中。

如果要將表單元素傳遞到 URL 查詢字符串中，則需要執行如下所述的操作： 通過 javascript 獲取所有表單值。

Answer 2

您可以使用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>