LARAVEL 9: Data from form modals not successfully saved to database when id_jenisizin value == 1 || id_jenisizin == 2 - PHP

akhiratunnisa
November 29, 2022
252 views
0 votes
2 Answers

I’m creating an employee leave form, with 3 categories of permissions coming from another table, namely: "Terlambat", "Pulang Cepat ", "Sakit".
select option for categories

For "SAKIT" category, the data was successfully saved to the database because there are no jam_mulai and jam_selesai to be filled in.
form for category "SAKIT"

For "Terlambat", "Pulang Cepat " categories. if selected, the jam_mulai and jam_selesai form will appear. as well as the jml_jam field I created in the controller too. However, when submitted, the data that I DD($IZIN) does not appear and returns to the index.blade.php page.
form for "TERLAMBAT" and "PULANG CEPAT"

this is the response on the network side when inspected:
preview
header in network

this is the code for FORM MODALS ADD DATA PERMISSION:

enter code here    {{-- FORM PENGAJUAN IZIN--}}
{{-- bbootsrapt clockpicker  --}}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.js"></script>

<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModal" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Form Permohonan Izin</h4>
            </div>
                   
            <div class="modal-body">
                <form class="input" action="{{ route('izinstore')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('POST')
                    <div class="form-group">
                        <label for="id_karyawan" class="col-form-label">Nama</label>
                        <input type="text" class="form-control" id="id_karyawan" value="{{Auth::user()->name}}" readonly>
                        <input type="hidden" class="form-control" name="id_karyawan" id="id_karyawan" value="{{$karyawan}}" hidden>
                    </div>
                    <div class="form-group col-sm" id="jenisizin">
                        <label for="id_jenisizin" class="col-form-label">Kategori Izin</label>
                        <select name="id_jenisizin" id="id_jenisizin" class="form-control">
                            <option>-- Pilih Kategori --</option>
                            @foreach ($jenisizin as $data)
                                <option value="{{ $data->id}}" 
                                    {{ old('id_jenisizin') == $data->id ? 'selected' : '' }}
                                    >{{ $data->jenis_izin }}
                                </option>
                            @endforeach
                        </select> 
                    </div>
                    <div class="form-group">
                        <label for="keperluan" class="col-form-label">Keperluan</label>
                        <input type="text" class="form-control" name="keperluan" id="keperluan" required>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="">
                                {{-- <form class="" action="#"> --}}
                                    <div class="form-group">
                                        <label for="tgl_mulai" class="form-label">Tanggal Mulai</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datepicker-autoclose3" name="tgl_mulai" onchange=(jumlahhari()) autocomplete="off" required>
                                            <span class="input-group-addon bg-custom b-0"><i class="mdi mdi-calendar text-white"></i></span>
                                        </div>
                                    </div>
                                {{-- </form> --}}
                            </div>
                        </div>
                       
                        <div class="col-sm-6">
                            <div class="">
                                {{-- <form class="" action="#"> --}}
                                    <div class="form-group">
                                        <label for="tgl_selesai" class="form-label">Tanggal Selesai</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datepicker-autoclose4" name="tgl_selesai"  onchange=(jumlahhari()) autocomplete="off" required>
                                            <span class="input-group-addon bg-custom b-0"><i class="mdi mdi-calendar text-white"></i></span>
                                        </div>
                                    </div>
                                {{-- </form> --}}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6" id="jmulai">  
                            <div class="">
                                <label for="jam_mulai">Dari Jam</label>
                                <div class="input-group clockpicker pull-center" data-placement="top" data-align="top" autocomplete="off" data-autoclose="true">
                                    <input type="text" class="form-control" name="jam_mulai" id="mulai" value="{{ old('jam_mulai') }}">
                                    <span class="input-group-addon">
                                        <span class="fa fa-clock-o"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                               
                        <div class="col-lg-6" id="jselesai">
                            <div class="">
                                <label for="jam_selesai">Sampai Jam</label>
                                <div class="input-group clockpicker pull-center" data-placement="top" data-align="top" autocomplete="off" data-autoclose="true">
                                    <input type="text" class="form-control" name="jam_selesai" id="selesai" value="{{ old('jam_selesai') }}">
                                    <span class="input-group-addon">
                                        <span class="fa fa-clock-o"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group col-sm" id="jumlahhari">
                        <label for="jml_hari" class="col-form-label">Jumlah Hari</label>
                        <input type="text" class="form-control" name="jml_hari" id="jml" readonly>
                    </div>


                    <div class="form-group col-sm"  id="jumlahjam">
                        {{-- <label for="jml_jam" class="col-form-label">Jumlah Jam</label> --}}
                        <input type="hidden" class="form-control" name="jml_jam" value="{{old('jml_jam')}}" id="jam">
                    </div>

                    <div class="form-group col-sm">
                        <input type="hidden" class="form-control" name="status" id="status" value="Pending" hidden>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success" value="save">Send</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
    
