search

palcarazm / bootstrap5-toggle

Bootstrap 5 Toggle is a bootstrap plugin/widget that converts checkboxes into toggles.
https://palcarazm.github.io/bootstrap5-toggle/
MIT License
38 stars 4 forks source link

[BUG] Can't receive checked value #61

Closed thevalo closed 2 years ago

thevalo commented 2 years ago

Describe the bug I have lots of pages with bootstrap-toggle. However, on the 'offer create' page, it simply doesn't work. The button turns blue (as expected), and text changes, but on the PHP side, I receive nothing. I even debugged the form on submit - all the fields appear, except the is_service field which is the bootstrap toggle. On all other pages, it works flawlessly. Code of the input toggle is the same. If I remove the bootstrap-toggle, then the value goes through fine - as expected!

To Reproduce Steps to reproduce the behavior and minimal code: N/A

 <div class="form-group row">
                                    {!! Form::label("is_service", "Regular service?:", ["class"=>"col-4 col-form-label"]) !!}
                                    <div class="col-8">
                                        <input type="checkbox" name="is_service" data-toggle="toggle" id="is_service" data-width="100" data-on="Po" data-off="Jo"  style="border: 1px solid black;" data-onstyle="info">
                                    </div>
                                </div>
    $('form').submit(function() {
        console.log($(this).serialize());
         return false;
    });

Expected behavior If I'd toggle the checkbox, it should appear in the request or in the console when using the above script - as in other pages.

Screenshots N/A

Package: (please complete the following information)

Desktop: (please complete the following information)

Smartphone: N/A

Additional context It got me scratching my head for the last few hours. I don't know why. It works on other pages, except this one. There are no extra scripts on the page. Nothing suspicious. The pages are fairly large. On request, I could upload all of them (lots of resources, too)

github-actions[bot] commented 2 years ago

Hi! :wave: Thanks for your issue. You are helping to improve Bootstrap 5 toggle.

palcarazm commented 2 years ago

Hi,

Thanks for your issue.

When a checkbox is unchecked it's not present in the payload.

If you want to have on and off value imply add data-onvalue="on" data-offvalue="off" to set on state value to x and off state value to y. If original checkbox have a value setted, data-onvalue will be ignored preserving the original value.

If this doesn't solve your issue pleas add the html code one time the toggle has been render.

😊

thevalo commented 2 years ago

Hello,

Yes I understand. If the checkbox is unchecked, it returns null (nothing, really). If it's checked, and has no value attribute, will return "on", else, will return the value. But, this is not the case in this issue. Even if I check the checkbox - still returns null. I have even added the attribute data-onvalue="test" to no avail. Remember that it's happening just on this page, on others, it's working fine.

Anyhow, this is the code on the 'problematic' page, the toggler itself is "is_service".

Thanks in advance.

<html lang="sq"><head>
    <title>  Krijo ofertë të re
 |  Mercedes jjj</title>
<!--[if lt IE 11]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="xxx fff">
<meta name="keywords" content="xxx softworks, xxx, xxx fff, fff">
<meta name="author" content="xxx Softworks">
<meta name="csrf-token" content="nHS4dxKC2hCH9avoX9oxdw6ayvGbjMStc5dyynkK">

<!-- Favicon icon -->
<link rel="icon" href="http://yyy.xxx-fff.test/favicon.ico" type="image/x-icon">

<!-- font css -->
<link rel="stylesheet" href="http://yyy.xxx-fff.test/assets/fonts/feather.css">
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

<!-- vendor css -->
<link rel="stylesheet" href="http://yyy.xxx-zzz.test/assets/css/style.css" id="main-style-link">
<link rel="stylesheet" href="http://yyy.xxx-zzz.test/assets/css/customizer.css">

<script src="http://yyy.xxx-zzz.test/assets/js/vendor-all.min.js"></script>

<script src="http://yyy.xxx-zzz.test/assets/js/toastr.min.js"></script>

<link rel="stylesheet" href="http://yyy.xxx-zzz.test/assets/css/toastr.min.css">

<script src="http://yyy.xxx-zzz.test/assets/js/momentjs-l.js"></script>

<script>
toastr.options = {
    "closeButton": false,
    "debug": false,
    "newestOnTop": true,
    "progressBar": true,
    "positionClass": "toast-bottom-right",
    "preventDuplicates": false,
    "onclick": null,
    "showDuration": "300",
    "hideDuration": "1000",
    "timeOut": "5000",
    "extendedTimeOut": "1000",
    "showEasing": "swing",
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut",
}

moment.locale('sq');
</script>

<style>
    body #toast-container > div {
        opacity: .9;
    }
</style>

<link rel="stylesheet" href="http://yyy.xxx-zzz.test/assets/css/select2.min.css">

<link rel="stylesheet" href="http://yyy.xxx-zzz.test/assets/css/plugins/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="http://yyy.xxx-zzz.test/assets/css/plugins/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="http://yyy.xxx-zzz.test/assets/css/additional-style.css">

