dimanche 11 avril 2021

How to make a select field (year list) unique per ID or number and remove the selected year from the dropdown list?

I'm new to laravel, I'm trying to achieve a functionality when selecting a year for a specific ID or number that year will be removed from the dropdown list or it will not be listed. Below I added screenshots and my code so far. I'm actually struggling to figure this out. :( I appreciate any help. my UI: Screenshot Tax UI Please let me know if you need to check my controller.php and other code blocks.

Summarize task: For the Tax Declaration Year, setup dynamic year list, from 2022 to 30 years forward, and make sure that the current year will not be listed in the dropdown if the user has inputted Tax declaration for that year for that PIN ID

Here's my code: JS:

$(document).ready(function () {
    // for date input
    $("#form-owner-info").on('submit', function (e) {
        e.preventDefault()
        $('#form-owner-info').find('span.error').remove() //resets error messages

        let _url = null;
        let data = $('#form-owner-info').serialize();
        if ($('#form-owner-info').hasClass('new')) {
            _url = 'add-owner-info'
            data = $('#form-owner-info').serialize() + "&pin_id=" + pin_id
        } else {
            _url = 'update-owner-info'
        }

        $.ajax({
            url: _url,
            type: "POST",
            data: data,
            success: function (response) {
                if (response.code == 200) {
                    //console.log(response)
                    $('#form-owner-info').removeClass('new');
                    swal({ title: "Success!", text: response.message, type: "success", buttonsStyling: false, confirmButtonClass: "btn btn-success" })
                }
            },
            error: function (response) {
                console.warn(response.responseJSON.errors)
                $.each(response.responseJSON.errors, function (field_name, error) {
                    if ($(document).find('#form-owner-info [name=' + field_name + ']').next().is('span')) {
                        $(document).find('#form-owner-info [name=' + field_name + ']').next('span').remove()
                    }
                    $(document).find('#form-owner-info [name=' + field_name + ']').after('<span class="error text-danger">' + error + '</span>')

                })
            }
        })
    })
    $('[data-toggle="tooltip"]').tooltip()
})

//for dynamic year list
$(document).ready(function () {
    var d = new Date();
    for (var i = 0; i <= 40; i++) {
        var option = "<option value=" + parseInt(d.getFullYear() + i) + ">" + parseInt(d.getFullYear() + i) + "</option>"
        $('[id*=DropDownList1]').append(option);
    }
});

Blade.php:

<div class="content menu-css">
    <div class="container-fluid">
        
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header card-header-primary">
                        <h4 class="card-title">Tax Information</h4>
                        <p class="card-category">Please complete all fields</p>
                    </div>
                    <div class="form-group">&nbsp</div>
                    <div class="card-body">
                        @if (session('status'))
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="alert alert-success">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <i class="material-icons">close</i>
                                    </button>
                                    <span></span>
                                </div>
                            </div>
                        </div>
                        @endif
                        <div class="form_container">
                            <form action="/action_page.php" id="tax-dec-form" >
                                @csrf
                                <div class="form-group">
                                    <label for="taxdeclarationnumber">Tax Declaration No:</label>
                                    <input value="" type="text" class="form-control" name="tax_declaration_number" placeholder="Input Tax Declaration No..">
                                </div>
                                <div class="form-group">&nbsp</div>
                                <div class="form-group">
                                    <label for="current">Current RPT: </label>
                                    <input type="text" value="" class="form-control" name="current_rpt" placeholder="Input Current RPT..">
                                </div>

                                <div class="form-group">
                                    <label for="years" class="bmd-label-static">Select Tax Declaration Year</label>
                                    <select id="DropDownList1" class="custom-select mr-sm-2" data-style="btn btn-secondary" name="year">

                                    </select>
                                </div>
                            </form>
                        </div>
                        <div class="clearfix">&nbsp;</div>
                        <div id="form-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal" id="btn-save1">Save</button>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire