[JS] Tạo Form column theo số lượng

Tạo Form column theo số lượng: 

Việc tạo form nhập theo số lượng sẽ giúp chúng ta có 1 giao diện ưa nhìn và không bị dư thừa trong dữ liệu. Hôm nay mình sẽ chia sẻ mọi người vd về form cho người book du lịch.

1. Tạo Form HTML

<div class="col-inner">
    <div class="title-form">
        <div class="ttll">
            <p>Thông tin người đi</p>
        </div>
    </div>
    <div class="body-form">
        <div class="input-col">
            <div>
                <input id="input-lon" type="number">
                <p>
                    Người lớn (>=11 tuổi)
                </p>
            </div>
            <div>
                <input id="input-nho" type="number">
                <p>
                    Trẻ em (6<11 tuổi) </p>
            </div>
            <div>
                <p>
                    Tổng số khách
                </p>
                <p>
                <p id="total-customer"></p>
            </div>
        </div>
        <table class="dynatable">
            <thead>
                <tr>
                    <th style="width:50px">STT</th>
                    <th>Họ tên</th>
                    <th>Ngày sinh</th>
                    <th>Giới tính</th>
                    <th>Điện thoại</th>
                    <th>CMND</th>
                    <th>Loại khách</th>
                </tr>
            </thead>
            <tbody>
                <tr class="prototype">
                    <td id="stt"></td>
                    <td><input type="text" class="name" name="name" value="" /></td>
                    <td><input type="date" class="dob" name="dob" value="" /></td>
                    <td><input type="text" class="sex" name="sex" value="" /></td>
                    <td><input type="text" class="phone" name="phone" value="" /></td>
                    <td><input type="text" class="cmnd" name="cmnd" value="" /></td>
                    <td><input type="text" class="loai-khach" name="loai-khach" value="" /></td>
                </tr>
            </tbody>
        </table>
        <div class="flex-middle" style="margin-top:20px;">
            <a id="back-2"
                style="width: 122px;background-color: unset; border: 2px solid #fff;border-radius: 8px; box-shadow: unset; color: #000; font-size: 16px;line-height: 2.4em;text-align:center;font-weight:bold;">Trở
                về</a><input style="width: 122px;" type="submit" id="submit-b2" value="Bước tiếp">
        </div>
    </div>
</div>

2. Xử lý JS

$("#input-lon").change(function () {
    const lon = $(this).val();
    const nho = $("#input-nho").val();
    const total = Number(lon) + Number(nho);
    $("#total-customer").text(total);
    $('table.dynatable').find("tbody tr").not(':first').each(function(){
    $(this).remove()
});
for( var i = 1; i <= total; i++){
        
    var master = $("table.dynatable");
    // Get a new row based on the prototype row
    var prot = master.find("tr.prototype").clone();
    prot.attr("class", "")
    prot.find("#stt").text(i)
    master.find("tbody").append(prot);
}
})
$("#input-nho").change(function () {
    const nho = $(this).val();
    const lon = $("#input-lon").val();
    const total = Number(lon) + Number(nho);
    $("#total-customer").text(total);
    $('table.dynatable').find("tbody tr").not(':first').each(function(){
    $(this).remove()
});
for( var i = 1; i <= total; i++){
        
    var master = $("table.dynatable");
    // Get a new row based on the prototype row
    var prot = master.find("tr.prototype").clone();
    prot.attr("class", "")
    prot.find("#stt").text(i)
    master.find("tbody").append(prot);
}
})

3. Xử lý submit để lấy data

// Add button functionality
let name = [];
let dob = [];
let sex = [];
let phone = [];
let cmnd = [];
let loaiKhach = [];

$(document).on("click", "#submit-b2" , function() {
    $("input.name").each(function(i,obj) {
        name.push(obj.value);
    })
    $("input.dob").each(function(i,obj) {
        dob.push(obj.value);
    })
    $("input.sex").each(function(i,obj) {
        sex.push(obj.value);
    })
    $("input.phone").each(function(i,obj) {
        phone.push(obj.value);
    })
    $("input.cmnd").each(function(i,obj) {
        cmnd.push(obj.value);
    })
    $("input.loai-khach").each(function(i,obj) {
        loaiKhach.push(obj.value);
    })
    
});

Chúc bạn thành công.