<script src="http://yyy.xxx-zzz.test/assets/js/select2.min.js"></script>

    <!-- additional injected head -->

    <link rel="stylesheet" href="http://yyy.xxx-zzz.test/assets/css/select2.min.css">

    <style>
    .pc-header, .page-header {
    position: unset !important;
    left: 0px !important;
    }
    .pc-container {
        top: 0px !important;
    }
</style>
    <!-- select2 custom style -->
<style>
.select2-selection__choice__display {
    color: black !important;
}

/* select:invalid + .select2-container > span.selection > span.select2-selection {
        border-color: #dc3545;
    } */

select:invalid+.select2-container--focus>span.selection>span.select2-selection {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

select:valid+.select2-container>span.selection>span.select2-selection {
    border-color: #28a745;
}

select:valid+.select2-container--focus>span.selection>span.select2-selection {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

#select2-select2_plate_no-container, #select2-select2_owner-container, #select2-select2_offer_id-container, #select2-select2_invoice_id-container, #select2-select2_part_no-container {
    line-height: 3;
    text-align: center;
    height: 50px;
    font-size: 12pt;
}

.select2-selection__arrow {
    height: 45px;
}

.select2-selection--single {
    height: 50px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 10px !important;
}
</style>
<!-- end select2 custom style -->

    <!-- end additional injected head -->

    <style>
        .btn.btn-default.toggle-off {
            border: 1px solid black;
            border-radius: 5px;
        }
    </style>

    <link rel="stylesheet" href="http://yyy.xxx-zzz.test/assets/css/floating-action-button.css">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@4.3.2/css/bootstrap5-toggle.min.css" rel="stylesheet">
<style>:root{--vs-colors--lightest:rgba(60,60,60,0.26);--vs-colors--light:rgba(60,60,60,0.5);--vs-colors--dark:#333;--vs-colors--darkest:rgba(0,0,0,0.15);--vs-search-input-color:inherit;--vs-search-input-placeholder-color:inherit;--vs-font-size:1rem;--vs-line-height:1.4;--vs-state-disabled-bg:#f8f8f8;--vs-state-disabled-color:var(--vs-colors--light);--vs-state-disabled-controls-color:var(--vs-colors--light);--vs-state-disabled-cursor:not-allowed;--vs-border-color:var(--vs-colors--lightest);--vs-border-width:1px;--vs-border-style:solid;--vs-border-radius:4px;--vs-actions-padding:4px 6px 0 3px;--vs-controls-color:var(--vs-colors--light);--vs-controls-size:1;--vs-controls--deselect-text-shadow:0 1px 0 #fff;--vs-selected-bg:#f0f0f0;--vs-selected-color:var(--vs-colors--dark);--vs-selected-border-color:var(--vs-border-color);--vs-selected-border-style:var(--vs-border-style);--vs-selected-border-width:var(--vs-border-width);--vs-dropdown-bg:#fff;--vs-dropdown-color:inherit;--vs-dropdown-z-index:1000;--vs-dropdown-min-width:160px;--vs-dropdown-max-height:350px;--vs-dropdown-box-shadow:0px 3px 6px 0px var(--vs-colors--darkest);--vs-dropdown-option-bg:#000;--vs-dropdown-option-color:var(--vs-dropdown-color);--vs-dropdown-option-padding:3px 20px;--vs-dropdown-option--active-bg:#5897fb;--vs-dropdown-option--active-color:#fff;--vs-dropdown-option--deselect-bg:#fb5858;--vs-dropdown-option--deselect-color:#fff;--vs-transition-timing-function:cubic-bezier(1,-0.115,0.975,0.855);--vs-transition-duration:150ms}.v-select{font-family:inherit;position:relative}.v-select,.v-select *{box-sizing:border-box}:root{--vs-transition-timing-function:cubic-bezier(1,0.5,0.8,1);--vs-transition-duration:0.15s}@-webkit-keyframes vSelectSpinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes vSelectSpinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.vs__fade-enter-active,.vs__fade-leave-active{pointer-events:none;transition:opacity var(--vs-transition-duration) var(--vs-transition-timing-function)}.vs__fade-enter,.vs__fade-leave-to{opacity:0}:root{--vs-disabled-bg:var(--vs-state-disabled-bg);--vs-disabled-color:var(--vs-state-disabled-color);--vs-disabled-cursor:var(--vs-state-disabled-cursor)}.vs--disabled .vs__clear,.vs--disabled .vs__dropdown-toggle,.vs--disabled .vs__open-indicator,.vs--disabled .vs__search,.vs--disabled .vs__selected{background-color:var(--vs-disabled-bg);cursor:var(--vs-disabled-cursor)}.v-select[dir=rtl] .vs__actions{padding:0 3px 0 6px}.v-select[dir=rtl] .vs__clear{margin-left:6px;margin-right:0}.v-select[dir=rtl] .vs__deselect{margin-left:0;margin-right:2px}.v-select[dir=rtl] .vs__dropdown-menu{text-align:right}.vs__dropdown-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:var(--vs-border-width) var(--vs-border-style) var(--vs-border-color);border-radius:var(--vs-border-radius);display:flex;padding:0 0 4px;white-space:normal}.vs__selected-options{display:flex;flex-basis:100%;flex-grow:1;flex-wrap:wrap;padding:0 2px;position:relative}.vs__actions{align-items:center;display:flex;padding:var(--vs-actions-padding)}.vs--searchable .vs__dropdown-toggle{cursor:text}.vs--unsearchable .vs__dropdown-toggle{cursor:pointer}.vs--open .vs__dropdown-toggle{border-bottom-color:transparent;border-bottom-left-radius:0;border-bottom-right-radius:0}.vs__open-indicator{fill:var(--vs-controls-color);transform:scale(var(--vs-controls-size));transition:transform var(--vs-transition-duration) var(--vs-transition-timing-function);transition-timing-function:var(--vs-transition-timing-function)}.vs--open .vs__open-indicator{transform:rotate(180deg) scale(var(--vs-controls-size))}.vs--loading .vs__open-indicator{opacity:0}.vs__clear{fill:var(--vs-controls-color);background-color:transparent;border:0;cursor:pointer;margin-right:8px;padding:0}.vs__dropdown-menu{background:var(--vs-dropdown-bg);border:var(--vs-border-width) var(--vs-border-style) var(--vs-border-color);border-radius:0 0 var(--vs-border-radius) var(--vs-border-radius);border-top-style:none;box-shadow:var(--vs-dropdown-box-shadow);box-sizing:border-box;color:var(--vs-dropdown-color);display:block;left:0;list-style:none;margin:0;max-height:var(--vs-dropdown-max-height);min-width:var(--vs-dropdown-min-width);overflow-y:auto;padding:5px 0;position:absolute;text-align:left;top:calc(100% - var(--vs-border-width));width:100%;z-index:var(--vs-dropdown-z-index)}.vs__no-options{text-align:center}.vs__dropdown-option{clear:both;color:var(--vs-dropdown-option-color);cursor:pointer;display:block;line-height:1.42857143;padding:var(--vs-dropdown-option-padding);white-space:nowrap}.vs__dropdown-option--highlight{background:var(--vs-dropdown-option--active-bg);color:var(--vs-dropdown-option--active-color)}.vs__dropdown-option--deselect{background:var(--vs-dropdown-option--deselect-bg);color:var(--vs-dropdown-option--deselect-color)}.vs__dropdown-option--disabled{background:var(--vs-state-disabled-bg);color:var(--vs-state-disabled-color);cursor:var(--vs-state-disabled-cursor)}.vs__selected{align-items:center;background-color:var(--vs-selected-bg);border:var(--vs-selected-border-width) var(--vs-selected-border-style) var(--vs-selected-border-color);border-radius:var(--vs-border-radius);color:var(--vs-selected-color);display:flex;line-height:var(--vs-line-height);margin:4px 2px 0;padding:0 .25em;z-index:0}.vs__deselect{fill:var(--vs-controls-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;cursor:pointer;display:inline-flex;margin-left:4px;padding:0;text-shadow:var(--vs-controls--deselect-text-shadow)}.vs--single .vs__selected{background-color:transparent;border-color:transparent}.vs--single.vs--loading .vs__selected,.vs--single.vs--open .vs__selected{opacity:.4;position:absolute}.vs--single.vs--searching .vs__selected{display:none}.vs__search::-webkit-search-cancel-button{display:none}.vs__search::-ms-clear,.vs__search::-webkit-search-decoration,.vs__search::-webkit-search-results-button,.vs__search::-webkit-search-results-decoration{display:none}.vs__search,.vs__search:focus{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:1px solid transparent;border-left:none;box-shadow:none;color:var(--vs-search-input-color);flex-grow:1;font-size:var(--vs-font-size);line-height:var(--vs-line-height);margin:4px 0 0;max-width:100%;outline:none;padding:0 7px;width:0;z-index:1}.vs__search::-moz-placeholder{color:var(--vs-search-input-placeholder-color)}.vs__search:-ms-input-placeholder{color:var(--vs-search-input-placeholder-color)}.vs__search::placeholder{color:var(--vs-search-input-placeholder-color)}.vs--unsearchable .vs__search{opacity:1}.vs--unsearchable:not(.vs--disabled) .vs__search{cursor:pointer}.vs--single.vs--searching:not(.vs--open):not(.vs--loading) .vs__search{opacity:.2}.vs__spinner{align-self:center;-webkit-animation:vSelectSpinner 1.1s linear infinite;animation:vSelectSpinner 1.1s linear infinite;border:.9em solid hsla(0,0%,39%,.1);border-left-color:rgba(60,60,60,.45);font-size:5px;opacity:0;overflow:hidden;text-indent:-9999em;transform:translateZ(0) scale(var(--vs-controls--spinner-size,var(--vs-controls-size)));transition:opacity .1s}.vs__spinner,.vs__spinner:after{border-radius:50%;height:5em;transform:scale(var(--vs-controls--spinner-size,var(--vs-controls-size)));width:5em}.vs--loading .vs__spinner{opacity:1}</style><style>
h3[data-v-6f584199] {
    margin: 40px 0 0;
}
ul[data-v-6f584199] {
    list-style-type: none;
    padding: 0;
}
li[data-v-6f584199] {
    display: inline-block;
    margin: 0 10px;
}
a[data-v-6f584199] {
    color: #42b983;
}
.hasError[data-v-6f584199] {
    border: 1px solid red;
}
</style><style>
#total-price {
    border: none;
    background-color: transparent;
    resize: none;
    outline: none;
    font-size: 13pt;
    font-weight: bold;
}
</style></head>

<body class="" data-new-gr-c-s-check-loaded="14.1075.0" data-gr-ext-installed="">
    <!-- [ Pre-loader ] start -->

    <!-- [ Pre-loader ] End -->

    <!-- [ Mobile header ] start -->
    <div class="pc-mob-header pc-header bg-dark">
        <div class="pcm-logo">
            <img src="http://yyy.xxx-zzz.test/assets/images/logo.png" width="20%" alt="" class="logo logo-lg"><span class="text-white">jjj</span>
        </div>
        <div class="pcm-toolbar">
            <a href="#!" class="pc-head-link" id="mobile-collapse">
                <div class="hamburger hamburger--arrowturn">
                    <div class="hamburger-box">
                        <div class="hamburger-inner"></div>
                    </div>
                </div>
                <!-- <i data-feather="menu"></i> -->
            </a>
            <a href="#!" class="pc-head-link" id="header-collapse">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
            </a>
        </div>
    </div>
    <!-- [ Mobile header ] End -->

    <!-- [ Header ] start -->
    <header class="pc-header bg-dark">
        <div class="header-wrapper">
            <div class="m-header" style="margin:auto;">
                <a href="http://yyy.xxx-zzz.test" class="b-brand">
                    <img src="http://yyy.xxx-zzz.test/assets/images/logo.png" width="10%" alt="" class="logo logo-lg"><span class="text-white"><span>&nbsp;&nbsp;&nbsp;&nbsp;</span>jjj</span>
                </a>
            </div>
            <div class="ms-auto">
                <ul class="list-unstyled">
                    <li class="pc-h-item" id="realtime_clock_li">
    <p id="realtime_clock" class="pc-head-link me-0" style="width: 285px;">E Martë, 23 Gusht 2022,  16:40:16</p>
</li>
<script>
    var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));

    function updateTime() {
        $('#realtime_clock').html(moment().format("dddd, D MMMM YYYY,  H:mm:ss"));
    }

    if(!mobile) {
        $('#realtime_clock').html(moment().format("dddd, D MMMM YYYY,  H:mm:ss"));
        setInterval(updateTime, 1000);
    } else {
        $('#realtime_clock_li').remove();
    }
