首页 > 解决方案 > 将表单更新到 pouchdb 数据库

问题描述

我正在使用 pouchdb 处理小型表单,成功地将数据从获取表单值插入到 db。

现在我想通过从下拉列表中选择 id 来编辑数据。在选择下拉列表时,我已经根据 db 中的 id 获取了 html 中的值。

之后,我想编辑表单并根据 id 在数据库中更新onsubmit

这是一个代码

// inserting into the database 
const form = document.getElementById("form1");
form.addEventListener("submit", dbsubmit);
function dbsubmit() {
   
   var Sno = document.getElementById("number").value;
   var date = document.getElementById("date").value;
   var Time = document.getElementById("time").value;
   var VechicleNo = document.getElementById("Vechicle").value;
   var Customer = document.getElementById("customer").value;
   var VechicleType = document.getElementById("Type-vechicle").value;
   var Material = document.getElementById("MaterialType").value;
   var select = document.getElementById("number");

   var doc = {
      _id: Sno,
      Date:date,
      time:Time,
      vechicleNo: VechicleNo,
      customer: Customer,
      vechicletType: VechicleType,
      material: Material,
   };
   db.put(doc,function (err, response) {
      if (err) {
         return console.log(err);
      } else {
         console.log("Document created Successfully", response);
         
        
      }
   });
}

// getting values onchanging dropdown 
function val() {
    var Sno = document.getElementById("number").value;
    db.get(Sno).then(function (doc) {
       document.getElementById("date").value = doc.Date;
       document.getElementById("time").value = doc.time;
       document.getElementById("Vechicle").value= doc.vechicleNo;
       document.getElementById("customer").value= doc.customer;
       document.getElementById("Type-vechicle").value= doc.vechicletType;
       document.getElementById("MaterialType").value= doc.material;
     
    });
  
 }
<form id="form1" > 
        <label for="sno">S.NO</label>
        <select name="sno" id="number" onchange="val()">
            <option value="1">1</option>
        </select>
        
        <label for="fname">Date : </label>
        <input type="text" id="date" name="dtime" >
        <label for="fname">Time : </label>
        <input type="text" id="time" name="dtime" >
        <label for="fname">Vechicle No:</label>
        <input type="text" id="Vechicle" name="Vechicle No">
        <label for="fname">Customer No</label>
        <input type="number" name="customer no" id="customer">

        <label for="Vechicle">Vechicle</label>
        <select name="Vechicle" id="Type-vechicle">
            <option value="Lorry - 10 wheel">Lorry - 10 wheel</option>
            <option value="Lorry - 12 wheel">Lorry - 12 wheel</option>
            <option value="Eiacher">Eiacher</option>
        </select> 
        
        <label for="Material">Material</label>
        <select name="Material" id="MaterialType">
            <option value="Wood">Wood</option>
            <option value="Sulphur">Sulphur</option>
            <option value="Acid">Acid</option>
        </select>

        <input type="submit" id=billsub  value="Save" />      
      
    </form>

有人帮忙写代码吗?

标签: javascriptpouchdb

解决方案


推荐阅读