无法读取表单元素
[英]Can't read the form elements
问题描述
我无法获得这三个字段的值； 它只返回一个空值（一个空格）。 id 在表单中正确设置。
<script> const data = { id: document.getElementById('idbook').value, name: document.getElementById('namebook').value, price: document.getElementById('pricebook').value }; function myFunction(){ const http = new easyHTTP; http.put('https://otg0gf6qw5.execute-api.us-east-2.amazonaws.com/books', data, function(err, post){ if(err) { console.log(err); } else { console.log(post); } }); </script>
<!DOCTYPE html>
<html>
<body>
<div class="container">
<form method="post" id="save" action="javascript:myFunction()">
<h1>Insert Book</h1>
<div class="field">
<label for="id">ID Book:</label>
<input type="text" id="idbook" name="id"/>
<small></small>
</div>
<div class="field">
<label for="id">Name Book:</label>
<input type="text" id="namebook" name="nameBook"/>
<small></small>
</div>
<div class="field">
<label for="id">Price Book:</label>
<input type="text" id="pricebook" name="priceBook"/>
<small></small>
</div>
<div class="field">
<button type="submit" class="full">SAVE BOOK</button>
</div>
</form>
</div>
当我输入值并单击保存时，我得到一个空的 json，即：
{"id":"","name":"","price":""}
有错误：
“一个或多个参数值无效。键属性的 AttributeValue 不能包含空字符串值。键：id”
2 个解决方案
解决方案1
0 2022-01-20 19:16:34
问题是脚本运行后您将立即从输入字段中获取值，因此您将获得空字符串，因为此时的输入为空。
要在提交表单后获取输入值，请将数据变量放在myFunction()方法中，在发送数据之前读取值很重要。
例子
<script>
function myFunction() {
const data = {
id: document.getElementById('idbook').value,
name: document.getElementById('namebook').value,
price: document.getElementById('pricebook').value
};
const http = new easyHTTP;
http.put('https://otg0gf6qw5.execute-api.us-east-2.amazonaws.com/books', data, function(err, post) {
if(err) {
console.log(err);
} else {
console.log(post);
}
});
};
</script>
解决方案2
0 2022-01-20 19:17:23
我不知道这是否是您的意思，但是当您按提交时，我确实让数据保存在控制台日志中
<div class="container">
<form method="post" id="save" action="javascript:myFunction()">
<h1>Insert Book</h1>
<div class="field">
<label for="id">ID Book:</label>
<input type="text" id="idbook" name="id"/>
<small></small>
</div>
<div class="field">
<label for="id">Name Book:</label>
<input type="text" id="namebook" name="nameBook"/>
<small></small>
</div>
<div class="field">
<label for="id">Price Book:</label>
<input type="text" id="pricebook" name="priceBook"/>
<small></small>
</div>
<div class="field">
<button type="submit" class="full">SAVE BOOK</button>
</div>
</form>
<script>
function myFunction(){
const data = {
id: document.getElementById('idbook').value,
name: document.getElementById('namebook').value,
price: document.getElementById('pricebook').value
};
console.log(data);
}
</script>
</div></body></html>
无法访问表单元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.