</script>

                    <li class="dropdown pc-h-item">
                        <a class="pc-head-link dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false" tabindex="-1">
                            <img src="http://yyy.xxx-zzz.test/assets/images/user/avatar.png" class="user-avtar">
                            <span>
                                <span class="user-name">Valonis Ramadani</span>
                                <span class="user-desc">Pronar</span>
                            </span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end pc-h-dropdown">

                            <a href="http://yyy.xxx-zzz.test/profile/manage" class="dropdown-item" tabindex="-1">
                                <i class="material-icons-two-tone">account_circle</i>
                                <span>Profili</span>
                            </a>
                            <a href="http://yyy.xxx-zzz.test/logout" class="dropdown-item" tabindex="-1">
                                <i class="material-icons-two-tone">chrome_reader_mode</i>
                                <span>Çkyqu</span>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>

        </div>
    </header>
    <!-- [ Header ] end -->

    <!-- [ Main Content ] start -->
        <div class="pc-container" style="margin-left: 0px !important;" data-select2-id="select2-data-13-14l5">
    <div class="pcoded-content" data-select2-id="select2-data-12-5xmi">
        <!-- [ breadcrumb ] start -->
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="page-header-title">
                            <a href="http://yyy.xxx-zzz.test/offers">
                                <h5 class="m-b-10">Ofertat</h5>
                            </a>
                        </div>
                        <span>Krijo ofertë të re</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- [ breadcrumb ] end -->
        <!-- [ Main Content ] start -->
        <div class="row" data-select2-id="select2-data-11-aymm">
            <div class="col-xl-12 col-md-12" data-select2-id="select2-data-10-ic74">
                <div class="card flat-card" data-select2-id="select2-data-9-fhq6">
                    <div class="row-table" data-select2-id="select2-data-8-uviw">
                        <div class="col-sm-12 card-body br" data-select2-id="select2-data-7-ht8w">
                            <div>
                                <p>
                                    <a href="http://yyy.xxx-zzz.test/offers"><i class="fal fa-arrow-alt-left bg-dark text-white p-1"></i></a>
                                    <span style="float: right">Krijo ofertë të re</span>
                                </p>
                            </div>
                                <div class="col-sm-12" data-select2-id="select2-data-6-xq4l">
                                                                        <form method="POST" action="http://yyy.xxx-zzz.test/offers" accept-charset="UTF-8" id="articleForm" data-select2-id="select2-data-articleForm"><input name="_token" type="hidden" value="nHS4dxKC2hCH9avoX9oxdw6ayvGbjMStc5dyynkK">

                                    <div class="form-group row" data-select2-id="select2-data-5-ioes">
    <label for="select2_plate_no" class="col-4
    col-form-label">Tabelat ose numri i shasisë:</label>
    <div class="col-8" data-select2-id="select2-data-4-dxnx">
        <div class="input-group" data-select2-id="select2-data-3-t4r2">
            <select class="select_plate_no form-control select2-hidden-accessible" name="car_uuid" id="select2_plate_no" data-select2-id="select2-data-select2_plate_no" tabindex="-1" aria-hidden="true">
                            </select><span class="select2 select2-container select2-container--default select2-container--below" dir="ltr" data-select2-id="select2-data-1-sj6p" style="width: 766.656px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-select2_plate_no-container" aria-controls="select2-select2_plate_no-container"><span class="select2-selection__rendered" id="select2-select2_plate_no-container" role="textbox" aria-readonly="true" title="Kërko..."><span class="select2-selection__placeholder">Kërko...</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
        </div>
    </div>
</div>

<div class="form-group row">
    <label for="" class="col-4
    col-form-label"></label>
    <div class="col-8">
        <div class="input-group" style="place-content: center">
            <a href="#" id="clearSelections" role="button" class="btn btn-primary"><i class="fal fa-undo-alt"></i></a>
        </div>
    </div>
</div>

<div class="form-group row">
    <label for="select2_owner" class="col-4
    col-form-label">OSE Klienti:</label>
    <div class="col-8">
        <div class="input-group">
            <select class="select_owner form-control select2-hidden-accessible" name="entity_uuid" id="select2_owner" data-select2-id="select2-data-select2_owner" tabindex="-1" aria-hidden="true">
                            </select><span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="select2-data-14-dum4" style="width: 766.656px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-select2_owner-container" aria-controls="select2-select2_owner-container"><span class="select2-selection__rendered" id="select2-select2_owner-container" role="textbox" aria-readonly="true" title="Kërko..."><span class="select2-selection__placeholder">Kërko...</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
        </div>
    </div>
</div>

<script>
    var part_specificEntityOrCar;
    var ownerSelect;

    $(document).ready(function() {
        $('.select_plate_no').select2({
            placeholder: 'Kërko...',
            minimumInputLength: 4,
            multiple: false,
            required: true,
            ajax: {
                url: '/api/queryCarPlates',
                dataType: 'json',
                delay: 300,
                processResults: function (data) {
                    return {
                        results:  $.map(data, function (item) {
                            return {
                                text: item.plate_no + ' (' + item.chassis_no + ')',
                                id: item.car_uuid,
                                car_make_model: item.car_make_brand.make_brand_name + ' ' + item.vehicle_model,
                                car_chassis_no: item.chassis_no,
                                car_make_year: item.make_year,
                            }
                        })
                    };
                },
            cache: true
            },
            language: {
                inputTooShort: function () {
                    return "Shkruaj më shumë shkronja...";
                },
                searching: function() {
                    return "Prisni...";
                },
                noResults: function() {
                    return "Nuk u gjet asnjë";
                }
            }}).on('select2:select', function (e) {
                var data = e.params.data;
                $('#car_make_model').val(data['car_make_model']);
                $('#chassis_no').val(data['car_chassis_no']);
                $('#make_year').val(data['car_make_year']);
                $('.select_owner').val(null).trigger('change');
                $('.select_owner').attr('disabled', 'disabled');
                $('.select_offer_id').val(null).trigger('change');
                $('.select_offer_id').attr('disabled', 'disabled');
                $('.select_invoice_id').val(null).trigger('change');
                $('.select_invoice_id').attr('disabled', 'disabled');

                                    getCarOwners(data['id']);
                            });

                            $(".select_plate_no").select2("open");

            $('.select_owner').select2({
            placeholder: 'Kërko...',
            minimumInputLength: 4,
            multiple: false,
            required: true,
            ajax: {
                url: '/api/queryClientsAndBussinesses',
                dataType: 'json',
                delay: 300,
                processResults: function (data) {
                    return {
                        results:  $.map(data, function (item) {
                            return {
                                text: item.full_name + ' (' + item.human_identifier + ')',
                                id: item.unique_id,
                            }
                        })
                    };
                },
            cache: true
            },
            language: {
                inputTooShort: function () {
                    return "Shkruaj më shumë shkronja...";
                },
                searching: function() {
                    return "Prisni...";
                },
                noResults: function() {
                    return "Nuk u gjet asnjë";
                }
            }}).on('select2:select', function (e) {
                var data = e.params.data;
                $('.select_plate_no').val(null).trigger('change');
                $('.select_plate_no').attr('disabled', 'disabled');
                $('.select_offer_id').val(null).trigger('change');
                $('.select_offer_id').attr('disabled', 'disabled');
                $('.select_invoice_id').val(null).trigger('change');
                $('.select_invoice_id').attr('disabled', 'disabled');
                                    $('#offer_to').empty().append(`<option value="${data.id}">${data.text}</option>`);

                            });

            function jQ_append(id_of_input, text){
                var input_id = '#'+id_of_input;
                $(input_id).val($(input_id).val() + text + ', ');
            }
            function getCarOwners(car_uuid) {
                $('#car_owners').val('');
                                    ownerSelect = $('#offer_to');
                                $.ajax({
                url: '/api/queryCarOwners/'+car_uuid,
                type: 'GET',
                dataType: 'json',
                    success: function(res) {
                        ownerSelect.empty();
                        if(res.length > 0) {
                            res.forEach(item => {
                                jQ_append('car_owners', item.full_name);
                                var option1 = new Option(item.full_name + ' (' + item.human_identifier + ')', item.unique_id, true, true);
                                ownerSelect.append(option1).trigger('change');
                            });
                        } else {
                            ownerSelect.empty();
                            ownerSelect.attr('disabled', true);
                        }
                    }
                 });
            }

            $('#clearSelections').on('click', function() {
                $('.select_plate_no').val(null).trigger('change');
                $('.select_owner').val(null).trigger('change');
                $('.select_offer_id').val(null).trigger('change');
                $('.select_invoice_id').val(null).trigger('change');
                $('.select_plate_no').removeAttr('disabled');
                $('.select_owner').removeAttr('disabled');
                $('.select_offer_id').removeAttr('disabled');
                $('.select_invoice_id').removeAttr('disabled');
                $('#car_make_model').val('');
                $('#chassis_no').val('');
                $('#make_year').val('');
                                    $('#offer_to').empty().html('<option>-</option>');
                            });

                            $('#from_date').val(moment().format('YYYY-MM-DD'));

                            $('#to_date').val(moment().add(5, 'days').format('YYYY-MM-DD'));

    });
