英文:
addeventlistener on button does not retrieve the latest values of text inputs
问题
以下是您提供的内容的中文翻译：
我有一个包含4个字段集的表单，每个字段集都有文本输入框和一个按钮，该按钮将仅发送与相应字段集的数据的POST请求。
提交操作按预期工作，但它始终发送文本输入框的初始值，即使值已更改（请参阅代码片段）。
我还尝试在添加事件监听器之前为给定的字段集元素创建变量，但console.log仍然显示初始值而不是新值...
编辑：下面的代码示例显示.elements的日志，但目标是获取输入的名称和值，以便在POST请求中发送它们。
<html>
<head></head>
<body>
<form id="test-form">
<fieldset for="test-form">
<input type="text" value="初始值" name="input-test-1" />
<button type="submit" name="btn-submit">提交 1</button>
</fieldset>
<fieldset for="test-form">
<input type="text" value="" name="input-test-2" />
<button type="submit" name="btn-submit">提交 2</button>
</fieldset>
<fieldset for="test-form">
<input type="text" value="" name="input-test-3" />
<button type="submit" name="btn-submit">提交 3</button>
</fieldset>
<fieldset for="test-form">
<input type="text" value="" name="input-test-4" />
<button type="submit" name="btn-submit">提交 4</button>
</fieldset>
<button type="submit" name="btn-main-submit">其他提交</button>
</form>
</body>
</html>
如果您需要更多帮助，请告诉我。
英文:
I have a form that contains 4 fieldsets, each fieldset has text inputs and a button that will send a POST request with the data of the corresponding fieldset only.
The submit action works as expected but it always send the initial values of text inputs, even if the values have changed (see the code snippet).
I also tried to create a variable for a given fieldset element before adding the eventlistener but the console.log was still displaying the initial values and not the new values...
EDIT : the code below shows the log of .elements as an example, but the goal was to get names & values of inputs to send them in a POST request.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const ready = (e) => {
let form = document.querySelector('#test-form');
form.querySelectorAll('button[name="btn-submit"]').forEach((el) => {
el.addEventListener('click', (e) => {
e.preventDefault();
console.log([...el.closest('fieldset').elements]);
});
});
};
document.addEventListener('DOMContentLoaded', ready);
<!-- language: lang-html -->
<html>
<head></head>
<body>
<form id="test-form">
<fieldset for="test-form">
<input type="text" value="initial value" name="input-test-1" />
<button type="submit" name="btn-submit">Submit 1</button>
</fieldset>
<fieldset for="test-form">
<input type="text" value="" name="input-test-2" />
<button type="submit" name="btn-submit">Submit 2</button>
</fieldset>
<fieldset for="test-form">
<input type="text" value="" name="input-test-3" />
<button type="submit" name="btn-submit">Submit 3</button>
</fieldset>
<fieldset for="test-form">
<input type="text" value="" name="input-test-4" />
<button type="submit" name="btn-submit">Submit 4</button>
</fieldset>
<button type="submit" name="btn-main-submit">Other submit</button>
</form>
</body>
</html>
<!-- end snippet -->
答案1
得分: 1
在HTML元素上运行console.log仅显示元素的原始HTML表示。如果您想要其属性的当前值（而不是其原始属性），您需要修改您的代码以记录您想要的属性：
在这里，我正在使用 Array.from 的一种重载，它接受一个映射函数。
const ready = (e) => {
let form = document.querySelector('#test-form');
form.querySelectorAll('button[name="btn-submit"]').forEach((el) => {
el.addEventListener('click', (e) => {
e.preventDefault();
console.log(Array.from(el.closest('fieldset').elements, (el) => el.value));
});
});
};
document.addEventListener('DOMContentLoaded', ready);
<html>
<head></head>
<body>
<form id="test-form">
<fieldset for="test-form">
<input type="text" value="initial value" name="input-test-1" />
<button type="submit" name="btn-submit">Submit 1</button>
</fieldset>
<fieldset for="test-form">
<input type="text" value="" name="input-test-2" />
<button type="submit" name="btn-submit">Submit 2</button>
</fieldset>
<fieldset for="test-form">
<input type="text" value="" name="input-test-3" />
<button type="submit" name="btn-submit">Submit 3</button>
</fieldset>
<fieldset for="test-form">
<input type="text" value="" name="input-test-4" />
<button type="submit" name="btn-submit">Submit 4</button>
</fieldset>
<button type="submit" name="btn-main-submit">Other submit</button>
</form>
</body>
</html>
这是您提供的代码的翻译部分。
英文:
Running console.log on HTML Elements merely shows the original HTML representation of the element. If you want the current values of its properties (not its original attributes), you need to amend your code to log the property(ies) you want:
Here I'm using the overload of Array.from that takes a mapping function.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-js -->
const ready = (e) => {
let form = document.querySelector('#test-form');
form.querySelectorAll('button[name="btn-submit"]').forEach((el) => {
el.addEventListener('click', (e) => {
e.preventDefault();
console.log(Array.from(el.closest('fieldset').elements, (el) => el.value));
});
});
};
document.addEventListener('DOMContentLoaded', ready);
<!-- language: lang-html -->
<html>
<head></head>
<body>
<form id="test-form">
<fieldset for="test-form">
<input type="text" value="initial value" name="input-test-1" />
<button type="submit" name="btn-submit">Submit 1</button>
</fieldset>
<fieldset for="test-form">
<input type="text" value="" name="input-test-2" />
<button type="submit" name="btn-submit">Submit 2</button>
</fieldset>
<fieldset for="test-form">
<input type="text" value="" name="input-test-3" />
<button type="submit" name="btn-submit">Submit 3</button>
</fieldset>
<fieldset for="test-form">
<input type="text" value="" name="input-test-4" />
<button type="submit" name="btn-submit">Submit 4</button>
</fieldset>
<button type="submit" name="btn-main-submit">Other submit</button>
</form>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论