مشاهدة ملف: form.js

"use strict";
$('#addformtable').DataTable({
    processing: true,
    serverSide: true,
    responsive:true,
    ajax:'/form/get',
    columns: [
        { "data": "title" },
        { "data": "created_at" },
        { "data": "action" },
    ]
});

    $(document).ready(function(){
        let i = 0;
        $('#add_button').on('click',function(e){
            e.preventDefault();
            let data_row_id = i++;
            const fieldHTML = `<div class="form-group" id="form-row_${data_row_id}"><div class="row"><div class="col-lg-4"><input value="" type="text" name="input_name[]" class="form-control" id="input_name" placeholder="@lang('customer.name')"></div><div class="col-lg-3"><select class="form-control" name="input_type[]" id="input_type"> <option value="checkbox">Checkbox</option><option value="input">Input</option><option value="textarea">Textarea</option><option value="radio">Radio</option></select></div><div class="col-lg-4"><input value="" type="text" name="input_label[]" class="form-control" id="input_label" placeholder="@lang('customer.label')"></div><div class="col-lg-1"><button type="button" class="btn btn-danger float-right remove_button" id="remove_button_${data_row_id}" data-id="${data_row_id}"><i class="fas fa-minus-circle"></i></button></div></div></div>`;
            $('#form-row').attr('row-id', data_row_id)
            $('.field_wrapper').prepend(fieldHTML);

        });

        $(document).on('click', '.remove_button', function (e) {
            let id = $(this).attr('data-id')
            $('#form-row_'+id).remove()
        })
    });