I have created a form for Making Category and on the same page I am displaying the categories in form of tables. In front of each category there is a Add button to add subcategory. I want to display a modal which has a form for subcategory .
I am not able to add subcategory. When I click submit the submitted details are displayed in raw form and it is selecting only Id 1 everytime
Controller:
public function subcat(Request $request, $id)
{
$data = new SubCategories();
$data->name = $request->input('name');
$data->categories_id=$id;
if($request->hasfile('image')){
$file = $request->file('image');
$extension = $file->getClientOriginalExtension();
$filename = time().'.'.$extension;
$file->move('uploads/subcategory/',$filename);
$data->image = $filename;
}else{
return $request;
$data->image = '';
}
$data->save();
return redirect('/admin/addCategory')->with('Success', 'SubCategory Added');
}
Blade
#extends('admin.master');
#section('content');
<div class="content-wrapper">
<div class="row">
<div class="container">
<form action="{{route('store')}}" method="POST">
{{csrf_field()}}
<label for="cat_name">Category Name</label>
<input type="text" name="cat_name" class="form-control">
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
<div class="row">
<div class="container">
<table class="table table-dark">
<tr>
<thead>
<th>ID</th>
<th>Category</th>
<th>AddSubCategory</th>
</thead>
</tr>
<tbody>
#foreach($category as $col)
<tr>
<td>{{$col->id}}</td>
<td>{{$col->cat_name}}</td>
<td><a class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" href="/admin/category/{{$col->id}}">Add</a></td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add SubCategory</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="{{route('storeSub',[$category[0]->id])}}" method="POST">
{{csrf_field()}}
<label for="name">SubCategory</label>
<input type="text" name="name" class="form-control">
<label for="image">Image</label>
<input type="file" name="image" class="form-control">
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
#endsection
Route
Route::prefix('/admin')->group( function() {
Route::get('/addCategory','\App\Http\Controllers\AdminController#index');
Route::post('/storecat','\App\Http\Controllers\AdminController#categories')->name('store');
Route::get('/addCategory','\App\Http\Controllers\AdminController#show');
Route::post('/category/{id}','\App\Http\Controllers\AdminController#subcat')->name('storeSub');
});
Your probably not summiting a file, so the else statement is the path you are on. Because of this line
else{
return $request; // Remove This
...
Everything stops at that point and you are returning the raw form request data which Laravel is automatically turning into JSON. You'll need to remove that line in order for the rest of your method to continue processing.
Because your modal is out of the foreach.
action="{{route('storeSub',[$category[0]->id])}}" on modal form can't handle above table's values.
Try to move modal area to foreach or, change modal's values with javascript dynamically.
The reason why everytime getting category id = 1 is, Because you're submitting on modal form action like
$category[0]->id
This means every time send category id = 1
So solutions is should be near to this in your blade file;
#extends('admin.master');
#section('content');
<div class="content-wrapper">
<div class="row">
<div class="container">
<form action="{{route('store')}}" method="POST">
{{csrf_field()}}
<label for="cat_name">Category Name</label>
<input type="text" name="cat_name" class="form-control">
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
<div class="row">
<div class="container">
<table class="table table-dark">
<tr>
<thead>
<th>ID</th>
<th>Category</th>
<th>AddSubCategory</th>
</thead>
</tr>
<tbody>
#foreach($category as $col)
<tr>
<td>{{$col->id}}</td>
<td>{{$col->cat_name}}</td>
<td><a class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" href="/admin/category/{{$col->id}}">Add</a></td>
</tr>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add SubCategory</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="{{route('storeSub',[$col->id])}}" method="POST">
{{csrf_field()}}
<label for="name">SubCategory</label>
<input type="text" name="name" class="form-control">
<label for="image">Image</label>
<input type="file" name="image" class="form-control">
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
#endsection
May be the problem is in your javascript file that operate the modal class. Please provide more information on the related script.
Related
I'm having an issue getting data to transfer into my delete confirmation modal.
I've verified my delete route works in removing data from the data base but the issue I'm facing is that I can't pass the contact->id into the modal to access for deletion.
The Modal
<!-- Delete Warning Modal -->
<div class="modal modal-danger fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="Delete" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Contact</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="{{ route('contacts.destroy', 'id') }}" method="post">
#csrf
#method('DELETE')
<input id="id" name="id")>
<h5 class="text-center">Are you sure you want to delete this contact?</h5>
<input id="firstName" name="firstName"><input id="lastName" name="lastName">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-sm btn-danger">Yes, Delete Contact</button>
</div>
</form>
</div>
</div>
</div>
<!-- End Delete Modal -->
Blade call
<td>
<a href="#"
data-id={{$value->id}}
class="btn btn-danger delete"
data-toggle="modal"
data-target="#deleteModal">Delete</a>
</td>
Contact Controller
/**
* Remove the specified resource from storage.
*
* #param int $id
* #return \Illuminate\Http\Response
*/
public function destroy($id)
{
// Need to find all addresses with the contacdt Id and delete them.
Address::where('contact_id', $id)->delete();
Contact::find($id)->delete();
return redirect()->route('contacts.index')->with('success','Contact deleted success');
}
To summarize, my issue is getting jQuery to transfer data to the modal so I can then use it to delete the data... right now my id=null
Jquery code:
$(document).on('click','.delete',function(){
let id = $(this).attr('data-id');
$('#id').val(id);
});
Also in your modal html code:
<input id="id" name="id">
In your bootstrap modal form change the following:
<form action="{{ route('contacts.destroy', 'id') }}" method="post">
#csrf
#method('DELETE')
<input id="id" name="id" hidden>
<h5 class="text-center">Are you sure you want to delete this contact?</h5>
<input id="firstName" name="firstName"><input id="lastName" name="lastName">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-sm btn-danger">Yes, Delete Contact</button>
</div>
</form>
In the above code you are passing the string parameter that is 'id' to the controller so it will detect 'id' which is string you need to bring little bit changes in your controller as well instead of taking 'id' directly as parameter you need to take the request as you are placing the selected id into the input field that is :
<input id="id" name="id" hidden value="">
Add the jquery:
<script>
$(document).on('click','.delete',function(){
let id = $(this).attr('data-id');
$('#id').val(id);
});
</script>
Controller should be:
public function destroy(Request $request)
{
$id= $request->id;
$items = yourModel::find($id);
$items->delete();
return redirect()->route('your page')->with('message', 'report details has been successfully deleted');
}
<div class="table-responsive">
<table class="table table-bordered table-sm">
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Usuario</th>
<th>Acción</th>
</tr>
</thead>
#foreach($users as $user)
<tbody>
<tr>
<td>{{ $user->id }}</td>
<td>{{ $user->nombre }}</td>
<td>{{ $user->login}}</td>
<td>
<i class="bi bi-pencil-square"></i>
<a data-bs-toggle="modal" class="btn btn-warning" data-bs-target="#deleteUserModal_{{$user->id}}"
data-action="{{ route('users.destroy', $user->id) }}"><i class="bi bi-trash"></i></a>
</td>
</tr>
</tbody>
<!-- Delete User Modal -->
<div class="modal fade" id="deleteUserModal_{{$user->id}}" data-backdrop="static" tabindex="-1" role="dialog"
aria-labelledby="deleteUserModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteUserModalLabel">Esta acción es irreversible.</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form action="{{ route('users.destroy', $user->id) }}">
<div class="modal-body">
#csrf
#method('DELETE')
<h5 class="text-center">¿Estás seguro de que quieres eliminar al usuario
{{ $user->nombre }} {{ $user->apellido_materno }} {{ $user->apellido_paterno }} ?</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
<button type="submit" class="btn btn-danger">Si, Eliminar Usuario</button>
</div>
</form>
</div>
</div>
</div>
#endforeach
</table>
</div>
I work Laravel application we display data on datatable. When we update data using Bootstrap modal box using foreach then only fetch last data in the table.
Button where we link:
#foreach($patients as $patient)<br>
<li>
<button type="button"
class="btn btn-primary btn-sm"
data-toggle="modal"
data-target="#myModal{{$patient->patient_id}}">Update Fee</button>
</li>
#endforeach
Modal box:
<div id="myModal{{$patient->patient_id}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="glyphicon glyphicon-edit"></span> Edit Fee</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label> Total Fee</label>
<input type="text" name="fee" class="form-control" readonly value="{{$patient->Fee->Fee}}" />
<input type="hidden" name="id" class="form-control">
</div>
</form>
</div>
</div>
</div>
</div>
Just insert your modal inside #foreach directive (your loop) and that should work on your current code.
#foreach($patients as $patient)<br>
<li>
<button type="button"
class="btn btn-primary btn-sm"
data-toggle="modal"
data-target="#myModal{{$patient->patient_id}}">Update Fee</button>
</li>
<div id="myModal{{$patient->patient_id}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="glyphicon glyphicon-edit"></span> Edit Fee</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label> Total Fee</label>
<input type="text" name="fee" class="form-control" readonly value="{{$patient->Fee->Fee}}" />
<input type="hidden" name="id" class="form-control">
</div>
</form>
</div>
</div>
</div>
#endforeach
I have some rows shown in a table (each one is a row of the related model database table). For each row I show a button that shows a modal asking for confirmation to delete it.
[https://i.stack.imgur.com/tSquD.png][1]
[https://i.stack.imgur.com/gGhSO.png][2]
The modal code is a blade template.
For a table with a single row, i have no problem. I can pass the id as variable to the modal. But i dont know how to send the selected one (logically, its including the modal with the last value of the $subnet var).
What would be the correct way to achieve this?
...
#foreach($subnets as $subnet)
<tr>
<td>{{$subnet->name}}</td>
<td><button type="button" class="btn-xs btn-primary">Edit</button><button type="button" class="btn-xs btn-primary" data-toggle="modal" data-target="#deleteSubnet">Delete</button></td>
</tr>
#endforeach
#include('inc.modals.modal_deleteSubnet',['subnet' => $subnet])
...
<div class="modal fade" id="deleteSubnet" tabindex="-1" role="dialog" aria-labelledby="deleteSubnetLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="deleteSubnetLabel">Delete subnet</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form action="/subnets/{{$subnet->id}}" method="POST">
#csrf
#method('DELETE')
<p>Are you sure you want to delete this subnet ({{$subnet->name}})?<p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<span class="pull-right">
<input class="btn btn-primary" type="submit" value="Delete">
</span>
</form>
</div>
</div>
</div>
</div>
[1]: https://i.stack.imgur.com/tSquD.png
[2]: https://i.stack.imgur.com/gGhSO.png
In your form add a bind id
#foreach($subnets as $subnet)
<tr>
<td>{{$subnet->name}}</td>
<td>
<button type="button" class="btn-xs btn-primary" data-id="{{$subnet->id}}">Edit</button>
<button type="button" class="btn-xs btn-primary" data-id="{{$subnet->id}}" data-toggle="modal" data-target="#deleteSubnet">Delete</button>
</td>
</tr>
#endforeach
Add a "id" in your form to get in jquery. <form method="POST id="formId">
$(document).ready(function () {
// you can add a better validation to button like a ID or class
$("button").each(function () {
$(this).onClick(function () {
var action = "/subnets/" + $(this).data().id;
$("#formId").attr("action", action);
});
});
});
You might wanna check this section on Bootstrap's website.
In your case this could be translated to:
Add data-id="{{ $subnet->id }}" to your button.
<button type="button" class="btn-xs btn-primary">Edit</button><button type="button" class="btn-xs btn-primary" data-toggle="modal" data-target="#deleteSubnet" data-id="{{ $subnet->id }}">Delete</button>
Add this jQuery snippet.
$('#deleteSubnet').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var id = button.data('id')
var modal = $(this)
modal.find('form').attr('action', '/subnets/' + id)
})
Without any javascript workarounds:
<button ... data-target="#deleteSubnet-{{ $subnet->id }}">Delete</button>
....
<div class="modal fade" id="deleteSubnet-{{ $subnet->id }}" ... >
....
</div>
Should work fine
<div class="modal fade" id="AddEditModal" role="dialog" ng-show="showEditModal">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button" ng-click="loadDetails()">
×
</button>
<h4 class="modal-title" ng-show="newType">Employee - New</h4>
<h4 class="modal-title" ng-hide="newType">Employee - Edit</h4>
</div>
<form class="form-horizontal" name="employeeForm" ng-submit="saveEmployee(detail,employeeForm.$valid)">
<div class="modal-body">
<p>
<div ng-repeat="error in errors">
<div class="alert alert-danger">
<button class="close" data-dismiss="alert">× </button>
<i class="fa fa-times-circle"></i>
{{error}}
</div>
</div>
</p>
<div class="row">
<div class="form-group required" ng-class="{ 'has-error' : employeeForm.EmpCode.$invalid && !employeeForm.EmpCode.$pristine }">
<label class="col-sm-4 control-label" for="EmpCode"><b>Employee Code:</b> </label>
<div class="col-sm-6">
<input class="form-control" type="text" name="EmpCode" ng-model="detail.EmpCode" required>
<p ng-show="employeeForm.EmpCode.$invalid && !employeeForm.EmpCode.$pristine" class="help-block">Employee is required.</p>
</div>
</div>
<div class="form-group required" ng-class="{ 'has-error' : employeeForm.FirstName.$invalid && !employeeForm.FirstName.$pristine }">
<label class="col-sm-4 control-label" for="FirstName"><b>First Name :</b> </label>
<div class="col-sm-6">
<input class="form-control" type="text" name="FirstName" ng-model="detail.FirstName" required>
<p ng-show="employeeForm.FirstName.$invalid && !employeeForm.FirstName.$pristine" class="help-block">First Name is required.</p>
</div>
</div>
<div class="form-group required" ng-class="{ 'has-error' : employeeForm.LastName.$invalid && !employeeForm.LastName.$pristine }">
<label class="col-sm-4 control-label" for="LastName"><b>Last Name :</b> </label>
<div class="col-sm-6">
<input class="form-control" type="text" name="LastName" ng-model="detail.LastName" required>
<p ng-show="employeeForm.LastName.$invalid && !employeeForm.LastName.$pristine" class="help-block">Last Name is required.</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="submit" ng-show="newType" ng-disabled="employeeForm.$invalid">
<i class="fa fa-save"></i>
Save
</button>
<button class="btn btn-success" type="submit" ng-hide="newType" ng-disabled="employeeForm.$invalid">
<i class="fa fa-save"></i>
Save Changes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="removeFormDetails()"><i class="fa clip-close-3"></i>Close</button>
</div>
</form>
</div>
</div>
</div>
<!--Delete Section-->
<div class="modal fade" id="deleteModal" role="dialog" ng-show="showDeleteModal">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete</h4>
</div>
<div class="modal-body">
<p>Do you really want to delete this User?</p>
</div>
<div class="modal-footer">
<button class="btn btn-bricky" type="button" ng-click="deleteEmployee(detail)">
<i class="fa fa-trash-o"></i>
Delete
</button>
<button class="btn btn-green" data-dismiss="modal" type="button" ng-click="removeFormDetails()">
<i class="fa clip-close-3"></i>
Close
</button>
</div>
</div>
</div>
</div>
I am trying to create an edit modal for each row in the database. My page looks like this.
When I click on the edit icon, I open a modal where a user's details can be edited. The modal looks like this.
The modal I intend to show is like this.
My view.php
<div class="box-body">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<!-- <th></th> -->
<th>Username</th>
<th>Contact</th>
<th>Email</th>
<th>Role Type</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach ($data as $datas)
<tr>
<td>{{ $datas->username }}</td>
<td>{{ $datas->contact }}</td>
<td>{{ $datas->email }}</td>
<td>Role Type</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#edit-modal">
<i class="fa fa-edit"></I>
</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#delete-modal">
<i class="fa fa-trash"></i>
</button>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
<div class="modal fade" id="edit-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" align="center"><b>Edit User</b></h4>
</div>
<div class="modal-body">
<form role="form" action="/edit_user">
<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
<div class="box-body">
<div class="form-group">
<label for="exampleInputEmail1">User ID</label>
<input type="text" class="form-control" name="user_id" placeholder="User ID" >
</div>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="text" class="form-control" name="username" placeholder="Enter username">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="text" class="form-control" name="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Contact</label>
<input type="text" class="form-control" name="contact" placeholder="Enter contact">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Change Password</label>
<input type="password" class="form-control" name="change_password" placeholder="Enter password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
How can I achieve the desired output?
Something like this would suffice.
Note: I assume you are using bootstrap 4 for your project, although bootstrap 3 would work too, just tweak it a bit to suit your needs
$(document).ready(function() {
/**
* for showing edit item popup
*/
$(document).on('click', "#edit-item", function() {
$(this).addClass('edit-item-trigger-clicked'); //useful for identifying which trigger was clicked and consequently grab data from the correct row and not the wrong one.
var options = {
'backdrop': 'static'
};
$('#edit-modal').modal(options)
})
// on modal show
$('#edit-modal').on('show.bs.modal', function() {
var el = $(".edit-item-trigger-clicked"); // See how its usefull right here?
var row = el.closest(".data-row");
// get the data
var id = el.data('item-id');
var name = row.children(".name").text();
var description = row.children(".description").text();
// fill the data in the input fields
$("#modal-input-id").val(id);
$("#modal-input-name").val(name);
$("#modal-input-description").val(description);
})
// on modal hide
$('#edit-modal').on('hide.bs.modal', function() {
$('.edit-item-trigger-clicked').removeClass('edit-item-trigger-clicked')
$("#edit-form").trigger("reset");
})
})
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="main-container container-fluid">
<!-- heading -->
<div class="container-fluid">
<div class="row">
<div class="col">
<h1 class="text-primary mr-auto">Example list</h1>
</div>
</div>
</div>
<!-- /heading -->
<!-- table -->
<table class="table table-striped table-bordered" id="myTable" cellspacing="0" width="100%">
<thead class="thead-dark">
<tr>
<th>#</th>
<th> Name</th>
<th> Description</th>
<th> Action</th>
</tr>
</thead>
<tbody>
<tr class="data-row">
<td class="align-middle iteration">1</td>
<td class="align-middle name">Name 1</td>
<td class="align-middle word-break description">Description 1</td>
<td class="align-middle">
<button type="button" class="btn btn-success" id="edit-item" data-item-id="1">edit</button>
</td>
</tr>
<tr class="data-row">
<td class="align-middle iteration">2</td>
<td class="align-middle name">Name 2</td>
<td class="align-middle word-break description">Description 2</td>
<td class="align-middle">
<button type="button" class="btn btn-success" id="edit-item" data-item-id="2">edit</button>
</td>
</tr>
</tbody>
</table>
<!-- /table -->
</div>
<!-- Attachment Modal -->
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="edit-modal-label">Edit Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="attachment-body-content">
<form id="edit-form" class="form-horizontal" method="POST" action="">
<div class="card text-white bg-dark mb-0">
<div class="card-header">
<h2 class="m-0">Edit</h2>
</div>
<div class="card-body">
<!-- id -->
<div class="form-group">
<label class="col-form-label" for="modal-input-id">Id (just for reference not meant to be shown to the general public) </label>
<input type="text" name="modal-input-id" class="form-control" id="modal-input-id" required>
</div>
<!-- /id -->
<!-- name -->
<div class="form-group">
<label class="col-form-label" for="modal-input-name">Name</label>
<input type="text" name="modal-input-name" class="form-control" id="modal-input-name" required autofocus>
</div>
<!-- /name -->
<!-- description -->
<div class="form-group">
<label class="col-form-label" for="modal-input-description">Email</label>
<input type="text" name="modal-input-description" class="form-control" id="modal-input-description" required>
</div>
<!-- /description -->
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- /Attachment Modal -->
Suggestion
I would recommend you to include the form in another blade view, render it with all the relevant data and then return it to the controller then show it in the modal.
You can use the below code just pass the $data to the view and it will populate.
#foreach ($data as $datas)
<div class="modal fade" id="edit-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" align="center"><b>Edit User</b></h4>
</div>
<div class="modal-body">
<form role="form" action="/edit_user">
<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
<div class="box-body">
<div class="form-group">
<label for="exampleInputEmail1">User ID</label>
<input type="text" class="form-control" name="user_id" placeholder="User ID" value="{{$datas->user_id}}">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="text" class="form-control" name="username" placeholder="Enter username" value="{{$datas->username}}">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="text" class="form-control" name="email" placeholder="Enter email" value="{{$datas->email}}">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Contact</label>
<input type="text" class="form-control" name="contact" placeholder="Enter contact" value="{{$datas->contact}}">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Change Password</label>
<input type="password" class="form-control" name="change_password" placeholder="Enter password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
#endforeach
Easy and simple method.
Simply ensure your data-target and id values are dynamically changing with respect to the individual rows, in this case fix the modal box code into the loop that it takes the values dynamically.
So since you are using Laravel you could do this:
#foreach($rows as $row)
<em class="fa fa-2x fa-edit mr-1"></em>
<div id="myEditModal{{ $row->id }}" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
....
#endforeach
I have a table nested inside a form to align the input fields. The form is a Boostrap Modal class and I want to pass the values inside the input fields to entryHandler.php for processing. I'm using the method = "get" in the form so I should be able to see the input values reflected in the url. However, nothing happens when I click the submit button. As if no code ran. Is there something wrong with the structure of my code?
<div class="modal fade addEntryModal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add Entry</h4>
</div>
<div class="modal-body">
<div class="container col-md-offset-2 col-md-8" id="form">
<form action="entryHandler.php" method="get" class="form-group">
<table class="table center" id="recordForm">
<tr id="frm-code">
<td>Code</td>
<td>
<input type="text" class="form-control" id="txt-code">
</td>
</tr>
<tr id="frm-title">
<td>Title</td>
<td>
<input type="text" class="form-control" id="txt-title">
</td>
</tr>
<tr id="frm-unit">
<td>Unit</td>
<td>
<input type="text" class="form-control" id="txt-unit">
</td>
</tr>
</table>
<div class="modal-footer">
<div class="pull-right row">
<input type="submit" id="hrefSave" name = "entrySubmission" class="form-control pull-right" value = "Add" data-dismiss="modal">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
I don't have enough reputation to comment, so i will put an answer here. I think you are missing the "name" attribute in all of your 3 input inside your <td>.
Can you try removing the data-dismiss="modal" attribute on your submit button? I think it will prevent the default event and just dismiss the modal.