Modal form not send data to spring boot controller - spring-boot

I have a view made with bootstrap modal, but this form not send data to my controller. When print data from console I have only null values. My view is following:
modal-form
My code in the frontend is:
<!-- new modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<form th:action="#{/creconocida/addNew}" method="post">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h5 class="modal-title w-100" id="exampleModalLabel">Nueva
Comunidad Reconocida</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Código
único</span>
</div>
<input type="text" class="form-control" id="codigo"
name="codigoN" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon2">Nombre</span>
</div>
<input type="text" class="form-control" id="nombre"
name="nombreN" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">Número
familias</span>
</div>
<input type="number" class="form-control" id="numero"
name="numeroN" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Nacionalidad</label>
</div>
<select class="custom-select" id="nacionalidad"
name="nacionalidadN">
<option selected>Seleccione...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="modal-footer ">
<button type="submit" class="btn btn-primary mr-auto">Guardar</button>
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</form>
</div>
Add new method in controller
#PostMapping("/addNew")
public String addNew(ComunidadReconocida creconocida) {
System.out.println("Guardando comunidad "+creconocida.getNam_m());//get only null values
asentamientoService.addNew(creconocida);
return "redirect:/creconocida/listar";
}
I can create a new entity but I can't send the values ​​entered in the form. How could I do to capture the values ​​and pass them to the controller

