如何将表单提交字段转换为规范的Transactions对象数组？

先修正现有代码的基础错误 #

1. 表单提交事件绑定的函数名不匹配：on:submit|preventDefault={addTodo} 需改为 on:submit|preventDefault={handleSubmit}。
2. 第二个input标签存在语法错误：重复写了name属性，正确写法应为 <input type="number" name="amount" />（建议用number类型处理金额数值）。
3. 所有行的input名称重复，无法区分每组type和amount的对应关系，需要给每个input的name加上索引标识，推荐采用数组式命名：

<form on:submit|preventDefault={handleSubmit} method="POST">
 {#each Array(10) as _, i}
   <div id="row-{i}">
      <input type="text" name="transactions[{i}].type" />
      <input type="number" name="transactions[{i}].amount" />
   </div>
{/each}

<button type="submit">Submit</button>
</form>

修正并实现handleSubmit函数 #

通过FormData获取表单数据后，整理成目标格式的对象数组：

function handleSubmit(e) {
    const formData = new FormData(e.target);
    const transactions = [];
    
    // 按索引遍历，分组获取每组的type和amount
    for (let i = 0; i < 10; i++) {
        const type = formData.get(`transactions[${i}].type`);
        const amount = formData.get(`transactions[${i}].amount`);
        
        // 可选：过滤没有填写内容的条目
        if (type || amount) {
            transactions.push({
                type: type?.trim(),
                value: Number(amount) // 将金额转换为数字类型
            });
        }
    }
    
    console.log(transactions); // 输出符合要求的数组
}

另一种实现方式（不修改input名称的情况） #

如果不想调整input的name属性，也可以通过DOM容器分组来获取对应值：

function handleSubmit(e) {
    const rows = e.target.querySelectorAll('[id^="row-"]');
    const transactions = Array.from(rows).map(row => {
        const type = row.querySelector('[name="type"]').value.trim();
        const amount = row.querySelector('[name="amount"]').value;
        return {
            type,
            value: Number(amount)
        };
    }).filter(item => item.type || item.value); // 过滤空条目
    
    console.log(transactions);
}

这种方式需要先修正input的语法错误，且保证每组input都在对应的row容器内。

内容的提问来源于stack exchange，提问作者Toothfairy