</script>

                                        <div class="form-group row">
                                            <label for="car_make_model" class="col-4 col-form-label">Vetura:</label>
                                            <label for="chassis_no" class="col-4 col-form-label">Numri i shasisë:</label>
                                            <label for="make_year" class="col-4 col-form-label">Viti i prodhimit:</label>
                                            <div class="input-group">
                                                <div class="col-4">
                                                    <input type="text" class="form-control" name="car_make_model" id="car_make_model" disabled="">
                                                </div>
                                                <div class="col-4">
                                                    <input type="text" class="form-control" name="chassis_no" id="chassis_no" disabled="">
                                                </div>
                                                <div class="col-4">
                                                    <input type="text" class="form-control" name="make_year" id="make_year" disabled="">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="dates" class="col-4 col-form-label">Data:</label>
                                            <div class="col-8">
                                                <div class="input-group">
                                                    <input type="date" class="form-control text-center" placeholder="Nga" name="from_date" id="from_date">
                                                    <span class="input-group-addon" style="align-self: center">&nbsp;&nbsp;deri&nbsp;&nbsp;</span>
                                                    <input type="date" class="form-control text-center" placeholder="Deri" name="to_date" id="to_date">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="items" class="col-12 col-form-label text-center">Artikujt:</label>
                                            <div class="col-12">
                                                <div id="app" data-v-app=""><div data-v-6f584199=""><!-- <p
        v-for="error of v$.$errors"
        :key="error.$uid"
      >
    <strong>{{ error.$validator }}</strong>
    <small> on property</small>
    <strong>{{ error.$property }}</strong>
    <small> says:</small>
    <strong>{{ error.$message }}</strong>
    </p> --><table class="table table-hover table-responsive" data-v-6f584199=""><thead class="thead-inverse" data-v-6f584199=""><tr data-v-6f584199=""><th data-v-6f584199="">Nr.</th><th class="col-3" data-v-6f584199="">Numri i pjesës</th><th class="col-4" data-v-6f584199="">Përshkrimi</th><th class="col-1" data-v-6f584199="">Njësia</th><th class="col-1" data-v-6f584199="" style="width: 10%;">Sasia</th><th class="col-1" data-v-6f584199="" style="width: 9.5%;">Çmimi</th><th class="col-2 text-center" data-v-6f584199="">Shuma</th><th data-v-6f584199=""></th></tr></thead><tbody data-v-6f584199=""><tr data-v-6f584199=""><td data-v-6f584199="">1 <input type="hidden" name="id[]" value="46e9c7e8-8ae6-4fc4-ae69-7fe7a0f35831" data-v-6f584199=""></td><td data-v-6f584199=""><input name="part_no[]" id="46e9c7e8-8ae6-4fc4-ae69-7fe7a0f35831" class="form-control" type="text" minlength="2" data-v-6f584199=""><!-- <div class="error" v-if="item.part_no.$each">Numri i pjesës duhet të shkruhet.</div> --><!-- <span class="form-group__message" v-if="!v$.items_table[part_no].required">* required</span> --></td><td data-v-6f584199=""><textarea name="part_name[]" class="form-control" type="text" required="" minlength="2" data-v-6f584199=""></textarea></td><td data-v-6f584199=""><select class="form-control" name="part_unit[]" data-v-6f584199=""><option selected="" value="pcs" data-v-6f584199="">pcs</option><option value="set" data-v-6f584199="">set</option><option value="L" data-v-6f584199="">L</option><option value="hrs" data-v-6f584199="">hrs</option><option value="Ah" data-v-6f584199="">Ah</option><option value="ml" data-v-6f584199="">ml</option><option value="km" data-v-6f584199="">km</option><option value="kg" data-v-6f584199="">kg</option><option value="g" data-v-6f584199="">g</option></select></td><td data-v-6f584199=""><input name="part_qty[]" onkeypress="return event.charCode == 46 || (event.charCode >= 48 &amp;&amp; event.charCode <= 57)" class="form-control" type="number" step="0.01" required="" data-v-6f584199=""></td><td data-v-6f584199=""><input name="part_price[]" onkeypress="return event.charCode == 46 || (event.charCode >= 48 &amp;&amp; event.charCode <= 57)" class="form-control" type="number" step="0.01" required="" data-v-6f584199="" style="width: 90px;"></td><td data-v-6f584199=""><input name="part_total[]" class="form-control text-center border-0" type="text" disabled="" data-v-6f584199="" style="background-color: transparent; font-size: 16px;"></td><td data-v-6f584199=""><button type="button" class="btn btn-danger btn-md btn-block" data-v-6f584199="">X</button></td></tr><tr data-v-6f584199=""><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td colspan="3" data-v-6f584199=""><input type="checkbox" id="hasDiscount" class="form-check-input" data-v-6f584199=""> <label for="hasDiscount" data-v-6f584199="">Zbritje?</label></td></tr><!--v-if--><!--v-if--><tr data-v-6f584199=""><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td colspan="3" data-v-6f584199="">Totali: <span class="fw-bold" data-v-6f584199="" style="font-size: 18px;">€1.00</span></td></tr><tr data-v-6f584199=""><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td colspan="1" data-v-6f584199="">Pagesë:<br data-v-6f584199=""><input type="number" class="form-control" name="amount_paid" id="amount_paid" step="0.01" data-v-6f584199=""></td></tr><tr data-v-6f584199=""><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td data-v-6f584199=""></td><td colspan="3" data-v-6f584199="">Mbetur: <span class="fw-bold" data-v-6f584199="" style="font-size: 18px;">€1.00</span></td></tr></tbody></table><div class="text-center" data-v-6f584199=""><button type="button" class="btn btn-outline-primary" data-v-6f584199="">Shto artikull</button></div><!--<div class="text-center">
            <a id="" class="btn btn-primary btn-lg btn-block" @click="submitForm()">Valido</a>
      </div>
      <div class="text-center">
        <textarea name="" id="verbose_log" cols="70" rows="15" refs="logg"></textarea>
      </div>--></div></div>
                                                <script src="http://yyy.xxx-zzz.test/js/app.js"></script>
                                            </div>
                                        </div>
                                    </form></div>
                                    <div class="form-group row">
                                        <label for="is_service" class="col-4 col-form-label">Servis i rregullt?:</label>
                                        <div class="col-8">
                                            <div class="toggle btn btn-secondary off" data-toggle="toggle" role="button" tabindex="0" style="width: 100px; height: 43.375px;"><input type="checkbox" data-toggle="toggle" id="is_service" data-width="100" data-on="Po" data-off="Jo" name="is_service" style="border: 1px solid black;" data-onstyle="info"><div class="toggle-group"><label for="is_service" class="btn btn-info toggle-on">Po</label><label for="is_service" class="btn btn-secondary toggle-off">Jo</label><span class="toggle-handle btn"></span></div></div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="odometer" class="col-4 col-form-label">Odometri (km):</label>
                                        <div class="col-8">
                                            <div class="input-group">
                                                <input class="form-control" autocomplete="off" name="odometer" type="number" id="odometer">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="extra_notes" class="col-4 col-form-label">Shënime shtesë:</label>
                                        <div class="col-8">
                                            <div class="input-group">
                                                <textarea class="form-control" rows="3" cols="5" name="extra_notes" id="extra_notes"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="offer_to" class="col-4 col-form-label">Oferta në emër të:</label>
                                        <div class="col-8">
                                            <div class="input-group">
                                                <select name="offer_to" id="offer_to" class="form-control pc-selectpicker">
                                                    <option value="" selected="">Zgjedhni së pari veturën ose klientin...</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="form-group row">
                                        <label for="authorizer_uuid" class="col-4 col-form-label">Autorizuar nga:</label>
                                        <div class="col-8">
                                        <div class="input-group">
                                            <select name="authorizer_uuid" id="authorizer_uuid" class="form-control pc-selectpicker" required="">
                                                                                                <option value="a805451a-0d4a-49ce-b0fe-a80bf4bcccec">Ilir Muçiqi</option>
                                                                                                <option value="ec6e8635-439c-4e27-aace-613eca248e73">Driton Muçiqi</option>
                                                                                            </select>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="accepted_at" class="col-4
                                        col-form-label">Oferta e pranuar?</label>
                                        <div class="col-8">
                                            <div class="input-group">
                                                <select name="accepted_at" id="accepted_at" class="form-control pc-selectpicker">
                                                    <option value="0" selected="">Jo</option>
                                                    <option value="1">Po</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-center">
                                        <input class="btn btn-success text-center" name="add" id="addBtn" type="submit" value="Krijo ofertë">
                                    </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- [ Main Content ] end -->

    <!-- Required Js -->

    <script src="http://yyy.xxx-zzz.test/assets/js/plugins/bootstrap.min.js"></script>
    <script src="http://yyy.xxx-zzz.test/assets/js/plugins/feather.min.js"></script>
    <script src="http://yyy.xxx-zzz.test/assets/js/pcoded.min.js"></script>

    <script src="http://yyy.xxx-zzz.test/assets/js/plugins/clipboard.min.js"></script>

    <script src="http://yyy.xxx-zzz.test/assets/js/plugins/jquery.dataTables.min.js"></script>
    <script src="http://yyy.xxx-zzz.test/assets/js/plugins/dataTables.bootstrap4.min.js"></script>
    <script src="http://yyy.xxx-zzz.test/assets/js/plugins/dataTables.responsive.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@4.3.2/js/bootstrap5-toggle.min.js"></script>
