Overview goForm
Tables (or list) are used in many cases. Especially in all forms of ERP. I found that Go is good at rending small tables, but when bigger lists behaves not well. So I searched for several solutions to handle looong list tables. There are tons of "libraries" out there and I have tested only a few of them. I have decided to test agGrid further.
Forms are often used in conjuction with tables. Forms can be vanilla HTML or created by Javascript. In my case I am investigating to use the vanilla in order to make it more "generic". Here is the code that fetches ONE row from the database (via API) and creates a form "on-the-fly".
function getcard(id, width) { if (width < 1750) { const table = document.getElementById("boxtable") const card = document.getElementById("boxcard") table.classList.add("hide") card.classList.add("show") } form = document.getElementById("form") form.innerHTML = ""; var url = "https://api.go4webdev.org/c_que?id=" + id; var xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.setRequestHeader("Accept", "application/json"); xhr.onload = function() { if (xhr.readyState === 4) { get(JSON.parse(this.responseText)) } }; xhr.send(); function get(data) { const tmpl = [{ tag: "input", label: "ID", type: "text", id: "id", value: data.que_id }, { tag: "input", label: "Subject", type: "text", id: "name", value: data.que_subject }, { tag: "textarea", label: "Desc", id: "desc", value: data.que_desc } ] form = document.getElementById("form") for (var row in tmpl) { switch (tmpl[row].tag) { case "input": div = document.createElement('div'); div.setAttribute("class", "inputbox"); form.appendChild(div) input = document.createElement("input"); for (var key in tmpl[row]) { switch (key) { case "label": label = document.createElement("label"); label.innerHTML = tmpl[row][key]; div.appendChild(label); break; default: input.setAttribute(key, tmpl[row][key]); } div.appendChild(input); } break case "textarea": div = document.createElement('div'); div.setAttribute("class", "areabox"); form.appendChild(div) textarea = document.createElement("textarea"); for (var key in tmpl[row]) { switch (key) { case "label": label = document.createElement("label"); label.innerHTML = tmpl[row][key]; div.appendChild(label); break; default: textarea.setAttribute(key, tmpl[row][key]); textarea.innerHTML = data.que_desc } div.appendChild(textarea); } break default: alert("missing tag") } } } }