We Keep Coding

The PUT method is not supported for this route. Supported methods: POST. in laravel 8

hello i have problem ith my filter table fitur, how to solved this problem The PUT method is not supported for this route. Supported methods: POST. ?
this is the button in my blade view
<!-- Modal Add Tanggal -->
<div class="modal fade" id="addTanggal" tabindex="-1" role="dialog" aria-labelledby="addTanggalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content ">
<div class="modal-header">
<h5 class="modal-title mb-0" id="addTanggalLabel">Pilih Periode Transaksi</h5>
</div>
<div class="modal-body">
<!-- Card body -->
<form role="form" action="{{ route('rekap.penjualan.filter') }}" method="POST">
#csrf
#method('put')
<div class="row input-daterange datepicker align-items-center">
<div class="col">
<div class="form-group">
<label class="form-control-label">Awal Tanggal</label>
<input class="form-control" id="created_at" name="awal" placeholder="Awal Tanggal" type="text" value="">
</div>
</div>
<div class="col">
<div class="form-group">
<label class="form-control-label">Akhir Tanggal</label>
<input class="form-control" name="akhir" placeholder="Akhir Tanggal" type="text" value="">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Lihat Data</button>
</div>
</form>
</div>
</div>
</div>
this is the route
//rekapan transaksi Penjualan
Route::get('rekapan/penjualan', '\App\Http\Controllers\TransaksiController#rekappenjualan')->name('rekap.penjualan');
Route::post('rekapan/penjualan/filter', '\App\Http\Controllers\TransaksiController#rekapfilter')->name('rekap.penjualan.filter');
Route::delete('rekapan/penjualan/delete/{id}', '\App\Http\Controllers\TransaksiController#delete')->name('rekap.penjualan.delete')->middleware('admin');
Route::get('rekapan/penjualan/detail', '\App\Http\Controllers\TransaksiController#detailrekappenjualan')->name('rekap.penjualan.detail');
this is the controller
public function rekapfilter(Request $request)
{
$start = $request->awal;
$end = $request->akhir;
$transaksis = Transaksi::select('kode_transaksi', 'bayar', 'kembali', 'created_at', DB::raw('sum(total_barang) as total_beli'), 'subtotal', 'user_id', 'daftar_pelanggan_id')
->groupBy('kode_transaksi', 'bayar', 'kembali', 'created_at', 'subtotal', 'user_id', 'daftar_pelanggan_id')
->whereBetween(DB::raw('DATE(created_at)'), array($start, $end))->get();
return view('pages.rekapan.penjualan', compact('transaksis'));
}

Try removing #method('put') in you blade template,
Or change this
Route::post('rekapan/penjualan/filter', '\App\Http\Controllers\TransaksiController#rekapfilter')->name('rekap.penjualan.filter');
Onto this
Route::put('rekapan/penjualan/filter', '\App\Http\Controllers\TransaksiController#rekapfilter')->name('rekap.penjualan.filter');

Click function is not working in my web application

I have a modal for signup and signin. Inside signup modal when I want to go to signin modal from here and click to signin button then signup modal will hide and signin modal will appear. From same procedure happen to signin modal.
But here these signin or signup button inside the modal haven't work.
I have also used e.preventDefault(); inside the js function but still doesn't work.
I don't find out the script problem since I am not good in JS.
signin modal
<div class="modal fade bs-modal-sm" id="signin_modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<br>
<div class="bs-example bs-example-tabs">
<ul id="signin_myTab" class="nav nav-tabs">
<center><li id="signin_Modal_tab" class="active">SIGN IN</li></center>
</ul>
</div>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="signin">
<span id="student_signin_error"></span>
<form class="form-horizontal" id="signin_form">
<input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
<fieldset>
<!-- Sign In Form -->
<!-- Email input-->
<div class="control-group">
<div class="controls">
<input required="" id="signin_email" name="email" class="col-ld-12 col-md-12 col-sm-12" type="email" placeholder="Email" class="input-medium">
</div>
</div>
<div class="control-group">
<div class="controls">
<input required="" id="signin_password" name="password" class="col-ld-12 col-md-12 col-sm-12" type="password" placeholder="Password" class="input-medium">
</div>
</div>
<!-- Button -->
<div class="control-group">
<div class="controls modal_submit_button">
<button type="button" class="btn btn-success" id="signin_form_submit_button">Sign In</button>
</div>
</div>
<div class="control-group">
<div class="controls modal_submit_button">
Don't have an account ! Click here to
Sign Up
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</center>
</div>
</div>
</div>
</div>
Script
$(document).ready(function(){
$('.signup_from_signin_modal').click(function(e) {
e.preventDefault();
$('#signin_Modal').modal('hide');
$('#myModal').modal('show');
});
});
If I called alert() inside that script function it will work.
But $('#signin_Modal').modal('hide'); this function doesn't work.
Anybody Help please ?
Thanks in advance.

