I am building a system so the user can request for multiple things, and I want to be able to visualize the details about each request (individually) made in the system.
The current method gives me everything at once, and not separated.
Here is the part of the code
The controller
public function verDetalhesKeys($id)
{
$detalhes = DB::table('keysRequest')
->where('keysRequest.id','=', $id)
->select('keysRequest.*')
->get();
return view('Admin.keysRequestDetails',compact('detalhes'));
}
The route
Route::get('/detalhesK/{id}', 'AdminController#verDetalhesKeys') -> name('detalhesK');
The button to Visualize the details
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Department</th>
<th>Site</th>
<th>Pourpose</th>
<th>From</th>
<th>To</th>
</tr>
</thead>
<tbody>
#foreach($keys as $s)
<tr>
<td>{{$s->name}}</td>
<td>{{$s->email}}</td>
<td>{{$s->department}}</td>
<td>{{$s->site}}</td>
<td>{{$s->purpose}}</td>
<td>{{$s->till}}</td>
<td>{{$s->until}}</td>
<td style="display:none;">{{$s->id}}</td>
<td><a class="btn btn-info btn-md" href="{{ route('detalhesK',['id' => $s->id])}}" style="background-color:#00a3b3;"><i class="fa fa-eye" aria-hidden="true"></i></a></td>
</tr>
#endforeach
</tbody>
</table>
The page of the details
<div class="container">
<div class="row justify-content-center">
<div class="col-16 col-md-12 col-lg-12 pb-7">
<!--Form with header-->
<form method="post">
#foreach($detalhes as $d)
<div class="card border-primary rounded-0">
<div class="card-header p-0">
<div class="bg-info text-white text-center py-2">
<h3>Requisição de Chaves Detalhes || Keys Request Details</h3>
</div>
</div>
<div class="card-body p-3">
<!--Body-->
<div class="form-group">
<label>Nome || Name</label>
<input type="text" class="form-control" placeholder="{{$d->name}}" readonly>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="{{$d->email}}" readonly>
</div>
<div class="form-group">
<label>Departamento || Department</label>
<textarea class="form-control" placeholder="{{$d->department}}" readonly></textarea>
</div>
<div class="form-group">
<div class="input-group mb-2">
<label>Local || Site</label>
<textarea class="form-control" placeholder="{{$d->site}}" readonly></textarea>
</div>
<br>
<div class="form-group">
<label>Finalidade || Purpose</label>
<input type="Quantidade" class="form-control" placeholder="{{$d->purpose}}" readonly>
</div>
<div class="form-group">
<label>Período de uso das chaves || Period of use of the keys</label>
<textarea class="form-control" placeholder="{{$d->till}} - {{$d->until}}" readonly></textarea>
</div>
<div class="text-center">
<a class="btn btn-danger" href=""><font color="white"> Rejeitar || Refuse </font></a>
<a class="btn btn-success" href=""><font color="white"> Validar || Validate </font></a>
</div>
</div>
#endforeach
</div>
</form>
<!--Form with header-->
</div>
first of all is 'id' the column to primary key in your database table, you need to make sure it is so you wont have dublicate products.Edit your query to $detalhes = DB::table('keysRequest')->find(id);.
After doing that, wont need to use a loop to ouput your result since its only 1 item. just use {{$detalhes->something}}
Related
Main Goal: I want to view the whole details of my specific row data in my table into a new form(input text) based on their ID.
Here is my code to fetch my data into table
<?php
include 'connection.php';
$query = "SELECT * FROM appointment WHERE request_status = 2 AND appoint_active = 1";
$run = mysqli_query($conn,$query);
?>
<div class="row">
<div class="col-md-12">
<div class="panel panel-success">
<div class="panel-heading">Listing All Services</div>
<div class="panel-body">
<table class="tables" id="manageMainteTable" style="width:100%;">
<tr>
<th style="text-align: center;">Service ID</th>
<th style="text-align: center; width:150px;">Order Date</th>
<th style="text-align: center;">Client Name</th>
<th style="text-align: center;">Contact</th>
<th style="text-align: center;">Client Product</th>
<th style="text-align: center;">No. of Items</th>
<th style="text-align: center; width:150px;">Due Date</th>
<th style="text-align: center;">Service Status</th>
<th style="text-align: center;">Action</th>
</tr>
<?php
if ($num = mysqli_num_rows($run)>0) {
while ($result = mysqli_fetch_assoc($run)) {
echo "
<tr>
<td>".$result['appoint_id']."</td>
<td>".$result['order_date']."</td>
<td>".$result['customer_name']."</td>
<td>".$result['customer_contact']."</td>
<td>".$result['item_type']."</td>
<td>".$result['quantity']."</td>
<td>".$result['due_date']."</td>";
if($result['appoint_status'] == 2 ){
echo"<td><label class='label label-success'>Finished</label></td>";
} else {
echo"<td><label class='label label-danger'>On Going</label</td>";
}
if($result['appoint_status'] == 2 ){
echo "<td>
<button class='btn btn-sm btn-info edit_cat' data-toggle='modal' data-target='#addProductModal'> VIEW </button>
<a href='php_action/finishAppointRemove.php?appoint_id=".$result['appoint_id']."' class='btn btn-sm btn-success edit_cat' id='dltbtn'>Remove</a></td>";
} else {
echo "<td>
<button class='btn btn-sm btn-info edit_cat' data-toggle='modal' data-target='#addProductModal'>VIEW</button>
<a href='php_action/finishAppoint.php?appoint_id=".$result['appoint_id']."' class='btn btn-sm btn-success edit_cat' id='fnhbtn'>Finished</a></td>";
}
}
}
?>
</tr>
</table>
</div>
</div>
</div>
</div>
So what i want is when i click this button **
<button class='btn btn-sm btn-info edit_cat' data-toggle='modal' data-target='#addProductModal'> VIEW </button>
** The corresponding row will fetch its data into input boxes.
<div class="modal" tabindex="-1" role="dialog" id="addProductModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Full Details</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="form-horizontal" id="submitProductForm" action="php_action/updateMainte.php" method="POST">
<div class="modal-body">
<div id="add-product-messages"></div>
<div class="form-group">
<label class="control-label col-sm-3" for="appointID">Appoint ID:</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="appointID" name="appoint" placeholder="Appoint ID" value="<?php echo $row['appoint_id'];?>" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="customerName">Customer Name:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="customerName" name="customerName" placeholder="Customer Name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="contact">Contact Number:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="contact" name="contact" placeholder="Contact #" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="item_type">Item/s Type:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="item_type" name="item_type" placeholder="Items" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="quantity">Quantity:</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity" min="1" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="due">Due Date:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="due" name="due" placeholder=" Due Date" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="worker" required>Assinged Worker/s:</label>
<div class="col-sm-9">
<select class="form-control" id="worker" name="worker">
<option value="">---Select---</option>
<?php
$sql = "SELECT brand_id, brand_name FROM brands WHERE brand_status = 1 AND brand_active = 1";
$result = $connect->query($sql);
while ($row = $result->fetch_array()){
echo "<option value='".$row[0]."'>".$row[1]."</option>";
}
?>
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="createProductBtn" data-loading-text="Loading..">Update Information</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
}
}
</form>
</div>
</div>
</div>
This is the visual example of my table.
And when i click the view button
So what i want is to automatically fetch the correspoding row of the view button that i just clicked. Im kinda new to coding so im not really sure what i need to do that. Thanks and sorry for convenience.
Step 1: Add a appoint_id (i.e. unique id ) to view button using data attribute.
In Your Case data-appoint='".$result['appoint_id']."'
echo "<td>
<button class='btn btn-sm btn-info edit_cat' data-appoint='".$result['appoint_id']."' data-toggle='modal' data-target='#addProductModal'> VIEW </button>";
-Step 2: Add a onclick event listener to view button. In Your Case
$(".edit_cat").click(function(){
let service_id=$(this).data('appoint');
console.log(service_id);
});
so you can able to access service id in function so add ajax or fetch api to request the source and get data from it. And add Data to desired Input
need help with the dropdown filter. my task is to separate the active, deactivate, for approval, etc. employees. so I did was I created a dropdown list filter to avoid creating another data table for every status. please help me. thank you!!!
this the controller
public function index()
{
$user = DB::table("user_basic")
->leftjoin("user_status","user_status.status_id" , "=" , "user_basic.user_id")
->select("user_status.*", "user_basic.*")
->get();
$datatables = datatables::of($user);
return view("pages.Directory.index")->with("user",$user);
}
the index page
#extends('pages.main-content')
#section('css')
#include('layouts.datatables-css')
#endsection
#section('content')
<body class="bg-info">
<div class="container-fluid">
<div class="col-1">
<form action="{{url ('directory') }}" method="GET">
<div class="row">
<div class="form-group">
<h6>
<select id='status' name="status"class="form-control" style="width: 200px">
<option value = "ACTIVE">Active</option>
<option value = "APPROVED">Approved</option>
<option value = "DEACTIVATED">Deactivated</option>
<option value = "DENIED"> Denied</option>
<option value = "DISAPPROVED">Disapproved</option>
<option value = "FOR APPROVAL">For Approval</option>
<option value = "INCOMPLETE">Incomplete</option>
<option value = "STARTUP">Startup</option>
</select>
<div class = "column-md-4">
</h6>
<button type ="submit" class ="btn btn-light">Filter <i class ="bi bi-funnel"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="row ">
<div class="col-12">
<div class="card-body">
<table class="table table-hover table-fw-widget " id="table4">
<thead>
<td>ID</td>
<td><b>Username</b></td>
<td><b>Name</b></td>
<td><b>Birthdate</b></td>
<td><b>Status</b></td>
<td class="Text-center"><b>---------</b></td>
</tr>
</thead>
<tbody>
#foreach ($user as $user)
<tr>
<td>{{$user->user_id}}</td>
<td>{{$user->user_xusern}}</td>
<td>
<?php
$arr = array($user->user_xfirstname,
$user->user_xmiddlename,
$user->user_xlastname);
echo join(" ",$arr);
?>
</td>
<td>{{$user->user_xbirthdate}}</td>
<td>{{$user->status_xtitle}}</td>
<td class="Text-center"><a href="#" id="' . $user->user_id . '" class="text-success mx-1 showIcon" data-bs-toggle="modal" data-bs-target="#showusermodal">
<i class="bi bi-eye-fill h5"></i></a>
<a href="#" id="' . $user->user_id . '" class="text-danger mx-1 deleteIcon">
<i class="bi-trash h5"></i></a>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<div class="col-1"></div>
</div>
</form>
</div>
{{-- View modal start --}}
<div class="modal fade" id="showusermodal" tabindex="-1" aria-labelledby="ModalLabel" data-bs-backdrop="static" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="Uname">Employee Information</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form action="#" method="POST" id="showinfo" enctype="multipart/form-data">
#csrf
<div class="modal-body p-4 bg-light">
<div class="row">
<div class="col-sm">
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" class="form-control" readonly>
</div>
<div class="col-sm">
<label for="midname">Middle Name</label>
<input type="text" name="midname" id="midname" class="form-control" readonly>
</div>
<div class="col-sm">
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" class="form-control" readonly>
</div>
</div>
<div class="row">
<div class="col-lg">
<label for="birthdate">Birthdate</label>
<input type="text" name="bdate" id="bdate" class="form-control" value="" readonly>
</div>
<div class="col-lg">
<label for="birthdate">Status</label>
<input type="text" name="status" id="status" class="form-control" value="" readonly>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" id="add_employee_btn" class="btn btn-primary">Add Employee</button>
</div>
</form>
</div>
</div>
</div>
{{-- view modal end --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
</body>
#endsection
#section('scripts')
#include('layouts.datatables-scripts')
<script type="text/javascript">
$(document).ready(function()
{
$('#table4').DataTable();
});
</script>
#endsection
enter code here
you can write your query but remove get() function from the end .
$user = DB::table("user_basic")
->leftjoin("user_status","user_status.status_id" , "=" , "user_basic.user_id")
->select("user_status.*", "user_basic.*");
then write this if statement and don't forget to customize the column where i called status.name with your column name
if (request()->filled('status') && request('status') !== null) {
$data = $data->where('status.name', request()->status);
}
then path $user to datatables;
you will get the result
$datatables = datatables::of($user);
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
hope all is well. I really really really do need help submitting a jQuery step wizard form. I did get a plugin to help but it does most of its functionalities in jQuery and not html.
At the moment i have:
- Created the database and necessary table
- Created html form using jquery steps
- Connected the form to the database
- Connected database to html table for display
This is my html code:
<div class="modal fade" id="pat_add_modal" tabindex="-1" role="dialog" aria-labelledby="add_patient_label">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="add_patient_label">Add New Patient</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<!-- PHP Form Processor -->
<?php
include 'db.php';
if(isset($_POST['submit'])){
$pat_sname = $_POST['pat_sname'];
$pat_fname = $_POST['pat_fname'];
$pat_gender = $_POST['pat_gender'];
$pat_dob = $_POST['pat_dob'];
$pat_phone = $_POST['pat_phone'];
$pat_email = $_POST['pat_email'];
$insurance_companies = $_POST['insurance_companies'];
$card_no = $_POST['card_no'];
$pat_allergies = $_POST['pat_allergies'];
$pat_history = $_POST['pat_history'];
$pat_address = $_POST['pat_address'];
$nok_name = $_POST['nok_name'];
$nok_phone = $_POST['nok_phone'];
$nok_email = $_POST['nok_email'];
$pat_dependants = $_POST['pat_dependants'];
$pat_work = $_POST['pat_work'];
$pat_work_address = $_POST['pat_work_address'];
$work_phone = $_POST['work_phone'];
$work_email = $_POST['work_email'];
$ins_sql = "INSERT INTO patients (surname, first_name, gender, dateofbirth, phone, email, insurance_co, insurance_card_no, allergies, medical_history, full_address, nok_name, nok_phone, nok_email, dependants, palce_of_work, work_full_address, work_phone, work_email) VALUES ('$pat_sname', '$pat_fname', '$pat_gender', '$pat_dob', '$pat_phone', '$pat_email', '$insurance_companies', '$card_no', '$pat_allergies', '$pat_history', '$pat_address', '$nok_name', '$nok_phone', '$nok_email', '$pat_dependants', '$pat_work', '$pat_work_address', '$work_phone', '$work_email')";
$run_sql = mysqli_query($conn, $ins_sql);
echo "insertion success";
}else{
echo "insertion failed";
}
?>
<div class="card-block wizard-content">
<form class="tab-wizard wizard-circle form-horizontal floating-labels" role="form" name"this" id"this" action="patients.php" method="post">
<!-- Step 1 -->
<h6><strong>Personal Info</strong></h6>
<section>
<div class="row">
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="text" class="form-control" name="pat_sname" id="pat_sname" required><span class="bar"></span><label for="pat_sname">Surname :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="text" class="form-control" name="pat_fname" id="pat_fname" required><span class="bar"></span><label for="pat_fname">First Name :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<select class="form-control p-0" name="pat_gender" id="pat_gender" required>
<option value=""></option>
<option value="M">Male</option>
<option value="F">Female</option>
</select><span class="bar"></span>
<label for="pat_gender">Gender :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="date" class="form-control" name="pat_dob" id="pat_dob" required><span class="bar"></span><label for="pat_dob">D.O.B :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="tel" class="form-control" name="pat_phone" id="pat_phone" required><span class="bar"></span><label for="pat_phone">Phone :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="email" class="form-control" name="pat_email" id="pat_email" required><span class="bar"></span><label for="pat_email">Email :</label>
</div>
</div>
</div>
</section>
<!-- Step 2 -->
<h6><strong>Health Info</strong></h6>
<section>
<div class="row">
<div class="col-md-6">
<div class="form-group m-t-20">
<select class="form-control p-0" name="insurance_companies" id="insurance_companies" required>
<option value=""></option>
<option value="AAR">AAR</option>
<option value="AIG">AIG</option>
<option value="Britam">Britam</option>
<option value="IAA">IAA</option>
<option value="ICEA">ICEA</option>
<option value="Goldstar">Goldstar</option>
<option value="Liberty">Liberty</option>
<option value="NIC">NIC</option>
<option value="Sanlam">Sanlam</option>
<option value="SWICO">SWICO</option>
<option value="UAP">UAP</option>
</select><span class="bar"></span>
<label for="insurance_companies">Insurance Co.</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="text" class="form-control" name="card_no" id="card_no" required><span class="bar"></span><label for="card_no">Insurance Card No.</label>
</div>
</div>
<div class="col-md-12">
<div class="form-group m-t-20">
<textarea class="form-control" rows="1" id="pat_allergies" required></textarea>
<span class="bar"></span>
<label for="pat_allergies">Allergies :</label>
</div>
</div>
<div class="col-md-12">
<div class="form-group m-t-20">
<textarea class="form-control" rows="1" id="pat_history" required></textarea>
<span class="bar"></span>
<label for="pat_history">Medical History :</label>
</div>
</div>
</div>
</section>
<!-- Step 3 -->
<h6><strong>Home Info</strong></h6>
<section>
<div class="row">
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="text" class="form-control" name="pat_address" id="pat_address" required><span class="bar"></span><label for="pat_address">Full Address :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="text" class="form-control" name="nok_name" id="nok_name" required><span class="bar"></span><label for="nok_name">Next of Kin :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="tel" class="form-control" name="nok_phone" id="nok_phone" required><span class="bar"></span><label for="nok_phone">Phone :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="email" class="form-control" name="nok_email" id="nok_email" required><span class="bar"></span><label for="nok_email">Email :</label>
</div>
</div>
<div class="col-md-12">
<div class="form-group m-t-20">
<textarea class="form-control" rows="1" id="pat_dependants" required></textarea>
<span class="bar"></span>
<label for="pat_dependants">Dependants :</label>
</div>
</div>
</div>
</section>
<!-- Step 4 -->
<h6><strong>Work Info</strong></h6>
<section>
<div class="row">
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="text" class="form-control" name="pat_work" id="pat_work" required><span class="bar"></span><label for="pat_work">Place of Work :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="text" class="form-control" name="pat_work_address" id="pat_work_address" required><span class="bar"></span><label for="pat_work_address">Full Address :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="tel" class="form-control" name="work_phone" id="work_phone" required><span class="bar"></span><label for="work_phone">Phone :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="email" class="form-control" name="work_email" id="work_email" required><span class="bar"></span><label for="work_email">Email :</label>
</div>
</div>
</div>
</section>
</form>
</div>
</div>
</div>
</div>
</div>
and this my script:
$(".tab-wizard").steps({
headerTag: "h6"
, bodyTag: "section"
, transitionEffect: "fade"
, titleTemplate: '<span class="step">#index#</span> #title#'
, labels: {
finish: 'Finish'
},
onFinished: function (event, currentIndex) {
swal({
type: "success",
title: "Good Job!",
text: "You have successfully added a new patient.",
});
var form = $(this);
form.submit();
},
});
Below is my html table:
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-block">
<div class="table-responsive">
<!--<div class="col-md-12 align-self-center">
<button class="btn pull-right hidden-sm-down btn-danger m-l-5" id="deletebutton" type="button" data-toggle="modal" data-target="#adddoctormodal" data-original-title="View" data-whatever="#mdo"><i class="mdi mdi-delete"></i></button></a>
<button class="btn pull-right hidden-sm-down btn-info m-l-5" type="button" data-toggle="modal" data-target="#adddoctormodal" data-original-title="View" data-whatever="#mdo"><i class="mdi mdi-pen"></i></button></a>
<button class="btn pull-right hidden-sm-down btn-warning m-l-5" type="button" data-toggle="modal" data-target="#doc_view_modal" data-original-title="View" data-whatever="#mdo"><i class="mdi mdi-information-outline"></i></button></a>
<button class="btn pull-right hidden-sm-down btn-primary m-l-5" type="button" data-toggle="modal" data-target="#adddoctormodal" data-original-title="View" data-whatever="#mdo"><i class="mdi mdi-cash-multiple"></i></button></a>
<button class="btn pull-right hidden-sm-down btn-success m-l-20" type="button" data-toggle="modal" data-target="#adddoctormodal" data-original-title="View" data-whatever="#mdo"><i class="mdi mdi-calendar-plus"></i></button></a>
</div> -->
<table id="patientstable" class="display nowrap table table-hover table-striped table-bordered m-t-20" width="100%" cellspacing="0">
<thead>
<tr>
<th class="text-center">ID</th>
<th>Surname</th>
<th>First Name</th>
<th class="text-center">D.O.B</th>
<th class="text-center" >Gender</th>
<th class="text-center">Phone</th>
<th style="width: 100px;"></th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM patients";
$run_sql = mysqli_query($conn,$sql);
while ($rows = mysqli_fetch_array($run_sql)){
echo '
<tr>
<td class="text-center">'.$rows['id'].'</td>
<td>'.$rows['first_name'].'</td>
<td>'.$rows['surname'].'</td>
<td class="text-center">'.$rows['dateofbirth'].'</td>
<td class="text-center">'.$rows['gender'].'</td>
<td class="text-center">'.$rows['phone'].'</td>
<td id="actionicons">
<a href="user_id='.$rows['id'].'" data-toggle="modal" data-target="#pat_view_modal"> <i class="mdi mdi-information-outline text-warning"></i>
</i>
<a href="#" data-toggle="tooltip" data-original-title="Delete"> <i class="mdi mdi-delete text-danger"></i>
</td>
</tr>
';}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
I am stuck at a point where now have to submit the form but i am unable to since i can't call/reference the finish submit using an name or id since i can't assign it one.
Please help. Thanks.
Brian Dx.
In your patients.php you can use:
if ( $_SERVER['REQUEST_METHOD'] == 'POST' )
instead of:
if(isset($_POST['submit']))
since you can't put a submit name in jquery steps.
I have a page with some input fields and a table whose rows are dynamically generated using jQuery. I am trying to save the input fields in one mysql table and the dynamically generated rows in another. The input fields are working fine. But with dynamically generated table rows, only the first row is inserting, other roes below the first is not inserting. Here are my codes. Please tell me what am I doing wrong. Thanks a ton.
HTML FORM
<form class="form-horizontal" role="form" action="saveFiles/savePurchase.php" method="post" target="">
<div class="form-group">
<label for="invoiceNo" class="col-md-6 control-label">Invoice No.</label>
<div class="col-md-6">
<input type="text" class="form-control" name="invoiceNo">
</div>
</div>
<div class="form-group">
<label for="supplier" class="col-md-6 control-label">Supplier</label>
<div class="col-md-5">
<select name="supplier" class="form-control">
<option>SELECT</option>
<?php include('saveFiles/connection.php');
$query = mysql_query("SELECT Id,Name FROM supplier");
while($row = mysql_fetch_assoc($query)){
$supplierId = $row['Id'];
$supplierName = $row['Name'];?>
<option value="<?php echo $supplierId;?>"><?php echo $supplierName;?></option>
<?php }
?>
</select>
</div>
<div class="col-md-1">
<img src="img/plus.png" class="pull-right" style="margin-top: 5px;" data-toggle="modal" data-target="#supplierModal">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="invoiceNo" class="col-md-6 control-label">Invoice Date</label>
<div class="col-md-6">
<input type="text" class="form-control datepicker" name="invoiceDate" readonly="readonly">
</div>
</div><br><br>
<div class="form-group">
<label for="paymentMode" class="col-md-6 control-label">Payment Mode</label>
<div class="col-md-6">
<select name="paymentMode" class="form-control">
<option>Cash</option>
<option>Cheque</option>
<option>Card</option>
<option>On Account</option>
<option>Credit</option>
</select>
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-condensed table-responsive">
<thead>
<th>Product Name</th>
<th>Unit</th>
<th>Qty</th>
<th><button type="button" class="btn btn-info" id="addNew">Add New Row</button></th>
</thead>
<tbody>
<tr class="cloneme">
<td>
<select name="productName[]" class="form-control" style="width: 110px;">
<option>SELECT</option>
<?php
include('saveFiles/connection.php');
$selectQuery = mysql_query("SELECT Id,ProductName FROM items ORDER BY ProductName");
while($rows = mysql_fetch_assoc($selectQuery)){
$productId = $rows['Id'];
$productName = $rows['ProductName']; ?>
<option value="<?php echo $productId;?>"><?php echo $productName?></option>
<?php }
?>
</select>
</td>
<td> <input type="text" class="form-control" name="unit[]"></td>
<td> <input type="text" class="form-control" name="qty[]"></td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-md-12 text-center">
<button class="btn btn-success" type="submit" name="submit" id="save">Save</button>
<button class="btn btn-danger" type="reset" name="reser">Clear</button>
</div>
</div>
</form>
<div class="row">
<div class="col-md-12 text-center">
<iframe name="purchaseMsg" style="border: none; background-color: #00aceb; !important; width:0px; height:0px;"></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="supplierModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Add Supplier</h4>
</div>
<div class="modal-body">
<div class="form-group">
<form action="saveSupplier" method="post" target="categoryMsg">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<input type="text" class="form-control" name="newSupplier" placeholder="Add New Supplier">
</div>
<div class="col-md-4"></div>
</div><br>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<input type="button" class="btn btn-success"value="Save" id="saveSupplier" data-dismiss="modal">
<input type="reset" class="btn btn-danger" value="Clear">
</div>
<div class="col-md-4"></div>
</div>
</form>
And this is my php script to insert the form.
<?php
include('connection.php');
if(isset($_POST['submit'])){
$invoiceNo = $_POST['invoiceNo'];
$invoiceDate = $_POST['invoiceDate'];
$supplierId = $_POST['supplier'];
$insertQuery = mysql_query("INSERT INTO purchase(InvoiceNo,InvoiceDate,SupplierId) VALUES('$invoiceNo','$invoiceDate','$supplierId')");
$id = mysql_insert_id();
$rowData = array();
foreach($_POST['productName'] as $row=>$itemName){
$productName = mysql_real_escape_string($itemName);
$unit = mysql_real_escape_string($_POST['unit'][$row]);
$qty = mysql_real_escape_string($_POST['qty'][$row]);
$rowData[] = "('$productName','$unit','qty')";
}
$query=mysql_query("INSERT INTO purchaseDetails(ItemName, Unit, Quantity) VALUES".implode(',',$rowData));
}
?>
Please help me with this. Thank you.
I think it might be related to the way you construct the multiple insert records, so instead of this...
rowData[] = "('$productName','$unit','qty')";
You should maybe try something like this...
rowData[] = "(\"".$productName."\", \"".$unit."\", \"".$qty."\")";