无法读取表单元素
[英]Can't read the form elements
问题描述
I can't get the values of these three fields;
我无法获得这三个字段的值； it only returns an empty value (a space).它只返回一个空值（一个空格）。 The ids are correctly set in the form. 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>
When I enter the values, and click on SAVE I get an empty json, ie:当我输入值并单击保存时，我得到一个空的 json，即：
{"id":"","name":"","price":""}
with error:有错误：
"One or more parameter values are not valid. The AttributeValue for a key attribute cannot contain an empty string value. Key: id" “一个或多个参数值无效。键属性的 AttributeValue 不能包含空字符串值。键：id”
2 个解决方案
解决方案1
0 2022-01-20 19:16:34
The problem is that you are getting the values from the input fields as soon as the script runs, so you will get empty strings because the inputs at that point are empty.问题是脚本运行后您将立即从输入字段中获取值，因此您将获得空字符串，因为此时的输入为空。
To get the input values after the form is submitted, put the data variable inside the myFunction() method, it's important to read the values right before sending the data.要在提交表单后获取输入值，请将数据变量放在myFunction()方法中，在发送数据之前读取值很重要。
Example例子
<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
I don't know if this is what you mean, but I did let the data save in the console log when you press submit我不知道这是否是您的意思，但是当您按提交时，我确实让数据保存在控制台日志中
<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.