</body></html>
palcarazm commented 2 years ago

It's very strange, in the raw code I see that the hidden checkbox that it's synchronized with the toggle has name="is_service". So it should be present on the payload...

I will perform some tests and give you a feedback as soon as possible.

thevalo commented 2 years ago

Thank you. If you need other views of the script that it's working (or other resources) that might help you in the review, please tell me. Otherwise, can you do a simple debug with jQuery on form submit to console.log all the inputs that are being submitted - the is_service is missing on this seemingly strange page - but not on other pages!

Beware that if you remove the bootstrap5-toggle.min.js it will magically work.

palcarazm commented 2 years ago

I'm not able to reproduce the issue 😞.

127 0 0 1_5500_debug_form jquery html

I let you the HTML file use for debug

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap 5 Toggle | Debug App</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.5.0/build/styles/default.min.css">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>

    <!--Local-->
    <!--<link rel="stylesheet" href="../css/bootstrap5-toggle.css">
    <script src="../js/bootstrap5-toggle.js"></script>-->

    <!--CDN-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@4.3.2/css/bootstrap5-toggle.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@4.3.2/js/bootstrap5-toggle.min.js">
    </script>
</head>

<body class="bg-light p-4">
    <div id="appHeader" class="container">
        <div class="row align-items-center">
            <div class="col-10">
                <h1 class="text-primary fw-light">Debug App</h1>
            </div>
            <div class="col-2 text-end">
                <code>Bootstrap 5.1.3</code>
            </div>
        </div>
        <div class="px-1 text-muted fw-bolder" id="description">Form submit</div>
        <hr>
    </div>
    <main class="container bg-white px-3 py-3 rounded">
        <form>
            <div class="mb-3">
                <input type="checkbox" name="is_service" data-toggle="toggle" id="is_service" data-width="100" data-on="Po" data-off="Jo"  style="border: 1px solid black;" data-onstyle="info">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </main>
</body>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.5.0/build/highlight.min.js"></script>
<script>
    $('input[data-toggle="toggle"]').bootstrapToggle();
    $('form').submit((e) => {
        e.preventDefault();
        $('pre').remove();
        $('main').append(
            $('<pre>').append(
                $('<code>')
                    .html(JSON.stringify($('form').serializeArray(), null, 2))
                    .addClass("highlight language-json")
            )
        );
        hljs.highlightAll();
    });
</script>

</html>
thevalo commented 2 years ago

Strange enough. There could be a, possibly, script interference? I'll try to remove all other scripts and see how it goes. I'm baffled. Sorry for the bug-labeled thing, surely it's not a bug with bootstrap5-toggle itself. I'll close it as can't repro soon.

thevalo commented 2 years ago

After hours and hours of debugging the code, part by part, I have fixed it. The problem seems to be an extra </div> tag. See the pic. attached. I don't know why, only this input was omitted due to this extra closing tag. Maybe I'll need an addon to validate the whole structure, maybe....

image

Sorry once again for this trouble I've caused.

palcarazm commented 2 years ago

Nice!! You founded the root cause.

Don't worry for opening the issue.

If want you can rate this bootstrap plugin in openbase