<script type="text/javascript">
//show clockpicker 
    jQuery(function(j){
        j('.clockpicker').clockpicker()
            .find('input').change(function()
            {
                console.log(this.value);
            });
        var input = j('#single-input').clockpicker({
            placement: 'bottom',
            align: 'left',
            autoclose: true,
            'default': 'now'
        });
    });

//show/hide clockpicker when id_jenisizin selected
    $(function()
    {
        $('#jmulai').prop("hidden", true);
        $('#jselesai').prop("hidden", true);
        // $('#jumlahjam').prop("hidden", true);
        $('#jumlahhari').prop("hidden", true);

        $('#jenisizin').on('change', function(e)
        {
            if(e.target.value== 1 || e.target.value== 2)
            {
                $('#jmulai').prop("hidden", false);
                $('#jselesai').prop("hidden", false);
                // $('#jumlahjam').prop("hidden", false);
                $('#jumlahhari').prop("hidden", false);

                //selisih waktu jika terlambat
                if(e.target.value== 1)
                {
                    //set nilai jam_mulai
                    $('#mulai').val('08:00');
                    $('#mulai').attr('readonly', false);
                    $('#mulai').css('background-color' , '#DEDEDE');
                }else {

                    //set nilai jam_selesai
                    $('#selesai').val('17:00');
                    $('#selesai').attr('readonly', false);
                    $('#selesai').css('background-color' , '#DEDEDE');
                }
                // alert('DATA ADA');
            } else {
                $('#jmulai').prop("hidden", true);
                $('#jselesai').prop("hidden", true);
                // $('#jumlahjam').prop("hidden", true);
                $('#jumlahhari').prop("hidden", false);
            }
            // alert('id:' + e.target.value);
        });
    });

// =========================================================
//datepicker for tgl_mulai & tgl_selesai
    $('#datepicker-autoclose3').datepicker({
        autoclose: true,
    });

    $('#datepicker-autoclose4').datepicker({
        autoclose: true,
    });

    function jumlahhari(){
        var start= $('#datepicker-autoclose3').val();
        var end  = $('#datepicker-autoclose4').val();

        var start_date= new Date(start);
        var end_date  = new Date(end) ;
        var daysOfYear= [];

        //mendapatkan jumlah hari izin jika sakit
        for (var d = start_date; d <= end_date; d.setDate(d.getDate() + 1)){
            //cek workdays
            let tgl = new Date(d);
            if(tgl.getDay() !=0 && tgl.getDay() !=6){
                daysOfYear.push(tgl);
                console.log(tgl);
            } else{
                console.log("hari Libur" + tgl.getDay());
            };
        };

        //mengambil value tanggal mulai
        $('#start_date').on('change', function(){
            jumlahhari();
        });
        //mengambil value tanggal selesai
        $('#end_date').on('change', function(){
            jumlahhari();
        });

        console.info(daysOfYear);
        $('#jml').val(daysOfYear.length ?? 0);
    };

</script>


<!-- jQuery  -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/modernizr.min.js"></script>
<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/waves.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>

{{--  plugin js --}}
<script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>