You have accidentally in your jQuery selector put signin_Modal ,
instead you should be trying to select signin_modal .
This is just something that happens from time to time in coding, happy hacking :)

Bootstrap stacking inputs on div resize

I would like to know how to use Bootstrap responsive columns when resizing a containing div, and not just the viewport size.
I would like the inputs inside the form to stack side by side as I make the modal wider.
Html :
<button>open
</button>
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog" id="pesquisa_modal" style="pointer-events: none">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white" id="header" style="cursor: move">
Modal
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-auto">
<label for="Form1">Form1</label>
<input type="text" class="form-control" id="Form1">
</div>
<div class="form-group col-auto">
<label for="Form2">Form2</label>
<input type="text" class="form-control" id="Form2" >
</div>
<div class="form-group col-auto">
<label for="Form3">Form3</label>
<input type="text" class="form-control" id="Form3">
</div>
<div class="form-group col-auto">
<label for="Form4">Form4</label>
<input type="text" class="form-control" id="Form4">
</div>
</div>
</form>
</div>
</div>
</div>
Fiddle : https://jsfiddle.net/p204kwjz/6/
Can I make the inputs continue to stack horizontally as I enlarge the containing div?
The problem is that that the inputs are not "fluid" when I enlarge the div wide enough to fit them all in a row. Also, when the containing div is too small they overflow the div horizontally.
The context here is that the forms will be created dynamically, so I need some kind of smart layouting.

If you want your columns to take up the full width (stack horizontally) in bootstrap use col-md-12 on your form and wrap it in a div with class form-row. Basically bootstrap assumes each row is composed of 12 columns.
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog" id="pesquisa_modal" style="pointer-events: none">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white" id="header" style="cursor: move">
Modal
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form1">Form1</label>
<input type="text" class="form-control" id="Form1">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form2">Form2</label>
<input type="text" class="form-control" id="Form2" >
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form3">Form3</label>
<input type="text" class="form-control" id="Form3">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form4">Form4</label>
<input type="text" class="form-control" id="Form4">
</div>
</div>
</form>
</div>
</div>
</div>
Here is a fiddle.

The form-group and the col-auto classes aren't playing nicely. You can achieve fluid inputs by nesting col-auto inside form-group
fiddle
<button>open
</button>
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog" id="pesquisa_modal" style="pointer-events: none">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white" id="header" style="cursor: move">
Modal
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group">
<div class="col-auto">
<label for="Form1">Form1</label>
<input type="text" class="form-control" id="Form1">
</div>
</div>
<div class="form-group">
<div class="col-auto">
<label for="Form2">Form2</label>
<input type="text" class="form-control" id="Form2">
</div>
</div>
<div class="form-group">
<div class="col-auto">
<label for="Form3">Form3</label>
<input type="text" class="form-control" id="Form3">
</div>
</div>
<div class="form-group">
<div class="col-auto">
<label for="Form4">Form4</label>
<input type="text" class="form-control" id="Form4">
</div>
</div>
</div>
</form>
</div>
</div>

You are using bootstrap 4.
In bootstrap 4, if you code for medium, say 2 divs of col-md-6 and use in smaller screen, div takes the full width and stacking happens, ie: both the divs are one above the other.
div {
display: flex;
margin: 0px;
padding 0px;
}
.col-md-6 {
/* Assuming that col-md-6 width is 1000px */
width: 1000px;
}
<div>
<div class="col-md-6" style="background-color:red;">
Sri harsha
</div>
<div class="col-md-6" style="background-color:blue;">
Achyuthuni
</div>
</div>
That is because, unlike Bootstrap 3, Bootstrap 4 is made using flex boxes.
To see how flex works, look into this link
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Javascript - How to pass data from table into select options in modal?

