javascript - 将表单更新到 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>
有人帮忙写代码吗?
解决方案
推荐阅读
- angular - 每隔几次浏览器重新加载,Angular 表就不会显示数据
- html - 在选择列表中有一个按钮是有效的 HTML 吗?
- sql - 如何将电话号码中的城市代码与 Informix SQL 匹配?
- bash - 如何使用小指只显示用户的名字而不是所有信息 Bash?
- javascript - 从 VueJs 中以编程方式添加的元素检查子字符串
- python - GCP 虚拟机上的 Node.js 运行服务器
- reactjs - InputType() 不会从 React 前端转换为 NodeJs 后端
- r - 是否可以在闪亮的应用程序中嵌套动态手风琴?
- sql - 连接具有不同主键值的表
- jquery - 在表格中定位元素以匹配其他内容