Your problem is you are not indicates to Spring that you want a '#RequestParam'.
public String addNew(#RequestParam ComunidadReconocida creconocida)

Related

Please! How I POST data in database using submit button using Ajax in laravel 9?

Please I need your HELP...
I'm trying to send a Post request from a button using Ajax to my controller to do a create. I use laravel 9. I hope you can help me :-D
My blade____________________________________
`
Let us know a bit about Your running goals and experience so we can offer You the best training plan!
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Take a quick survey
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Runner Survey</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form method="POST" action="/" id="survey">
<div class="row mb-3">
<label for="level" class="col-md-4 col-form-label text-md-end">I would describe my current level of fitness as</label>
<div class="col-md-6">
<select name="level" id="level" form="survey" class="form-control" required autocomplete="new-level">
<option value="beginner">Beginner</option>
<option value="intermediate">Intermediate</option>
<option value="advanced">Advanced</option>
</select>
</div>
</div>
<div class="row mb-3">
<label for="distance" class="col-md-4 col-form-label text-md-end">The distance I want to run in km is</label>
<div class="col-md-6">
<select name="distance" id="distance" form="survey" class="form-control" required autocomplete="new-distance">
<option value="5">5</option>
<option value="10">10</option>
</select>
</div>
</div>
<div class="row mb-3">
<label for="time" class="col-md-4 col-form-label text-md-end">How many weeks do you have to achieve it?</label>
<div class="col-md-6">
<select name="time" id="time" form="survey" class="form-control" required autocomplete="new-time">
<option value="4">4</option>
<option value="8">8</option>
<option value="12">12</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button id="savebtn" type="submit" class="btn btn-primary submit" onclick="saveForm('{{ route('forms.store')}}')">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Fin Modal -->
</div>
</div>
</div>
</div>
</div>
#endsection
function saveForm(route){
const request = $.ajax({
Method: 'POST',
url: route,
}).done(function(response) {
$(#savebtn).attr('form', response);
});
}
My controller______________________________________________________
public function store(FormsRequest $request)
{
$data = $request->validated();
$name = $data['name'];
$userId= $data['user_id'];
$level= $data['level'];
$time=$data['time'];
$distance=$data['distance'];
$result = $this->formService->store($name, $userId, $level, $time, $distance);
return 'Created successfully!';
}
I need to turn in an assignment and I'm stuck...

How to insert a selected dropdownlist text into database in laravel

I want to insert buyer name from dropdown list into database. how can I select my dropdown selected text and save it into database table. I have a dropdown field and some text field to insert data into my database table.
Here is my controller:
function GetBuyerList(){
$buyerList=BuyerModel::all();//get data from table
// $buyerList=BuyerModel::lists('buyer_name','id');
//return $buyer_name;
return view('order',compact('buyerList'));//send data to view
}
function CreateOrder(Request $request){
$user_id= $request->input('user_id');
$buyer_name= $request->input('buyer_name');
$style_name= $request->input('style_name');
$season= $request->input('season');
$brand_name= $request->input('brand_name');
$garmments_type= $request->input('garmments_type');
$order_quantity= $request->input('order_quantity');
$fob= $request->input('fob');
$total_fob= $request->input('total_fob');
$merchandiser_name= $request->input('merchandiser_name');
$order_no= $request->input('order_no');
$order_date= $request->input('order_date');
$status= $request->input('status');
$input_date= $request->input('input_date');
$note= $request->input('note');
$result=OrderModel::insert([
'user_id'=>$user_id,
'buyer_name'=>$buyer_name,
'style_name'=>$style_name,
'season'=>$season,
'brand_name'=>$brand_name,
'garmments_type'=>$garmments_type,
'order_quantity'=>$order_quantity,
'fob'=>$fob,
'total_fob'=>$total_fob,
'merchandiser_name'=>$merchandiser_name,
'order_no'=>$order_no,
'order_date'=>$order_date,
'status'=>$status,
'input_date'=>$input_date,
'note'=>$note,
]);
return view('order');
}
Here is my blade code
#extends('Layout.app')
#section('content')
<br><br><br><br>
<div class="orderDiv container col-8">
<div class="d-flex justify-content-center align-items-center my-10 ">
<div class="card full-width">
<div class="card-header">
<h3>Orders</h3>
</div>
<div class="card-body">
<form>
<div class="row">
<div class="col-md-2">
<label for="category" class=" control-label">Buyer Name</label>
</div>
<div class="col-md-4">
<select class="buyerselect form-control full-width" id="buyerSelectId" name="buyer" required="">
<option value="0" disabled="true" selected="true">-Select Buyer-</option>
#foreach($buyerList as $buyer)
<option value="{{$buyer->id}}">{{$buyer->buyer_name}}</option>
#endforeach
{{-- <option selected value="">Select Buyer</option>--}}
{{-- <option value='564'>564</option>--}}
</select>
{{-- {!! Form::select('id',$buyerList,null,['class'=>'form-control']) !!}--}}
</div>
<div class="col-md-4">
<button id="buyerModalBtnId" type="button" class="btn btn-primary" data-mdb-toggle="modal" data-mdb-target="#addBuyerModal"><i class="fas fa-plus"></i>
Add New Buyer
</button>
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Style#</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Season</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Brand</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-md-2">
<label for="category" class=" control-label">Garments Type</label>
</div>
<div class="col-md-4">
<select class="form-control select2" name="garmentstype" style="width: 75%;" required="">
<option selected value="">Select Garments</option>
<option value='Baby Jacket'>Baby Jacket</option>
</select>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary" data-mdb-toggle="modal" data-mdb-target="#exampleModal2"><i class="fas fa-plus"></i>
Add Germants Type
</button>
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Company Name</label>
</div>
<div class="col-md-4">
<select class="form-control full-width" name="buyer" required="">
<option selected value="">Select Company</option>
<option value='564'>Friend's Knittings</option>
<option value='Benetton'>Debonair Ltd</option>
<option value='HM'>Orbitex Knitting</option>
<option value='CA'>DPQSL</option>
</select>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Order Qty</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">FOB</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Concern Merchandiser</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-2">
<div class="col-md-2">
<label for="category" class=" control-label">orderDate</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">OrderNo</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-12">
<center>
<button type="submit" class="btn btn-success">Submit</button>
</center>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- modal 1 -->
<div class="modal fade" id="addBuyerModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Buyer</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<form>
<div class="modal-body">
<div id="addBuyerInformationId" class="form-group">
<label for="tstock" class="col-sm-2 control-label">Buyer Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="addBuyerNameId" name="garmentstype" placeholder="Input Buyer Name">
</div><br>
<label for="tstock" class="col-sm-2 control-label">Buyer Country</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="addBuyerCountryId" name="garmentstype" placeholder="Input Buyer Country">
</div>
<br>
</div><br>
<br>
<label for="tstock" class="col-sm-2 control-label">User Id</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="addBuyerUserId" name="garmentstype" placeholder="Input User Id">
</div>
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
<button id="buyerAddConfirmButton" type="button" class="btn btn-primary" >Save changes</button>
</div>
<!-- modal2 -->
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Create Garments Type</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<form>
<div class="modal-body">
<div class="form-group">
<label for="tstock" class="col-sm-2 control-label">Select</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="garmentstype" name="garmentstype" placeholder="Garments Type">
</div>
<br>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<!-- End your project here-->
#endsection
I already insert data into buyer table
My custom.js file
$(document).ready(function () {
$('#VisitorDt').DataTable();
$('.dataTables_length').addClass('bs-select');
});
$('#buyerModalBtnId').click(function() {
$('#addBuyerModal').modal('show');
});
$('#buyerAddConfirmButton').click(function() {
// var id=$(this).data('id');
var name = $('#addBuyerNameId').val();
var country = $('#addBuyerCountryId').val();
var user=$('#addBuyerUserId').val();
BuyerAdd(name, country,user);
});
function BuyerAdd(buyerName, buyerCountry,buyerUserId) {
if (buyerName.length == 0) {
toastr.error('Buyer Name is Empty !');
} else if (buyerCountry.length == 0) {
toastr.error('Buyer Description is Empty !');
}
else if (buyerUserId.length == 0) {
toastr.error('Buyer User Id is Empty !');
}
else {
$('#buyerAddConfirmButton').html("<div class='spinner-border spinner-border-sm' role='status'></div>"); ///Animation Set
axios.post('/BuyerAdd', {
name: buyerName,
country: buyerCountry,
user_id:buyerUserId,
})
.then(function(response) {
$('#buyerAddConfirmButton').html("Add");
if (response.status == 200) {
if (response.data == 1) {
// alert('Success');
$('#addBuyerModal').modal('hide');
toastr.success('Add Successfull');
$('#buyerAddConfirmButton').addClass('data-mdb-dismiss');
//getServicesData();
} else {
// alert('Failed');
$('#addBuyerModal').modal('hide');
toastr.error('Add Failed !!');
//getServicesData();
}
} else {
$('#addBuyerModal').modal('hide');
toastr.error('Something Went Wrong');
}
})
.catch(function(error) {
$('#addBuyerModal').modal('hide');
toastr.error('Something Went Wrong');
});
}
}
// Order Data Part
Regardless of some formatting errors and codestyle, here is the short workflow for your question:
validate requested data
instead of insert, use OderModel::create($request->input())
make the fields in your Order Model fillable
if you still need to edit the request data, create a new array and then give it to the create method with (OrderModel::create($newModifiedRequestedData);)
Frontend/view is clear?
The request name which you are using in controller for buyer as buyer_name it should be same as select tag in name with buyer_name.
Replace you blade file with below code and check*
#extends('Layout.app')
#section('content')
<br><br><br><br>
<div class="orderDiv container col-8">
<div class="d-flex justify-content-center align-items-center my-10 ">
<div class="card full-width">
<div class="card-header">
<h3>Orders</h3>
</div>
<div class="card-body">
<form>
<div class="row">
<div class="col-md-2">
<label for="category" class=" control-label">Buyer Name</label>
</div>
<div class="col-md-4">
<select class="buyerselect form-control full-width" id="buyerSelectId" name="buyer_name" required="">
<option value="0" disabled="true" selected="true">-Select Buyer-</option>
#foreach($buyerList as $buyer)
<option value="{{$buyer->id}}">{{$buyer->buyer_name}}</option>
#endforeach
{{-- <option selected value="">Select Buyer</option>--}}
{{-- <option value='564'>564</option>--}}
</select>
{{-- {!! Form::select('id',$buyerList,null,['class'=>'form-control']) !!}--}}
</div>
<div class="col-md-4">
<button id="buyerModalBtnId" type="button" class="btn btn-primary" data-mdb-toggle="modal" data-mdb-target="#addBuyerModal"><i class="fas fa-plus"></i>
Add New Buyer
</button>
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Style#</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Season</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Brand</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-md-2">
<label for="category" class=" control-label">Garments Type</label>
</div>
<div class="col-md-4">
<select class="form-control select2" name="garmentstype" style="width: 75%;" required="">
<option selected value="">Select Garments</option>
<option value='Baby Jacket'>Baby Jacket</option>
</select>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary" data-mdb-toggle="modal" data-mdb-target="#exampleModal2"><i class="fas fa-plus"></i>
Add Germants Type
</button>
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Company Name</label>
</div>
<div class="col-md-4">
<select class="form-control full-width" name="buyer" required="">
<option selected value="">Select Company</option>
<option value='564'>Friend's Knittings</option>
<option value='Benetton'>Debonair Ltd</option>
<option value='HM'>Orbitex Knitting</option>
<option value='CA'>DPQSL</option>
</select>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Order Qty</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">FOB</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">Concern Merchandiser</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-2">
<div class="col-md-2">
<label for="category" class=" control-label">orderDate</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-2">
<label for="category" class=" control-label">OrderNo</label>
</div>
<div class="col-md-8">
<input type="text" id="typeText" class="form-control" />
</div>
</div>
<div class="row py-3">
<div class="col-md-12">
<center>
<button type="submit" class="btn btn-success">Submit</button>
</center>
</div>
</div>
</div>
</form>

create editing modal in laravel 7

i'm trying to make a timesheet table that takes inputs from attendance machine, and it can be edited later on, my table look like this:
![timesheet table][1]: https://i.stack.imgur.com/5D1ap.png
this is the popup to edit time and reason of editing the half day :
[edit time and reason][2]: https://i.stack.imgur.com/tPa37.png
however, when i pick time and reason, i can't update them in the table, this is the code of modal:
<div class="modal fade" id="change-date" tabindex="-1" role="dialog" aria-labelledby="change-dateLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="change-dateLabel">Changer l'heure</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="">
<div class="form-group">
<input type="time" class="form-control">
</div>
<div class="form-group">
<select name="motif" class="form-control">
<option value="">MCD</option>
<option value="">MTA</option>
<option value="">CA</option>
<option value="">AIR</option>
<option value="">MLD</option>
<option value="">CS</option>
</select>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary">Enregistrer</button>
</div>
</div>
</div>
</div>
</div>
is there any solution to make it working?
Okay, you need a couple of things for your modal form to work.
You need to add route in your form open tag (see my example below)
Your form submit button at the modal-footer div needs to be inside the form open and close tags (see my exaple below)
Your submit button must have a type of submit for it to send to form parameters. (see my example below)
You need a method in your controller to process your form request and save into the database (Hope you know that.).
<div class="modal fade" id="change-date" tabindex="-1" role="dialog" aria-labelledby="change-dateLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
{{ Form::open(['action' => 'YourController#update_method','method' =>'PATCH']) }}
<div class="modal-header">
<h5 class="modal-title" id="change-dateLabel">Changer l'heure</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{-- <form action=""> remove --}}
<div class="form-group">
<input type="time" class="form-control">
</div>
<div class="form-group">
<select name="motif" class="form-control">
<option value="">MCD</option>
<option value="">MTA</option>
<option value="">CA</option>
<option value="">AIR</option>
<option value="">MLD</option>
<option value="">CS</option>
</select>
</div>
{{-- </form> remove --}}
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
{{-- Your submit button should look like this --}}
<button type="submit" class="btn btn-primary">Enregistrer</button>
</div>
{{ Form::close() }} <!-- end form -->
</div>
</div>
</div>
</div>
Also make sure the function you put on your form's action attribute is defined on your routes file like this below
Route::patch('url', 'YourController#update_method')->name('model.update_method');.

Bootstrap Modal is just showing last item's Data of collection rather than specific ID's data

I'am new to laravel. I've a sort of Restaurant Management System's dashboard.
I am showing menu on a blade. By selecting Category from dropdown its showing list of Dishes. Each Dish Which contains Dish Ingredients and Dish AddOn as well. Now I've Edit Button on each dish's Ingredient which will show the Modal against specific Dish's Ingredient. The problem is when I click the edit button, Modal Popup and it shows the Last Dish's Ingredients rather than the Dish's Ingredient which is intended to Edit.
#foreach($items as $item)
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="menu-block">
<div class="menu-content">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="dish-img"><img height="120px" width="120px" src="{{asset($item['image'])}}" alt="" class="img-circle"></div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
<div class="dish-content">
<h5 class="dish-title">
<b>{{$item['name']}}</b>
<i class="ft-edit"></i>
<i class="ft-trash-2"></i>
</h5>
<h6><b>Ingredients:</b></h6>
#foreach($add_ingredients as $add_ingredient)
#foreach($dish_ing as $dish_in)
#if($item['id']==$dish_in->dish_id&&$dish_in->ingredient_id==$add_ingredient['id'])
<span class="dish-meta" >/{{$add_ingredient['name']}}</span>
#endif
#endforeach
#endforeach
<i class="ft-edit"></i>Edit
<button type="button" class="btn" data-toggle="modal" data-target="#ingredient"><i class="ft-plus-square" ></i>Add</button>
<h6><b>Addons:</b></h6>
#foreach($add_items as $add_item)
#if($add_item['dish_id']==$item['id'])
<span class="dish-meta" >/{{$add_item['name']}} </span>
#endif
#endforeach
<i class="ft-edit"></i>Edit
Modal Section:
<div class="modal fade editaddon{{$item['id']}}" id="">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form class="form form-horizontal" method="get" action="">
#csrf
<div class="form-body">
<h4 class="form-section"><i class="ft-user"></i>Dish Addon form</h4>
<div class="form-group row">
<label class="col-md-3 label-control" for="projectinput6">Category Name</label>
<div class="col-md-9">
<select id="projectinput6" name="id2" class="form-control">
<option value="none" selected="" disabled="">Select Relevant Category</option>
#foreach($add_items as $add_item)
#if($add_item['dish_id']==$item['id'])
<option value="{{$add_item['id']}}">{{$add_item['name']}}</option>
#endif
#endforeach
</select>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
All I want is to Show the Specific Dish's Ingredient in the Modal When Editing.
Any help will highly appreciated
I have modified the snippet and added the modal box in the main foreach loop. Also i have removed the dot from the data target.
#foreach($items as $item)
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="menu-block">
<div class="menu-content">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="dish-img"><img height="120px" width="120px" src="{{asset($item['image'])}}" alt="" class="img-circle"></div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
<div class="dish-content">
<h5 class="dish-title">
<b>{{$item['name']}}</b>
<i class="ft-edit"></i>
<i class="ft-trash-2"></i>
</h5>
<h6><b>Ingredients:</b></h6>
#foreach($add_ingredients as $add_ingredient)
#foreach($dish_ing as $dish_in)
#if($item['id']==$dish_in->dish_id&&$dish_in->ingredient_id==$add_ingredient['id'])
<span class="dish-meta">/{{$add_ingredient['name']}}</span>
#endif
#endforeach
#endforeach
<i class="ft-edit"></i>Edit
<button type="button" class="btn" data-toggle="modal" data-target="#ingredient"><i class="ft-plus-square"></i>Add</button>
<h6><b>Addons:</b></h6>
#foreach($add_items as $add_item)
#if($add_item['dish_id']==$item['id'])
<span class="dish-meta">/{{$add_item['name']}} </span>
#endif
#endforeach
<i class="ft-edit"></i>Edit
<div class="modal fade editaddon-{{$item['id']}}" >
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form class="form form-horizontal" method="get" action="">
#csrf
<div class="form-body">
<h4 class="form-section"><i class="ft-user"></i>Dish Addon form</h4>
<div class="form-group row">
<label class="col-md-3 label-control" for="projectinput6">Category Name</label>
<div class="col-md-9">
<select id="projectinput6" name="id2" class="form-control">
<option value="none" selected="" disabled="">Select Relevant Category</option>
#foreach($add_items as $add_item)
#if($add_item['dish_id']==$item['id'])
<option value="{{$add_item['id']}}">{{$add_item['name']}}</option>
#endif
#endforeach
</select>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforach

bootstrap modal onclick closing

I have form to submit signon inside a modal. It is not allowing me to enter email and password. When I click on the form element it is closing.What am I doing wrong here.It is supposed to enter the email and password to submit
Form Modal
<div id="click_signin" class="modal New-Bouncing-popup" role="dialog">
<div class="modal-dialog bounce animated modal-ku">
<!-- Modal content-->
<div class="modal-content1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body row">
<div class="col-sm-6 left-side">
<h1>Surplus<br>Forex.</h1>
<p>Build your profitable forex career.</p>
<br>
<p>Login with social media</p>
<a class="fb" href="#" target="_blank">Login With Facebook</a>
<a class="tw" href="#" target="_blank">Login With Twitter</a>
</div><!--col-sm-6-->
<div class="col-sm-6 right-side">
<h1>Login</h1>
<p>Fill the below given fields to Login</p>
<br/>
<!--Form with header-->
<div class="form">
<div class="form-group">
<label for="form2">Your email</label>
<input type="text" id="form2" class="form-control">
</div>
<div class="form-group">
<label for="form4">Your password</label>
<input type="password" id="form4" class="form-control">
</div>
<div class="text-xs-center frm_grp">
Login
</div>
</div>
<!--/Form with header-->
</div><!--col-sm-6-->
</div>
</div>
</div>
</div>

Resources