Sorry for my bad english before. I have already pass data to a modal bootstrap. and already have successed passing data to an input in modal. but i dont know how to pass into a select option in modal.
how to do that? and displaying in select option with data.
Thanks in advance
here some of my code:
Get data from table:
<a href="javascript:;"
data-id="<?php echo $s1['sub_menuid']?>"
data-mainid="<?php echo $s1['main_menuid']?>"
data-nama="<?php echo $s1['nama_submenu']?>"
data-link="<?php echo $s1['link']?>"
data-icon="<?php echo $s1['icon']?>"
class="green" data-toggle="modal" data-target="#modal-edit" data-rel="tooltip" title="Edit">
<i class="ace-icon fa fa-pencil bigger-130"></i>
</a>
passing into modal via javascript
$('#modal-edit').on('show.bs.modal', function (event) {
var div = $(event.relatedTarget) // Tombol dimana modal di tampilkan
var modal = $(this)
// Isi nilai pada field
modal.find('#sub_menuid').attr("value",div.data('id'));
modal.find('#main_menuid').attr("value",div.data('mainid'));
modal.find('#nama_submenu').attr("value",div.data('nama'));
modal.find('#link').attr("value",div.data('link'));
/*modal.find('#icon').attr("value",div.data('icon'));*/
});
modal-edit:
<div aria-hidden="true" aria-labelledby="ModalLabel" role="dialog" tabindex="-1" id="modal-edit" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 class="modal-title"><b>Edit Sub Menu Level 1</b></h4>
</div>
<form class="form-horizontal" id="form-edit" action="<?php echo base_url('sub_menu_level_1/edit')?>" method="post" enctype="multipart/form-data" role="form">
<div class="modal-body">
<div class="form-group">
<label class="col-md-3 col-sm-2 control-label">Nama Sub Menu</label>
<div class="col-md-8">
<input type="hidden" id="sub_menuid" name="sub_menuid">
<input type="text" id="nama_submenu" class="form-control" name="nama_submenu" placeholder="Nama menu">
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-2 control-label">Pilih Main Menu</label>
<div class="col-md-8">
<select class="form-control" id="main_menuid" name="main_menuid">
<option value=""></option>
<?php foreach($main_menu as $mm) { ?>
<option value="<?php echo $mm['main_menuid']?>"><?php echo ucwords($mm['nama_mainmenu'])?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-2 control-label">Link</label>
<div class="col-md-8">
<input type="text" id="link" class="form-control" name="link" placeholder="link">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal"> Batal</button>
<button id="btn-submit-edit" class="btn btn-info" type="submit"> Simpan </button>
</div>
</form>
</div>
</div>
</div>
<!-- END Modal edit -->

use
modal.find("#main_menuid").val(div.data('mainid'));
here's a sample.
$('#modal-edit').on('show.bs.modal', function (event) {
var div = $(event.relatedTarget) // Tombol dimana modal di tampilkan
var modal = $(this)
// Isi nilai pada field
modal.find('#sub_menuid').attr("value",div.data('id'));
modal.find("#main_menuid").val(div.data('mainid'));
modal.find('#nama_submenu').attr("value",div.data('nama'));
modal.find('#link').attr("value",div.data('link'));
/*modal.find('#icon').attr("value",div.data('icon'));*/
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a href="javascript:;"
data-id="1"
data-mainid="3"
data-nama="abcd"
data-link="abcd"
data-icon="abcd"
class="green" data-toggle="modal" data-target="#modal-edit" data-rel="tooltip" title="Edit">
<i class="ace-icon fa fa-pencil bigger-130"></i>click me
</a>
<div aria-hidden="true" aria-labelledby="ModalLabel" role="dialog" tabindex="-1" id="modal-edit" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 class="modal-title"><b>Edit Sub Menu Level 1</b></h4>
</div>
<form class="form-horizontal" id="form-edit" action="<?php echo base_url('sub_menu_level_1/edit')?>" method="post" enctype="multipart/form-data" role="form">
<div class="modal-body">
<div class="form-group">
<label class="col-md-3 col-sm-2 control-label">Nama Sub Menu</label>
<div class="col-md-8">
<input type="hidden" id="sub_menuid" name="sub_menuid">
<input type="text" id="nama_submenu" class="form-control" name="nama_submenu" placeholder="Nama menu">
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-2 control-label">Pilih Main Menu</label>
<div class="col-md-8">
<select class="form-control" id="main_menuid" name="main_menuid">
<option value="1">val1</option>
<option value="2">val2</option>
<option value="3">val3</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-2 control-label">Link</label>
<div class="col-md-8">
<input type="text" id="link" class="form-control" name="link" placeholder="link">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal"> Batal</button>
<button id="btn-submit-edit" class="btn btn-info" type="submit"> Simpan </button>
</div>
</form>
</div>
</div>
</div>

How to pass a query string to a bootstrap modal popup in php

I want to open a particular record in modal pop up for that i want to use query string to pass id to that modal popup which is on the same page after opening and displaying the data user can edit it and save it.
My code is as follows :
<a class="btn btn-info" data-toggle="modal" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
<div class="modal fade" id="myModalDetail">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Edit Products Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<form role="form" name="Insertdb" method="post" action="Insert_code/edit-products.php">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Name</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodName" value="<?=$prodPrice ?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Price</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodPrice" placeholder="Enter product price">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Type</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productType" placeholder="Enter product type">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input name="button1" type="submit" class="btn btn-primary">
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>

As far i can understand your question, you are having problem in passing the id to Modal, if yes, then you can do the following:
In your a-href code use data-id:
<a class="btn btn-info open_modal" data-toggle="modal" data-id="<?php echo productid;?>" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
Javascript:
$(document).on("click", ".open_modal", function () {
var product_id = $(this).data('id');
});