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);
Related
i have a cms where on click open modal and inside i have few fields and then i have another button inside of modal where i can add dynamically ckeditors fields by clicking on button, here is what i was trying to do:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-12">
<button style="margin-bottom:5px;" type="button" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-success"><i class="fa fa-plus" aria-hidden="true"></i> Adauga</button>
</div>
<div id="add_data_Modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Adauga categorie</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="container">
<form action="add.php" method="POST">
<div class="form-group">
<label for="input-1">Nume Categorie</label>
<input type="text" class="form-control" name="nume" id="nume" placeholder="Nume categorie">
</div>
<div class="form-group">
<label for="input-1">Categorie</label>
<select class="form-control" id="categorie" name="categorie">
<option value="0">Categorie principala</option>
</select>
</div>
<div class="form-group">
<label for="input-1">Vizibil</label>
<select class="form-control" id="activ" name="activ">
<option selected>Selecteaza vizibilitatea</option>
<option value="1">Da</option>
<option value="0">Nu</option>
</select>
</div>
<div class="form-group">
<label for="input-1">Pozitia</label>
<input type="text" class="form-control" name="pozitie" id="pozitie" placeholder="Pozitie">
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<div class="icheck-material-primary">
<input type="checkbox" id="user-checkbox1" checked="">
<label for="user-checkbox1">Modele Produse</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<div class="icheck-material-primary">
<input type="checkbox" id="user-checkbox2" checked="">
<label for="user-checkbox2">Paletar Materiale</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<div class="icheck-material-primary">
<input type="checkbox" id="user-checkbox3" checked="">
<label for="user-checkbox3">Estimare Pret</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="rowa">
<div class="add-plus">Adauga tab-uri</div>
<div class="col-md-12">
<span id="add_aut" class="btn btn-primary">+</span>
<div id="auth-rows"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-times"></i> Inchide</button>
<button type="submit" name="submit" class="btn btn-primary"><i class="fa fa-check-square-o"></i> Salveaza</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function(e){
// variable
var html3 = '<div class="row" id="parent-autor"> <p id="auth-del"><i class="fa fa-minus-square" aria-hidden="true"></i></p> <div class="row"> <div class="col-md-4"> <div class="form-group"> <input type="text" class="form-control" placeholder="titlu_tab" name="titlu_tab[]"> </div> </div> <div class="col-md-4"> <div class="form-group"> <input type="text" class="form-control" placeholder="Pozitie" name="pozitie_tab[]"> </div> </div> </div> <div class="col-md-12"> <div class="form-group"> <textarea name="editor[]" class="ckeditor" id="continut" rows="8" cols="80"></textarea> </div> </div></div>';
$("#add_aut").click(function(e){
$('#auth-rows').append(html3);
});
$('#auth-rows').on('click', '#auth-del', function(E){
$(this).parent('div').remove();
});
});
</script>
In this modal when i click on add i want to add more fields, is done this but not appear ckeditor just a plain textarea which i don`t need that.
Thank you!
You are probably going to want to give the textarea a custom id if you plan to have multiple of them.
let currentId = 0;
I moved the 'var html' code inside the create function so that we can edit the id every time the add button is clicked because we need a unique id each time. After the textarea exists, I call .ckeditor() on that textarea which should enable the ckeditor tools for that field. Then I increment the customId to make sure that the next form that is added has a different id.
$("#add_aut").click(function(e){
var html3 = '<div class="row" id="parent-autor"> <p id="auth-del"><i class="fa fa-minus-square" aria-hidden="true"></i></p> <div class="row"> <div class="col-md-4"> <div class="form-group"> <input type="text" class="form-control" placeholder="titlu_tab" name="titlu_tab[]"> </div> </div> <div class="col-md-4"> <div class="form-group"> <input type="text" class="form-control" placeholder="Pozitie" name="pozitie_tab[]"> </div> </div> </div> <div class="col-md-12"> <div class="form-group"> <textarea name="editor[]" class="ckeditor" id="continut' + currentId + '" rows="8" cols="80"></textarea> </div> </div></div>';
$('#auth-rows').append(html3);
$('#continut' + currentId).ckeditor();
currentId += 1;
});
You may not want the customId in the id of the textarea depending on what you are trying to accomplish, but this should get you going in the correct direction.
Also, you need to add the ckeditor.js as well as a jquery adapter script for this to work.
See this fiddle https://jsfiddle.net/bkqxnu8f/3/
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.
Can anyone please please Help me. I am using laarvel framework. I want to add tr when user click on ADD NEW Service Button. The data is displayed in foreach Loop.
when user click on Add New Service
here is my Html Code:-
enter code here
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
#foreach($alldata as $data)
<div class="services-name">
<h4>{{ $data['name'] }} <button id="{{ $data['id']}}" type="button" class="btn btn-default btn-nail getid" data-toggle="modal" data-target="#myModal-nail" >
<i class="fa fa-plus" aria-hidden="true"> Add New Service</i>
</button>
</h4>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="table-class">
<table class="table table-bordered" id="append-{{ $data['id'] }}">
<tr>
<th style="width:33.33%">Services</th>
<th style="width:33.33%">Duration</th>
<th style="width:33.33%">£ Price </th>
</tr>
#foreach($data['sub_services'] as $subservices)
<tr>
<td>{{ $subservices['name']}}</td>
<input type="hidden" name="service_id[]" value="{{ $subservices['service_id'] }}">
<input type="hidden" name="name[]" value="{{ $subservices['name'] }}">
<input type="hidden" name="service_is[]" value="{{ $subservices['service_is'] }}">
<td>
<div class="form-group">
<input class="form-control" type="text" name="duration[]" placeholder="Duration">
</div>
</td>
<td>
<div class="form-group">
<input class="form-control" type="text" name="price[]" placeholder="price">
</div>
</td>
</tr>
#endforeach
</table>
</div>
</div>
</div>
#endforeach
</div>
And here is My modal
enter code here
<div class="modal fade" id="myModal-nail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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="add-cat"> Add Service</h4>
</div>
<form class="servicedata" role="form" method="POST" action="Javascript:;">
{{ csrf_field() }}
<div class="modal-body">
<div class="form-group row">
<span class="col-xs-3 add-cate-model">Add Service</span>
<div class="col-xs-8">
<input name="name" class="form-control mdl-txt txtfield m-tb-10" type="text" placeholder="Add Service" >
<input type="hidden" name="list_id" value="{{ $listid }}">
<input type="hidden" class="service" name="service_id" value="">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary addService">Submit</a>
</div>
</form>
</div>
</div>
Jquery Code:-
enter code here
$(document).on('click','.getid', function(){
var serviceid = $(this).attr('id');
alert(serviceid);
$('.addService').addClass(serviceid);
$('.'+serviceid).on('click',function(){
$('.service').val(serviceid);
if(flag==1) {
$.ajax({
type: "POST",
url: "add-category-service",
data: $('.servicedata').serialize(),
success:function(resp){
if($.trim(resp)){
$("#append-"+serviceid).append(resp);
$('.addService').removeClass(serviceid);
$('#myModal-nail').modal('hide');
} else{
alert("error"); return false;
}
}
});
}
});
});
And My laravel function:-
enter code here
ublic function addCategoryService(Request $request){
if($request->ajax()){
$data = $request->input();
//echo "<pre>"; print_r($data); die;
unset($data['_token']);
$subservice = new SessionSubService;
$subservice->name = $data['name'];
$subservice->list_id = 1;
$subservice->service_id = $data['service_id'];
$subservice->service_is = "top";
$subservice->save();
echo '<tr>
<td>'. $data['name'].'</td>
<input type=hidden name=service_id[] value=' .$data['service_id'].'>
<input type=hidden name=name[] value=' . $data['name']. '>
<input type=hidden name=service_is[] value=top>
<td>
<div class=form-group>
<input class="form-control" type="text" name="duration[]" placeholder="Duration">
</div>
</td>
<td>
<div class=form-group>
<input class=form-control type=text name=price[] placeholder=price>
</div>
</td>
</tr>'; die;
}
}
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."\")";