如何将具有多个部分的表单数据转换为 json

Question

我正在尝试将 html 格式的数据保存为 json。但只有我的最后一行被保存。造成这种情况的原因可能是因为两个部分中的输入名称相同。

但我想要这样的 json 文件：

{"name":"Name1","surname":"Surname1","gender":"f","birthDay":"15","birthMonth":"1","birthYear":"1995 "}, {"name":"Name2","surname":"Surname2","gender":"m","birthDay":"20","birthMonth":"2","birthYear":"2020"}

但现在的输出是：

{"name":"Name2","surname":"Surname2","gender":"m","birthDay":"20","birthMonth":"2","birthYear":"2020 "}

function handleFormSubmit(event) {
            event.preventDefault();

            const data = new FormData(event.target);

            const formJSON = Object.fromEntries(data.entries());


            console.log(JSON.stringify(formJSON))

        }

        const form = document.querySelector('#example-form');
        form.addEventListener('submit', handleFormSubmit);

<div class="container py-4">
        <form id="example-form">
            <div class="row">                
                    <div class="col-md-12 p-0">
                        <div class="col-md-12 form_field_outer p-0" id="app">
                            <div class="row form_field_outer_row">
                                <div class="form-group col-md-2">
                                    <input class="form-control w_90" id="name" name="name" placeholder="Name" type="text" value="" /></div>
                                <div class="form-group col-md-2">
                                    <input class="form-control w_90" id="surname" name="surname" placeholder="Surname" type="text" value="" /></div>
                                <div class="form-group col-md-2">
                                    <select class="form-control" id="gender" name="gender"><option disabled="disabled" selected="selected">Gender</option>
                                        <option value="f">Female</option>
                                        <option value="m">Male</option>
                                        <option value="n">None.</option></select></div>
                                <div class="form-group col">
                                    <input class="form-control w_90" id="birthDay" maxlength="2" name="birthDay" placeholder="Day" type="text" value="" /></div>
                                <div class="form-group col">
                                    <select class="form-control" id="birthMonth" name="birthMonth">
                                        <option disabled="disabled" selected="selected">Month</option>
                                        <option value="1">Jan</option>
                                        <option value="2">Feb</option>
                                        <option value="3">Mar</option>
                                    </select>
                                </div>
                                <div class="form-group col">
                                    <input class="form-control w_90" id="birthYear" maxlength="4" name="birthYear" placeholder="Year" type="text" value="" /></div>
                            </div>
                            <br>    
                            <div class="row form_field_outer_row">
                                <div class="form-group col-md-2">
                                    <input class="form-control w_90" id="name" name="name" placeholder="Name" type="text" value="" /></div>
                                <div class="form-group col-md-2">
                                    <input class="form-control w_90" id="surname" name="surname" placeholder="Surname" type="text" value="" /></div>
                                <div class="form-group col-md-2">
                                    <select class="form-control" id="gender" name="gender"><option disabled="disabled" selected="selected">Gender</option>
                                        <option value="f">Female</option>
                                        <option value="m">Male</option>
                                        <option value="n">None.</option></select></div>
                                <div class="form-group col">
                                    <input class="form-control w_90" id="birthDay" maxlength="2" name="birthDay" placeholder="Day" type="text" value="" /></div>
                                <div class="form-group col">
                                    <select class="form-control" id="birthMonth" name="birthMonth">
                                        <option disabled="disabled" selected="selected">Month</option>
                                        <option value="1">Jan</option>
                                        <option value="2">Feb</option>
                                        <option value="3">Mar</option>
                                    </select>
                                </div>
                                <div class="form-group col">
                                    <input class="form-control w_90" id="birthYear" maxlength="4" name="birthYear" placeholder="Year" type="text" value="" /></div>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="col-md ml-0 mt-3 py-3">
                    <div class="col-md-12">
                        <button type="submit" id="submitId" class="btn btn-success float-right "><i class="fa fa-check-circle"></i> Submit</button>
                    </div>
                </div>
        </form>

    </div>

我该如何解决这个问题？

感谢您的回答。

Answer 1

您的表单元素必须具有唯一的 id 和 name 值。

所以改变两个出现的情况：

<input id="surname" name="surname">

到这样的事情：

<input id="surname_0" name="person[0][surname]">

第二次出现：

<input id="surname_1" name="person[1][surname]">

（我删除了所有其他属性以提高答案的可读性）