{{-- // Datatable init js  --}}
<script src="assets/pages/datatables.init.js"></script>
<script src="assets/js/app.js"></script>

{{-- // Plugins Init js --}}
<script src="assets/pages/form-advanced.js"></script>

this is the code store data in CONTROLLER:

public function store(Request $request)
{
    $karyawan = Auth::user()->karyawans->id;
    // dd($request->id_jenisizin);
    if($request->has('jam_mulai') && $request->has('jam_selesai'))
    {
        if($request->id_jenisizin == 1 || $request->id_jenisizin == 2)
        {
            // dd($request->all());
            $validate = $request->validate([
                'id_karyawan'  => 'required',
                'id_jenisizin' => 'required',
                'keperluan'    => 'required',
                'tgl_mulai'    => 'required',
                'tgl_selesai'  => 'required',
                'jam_mulai'    => 'required',
                'jam_selesai'  => 'required',
                'jml_hari'     => 'required',
                'jml_jam'      => 'required',
                'status'       => 'required',
            ]);
            // dd($validate);

            $izin = New Izin;
            $izin->id_karyawan = $karyawan;
            $izin->id_jenisizin= $request->id_jenisizin;
            $izin->keperluan   = $request->keperluan;
            $izin->tgl_mulai   = Carbon::now()->format("Y-m-d");
            $izin->tgl_selesai = Carbon::now()->format("Y-m-d");
            $izin->jam_mulai   = $request->jam_mulai;
            $izin->jam_selesai = $request->jam_selesai;
            $izin->jml_hari    = $request->jml_hari;

            $jammulai  = Carbon::parse($request->jam_mulai);
            $jamselesai= Carbon::parse($request->jam_selesai);
            $time_range= $jamselesai->diff($jammulai)->format("%H:%I");

            $izin->jml_jam     = $time_range;
            $izin->status      = 'Pending';

            $izin->save();

            dd($izin);
        
            return redirect()->back()->withInput();
        }else{
            // dd($request->all());

            $validate = $request->validate([
                'id_karyawan'  => 'required',
                'id_jenisizin' => 'required',
                'keperluan'    => 'required',
                'tgl_mulai'    => 'required',
                'tgl_selesai'  => 'required',
                'jml_hari'     => 'required',
                'status'       => 'required',
            ]);

            // dd($validate);

            $izin = New Izin;
            $izin->id_karyawan = $karyawan;
            $izin->id_jenisizin= $request->id_jenisizin;
            $izin->keperluan   = $request->keperluan;
            $izin->tgl_mulai   = Carbon::now()->format("Y-m-d");
            $izin->tgl_selesai = Carbon::now()->format("Y-m-d");
            $izin->jml_hari    = $request->jml_hari;
            $izin->status      = 'Pending';

            $izin->save();
            // dd($izin);
           
            return redirect()->back()->withInput();
        };
    }
        
}

and this is the PERMISSION table in laragon database:
table IZIN in database

Answers

- PiyushSapariya
- November 29, 2022 at 10:03 am
- 0 votes
0
You can try to print error in blade file, for that below code may help you.

Controller code
```
if($validator->fails()) {
    return Redirect::back()->withErrors($validator);
}
```
In blade file
```
@if($errors->any())
    {{ implode('', $errors->all('<div>:message</div>')) }}
@endif
```
Login or Signup to reply.

First remove duplicate logic, like:

public function store(Request $request)
{
    $karyawan = Auth::user()->karyawans->id;

    $rules = [
        'id_karyawan'  => 'required',
        'id_jenisizin' => 'required',
        'keperluan'    => 'required',
        'tgl_mulai'    => 'required',
        'tgl_selesai'  => 'required',
        'jml_hari'     => 'required',
        'status'       => 'required',
    ];

    $needsJmlJam = $request->id_jenisizin == 1
        || $request->id_jenisizin == 2;

    if ($needsJmlJam) {
        $rules = array_replace($rules, [
            'jam_mulai'    => 'required',
            'jam_selesai'  => 'required',
            'jml_jam'      => 'required',
        ]);
    }

    $request->validate($rules);

    $izin = New Izin;
    $izin->id_karyawan = $karyawan;
    $izin->id_jenisizin= $request->id_jenisizin;
    $izin->keperluan   = $request->keperluan;
    $izin->tgl_mulai   = Carbon::now()->format("Y-m-d");
    $izin->tgl_selesai = Carbon::now()->format("Y-m-d");
    $izin->jml_hari    = $request->jml_hari;
    $izin->status      = 'Pending';

    if ($needsJmlJam) {
        $izin->jam_mulai   = $request->jam_mulai;
        $izin->jam_selesai = $request->jam_selesai;

        $jammulai  = Carbon::parse($request->jam_mulai);
        $jamselesai= Carbon::parse($request->jam_selesai);
        $time_range= $jamselesai->diff($jammulai)->format("%H:%I");

        $izin->jml_jam     = $time_range;
    }

    $izin->save();

    return redirect()->back()->withInput();
}

Then somewhere in your view (.blade.php file), show the Validation-errors, like:

@if($errors->any())
    <div class="alert alert-danger show" role="alert">
        <strong>Whoops!</strong> There were some problems with your input.<br>
        <ul>
            @foreach ($errors->all() as $fieldError)
                <li>{{$fieldError}}</li>
            @endforeach
        </ul>
    </div>
@endif

Please signup or login to give your own answer.

Click here to cancel reply.

LARAVEL 9: Data from form modals not successfully saved to database when id_jenisizin value == 1 || id_jenisizin == 2 – PHP

Answers