I just want to create a update form by using modal but when i click the button update nothing happen no popup appear or did with a wrong ways? I already change the position of the end curly braces but still not working. Any ideas?
when i use the modal for add item it working nicely, can someone explain to me what i'm doing wrong whih modal
here is what I working on:
<div class="card-block table-border-style">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Status</th>
<th>QR Code</th>
<th>Update</th>
</tr>
</thead>
<?
include("../config_db/config_db_e.php");
$quer1="SELECT * FROM info_kedai";
$quer2=mysqli_query($db_conn_e,$quer1);
while ($row= mysqli_fetch_array($quer2)){
$id=$row["id_ke"];
$name=$row["name_ke"];
$status=$row["status_ke"];
echo "<tbody>
<tr>
<th>$id</th>
<td>$name</td>
<td>$status</td>
<td><a href='qr_gen.php?id=$id'>Ganerate</a></td>
<td> <button type='button' class='btn btn-primary btn-outline-primary' data-toggle='modal' data-target='#myModal2$id'>Edit</button></td>
</tr>";
}?>
</tbody>
</table>
</div>
</div>
</div>
<!-- Hover table card end -->
</div>
<!-- Page-body end -->
</div>
</div>
<!-- Main-body end -->
<div id="styleSelector">
</div>
</div>
</div>
</div>
<!-- Modal update -->
<div class="modal fade" id="myModal2<?php echo $id ?>" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Update</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form action="process/class_shop.php" method="GET">
<?
$get=$row["id_kedai"];
$que1="SELECT * FROM info_kedai where id_kedai='$get'";
$que2=mysqli_query($db_conn_e,$que1);
while ($row= mysqli_fetch_array($que2)){
$id=$row["id_k"];
$name=$row["nama_k"];
$status=$row["status_k"];
?>
<label>Nama :</label><br>
<input type="text" name="nama_k" id="nama_k" class="form-control" value="<? echo $name ?>"><br>
<label>Status :</label><br>
<select id="status_k" name="status_k" class="form-control" value="<? echo $status?>">
<option value="1">Aktif</option>
<option value="2">Not Aktif</option>
`enter code here`
</select>
<br><br>
<input type="submit" value="Submit" name="update_k" id="update_k" class="btn btn-primary btn-outline-primary">
<?}?>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Thanks.
Related
I am basically performing CRUD operation, in which I'm adding the data from modal which successfully added as well as fetching successfully but I want to edit there is a problem to get the id. I want to do this without using JS/AJAX, is it possible to edit the record in a bootstrap modal?
list page start, where data fetching from DB
<div class="table-responsive table-responsive-data2">
<table class="table table-data2">
<thead>
<tr class="bg bg-success">
<th class="text-center">Sr#</th>
<th class="text-center">Room Name</th>
<th class="text-center">Status</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>';
//-----------------------------------------------------
$sql = $conn->query("SELECT * FROM rooms");
$srno = 0;
//-----------------------------------------------------
while($values = mysqli_fetch_array($sql)) {
//-----------------------------------------------------
$srno++;
//-----------------------------------------------------
echo '
<tr class="tr-shadow">
<td>'.$srno.'</td>
<td>'.$values['room_name'].'</td>
<td>';
if($values['room_status'] == 1)
{
echo'<span class="status bg bg-info">Active</span>';
}
else if($values['room_status'] == 2){
echo'<span class="status bg bg-danger">Inactive</span>';
}
echo "id:".$id = $values['room_id'];
echo'
</td>
<td>
<input type="text" name="id" value="'.$values['room_id'].'">
<div class="table-data-feature">
<button class="item" data-toggle="modal" data-target="#update_room" data-id="'.$values['room_id'].'">
<i class="zmdi zmdi-edit"></i>
</button>
</div>
</td>
</tr>
<tr class="spacer"></tr>';
}
echo'
</tbody>
</table>
</div>
list page end
Modal start, to edit the record
<?php
//-----------------------------------------------------
$sql = $conn->query("SELECT * FROM rooms WHERE room_id ='".$_GET['id']."'");
$srno = 0;
//-----------------------------------------------------
($values = mysqli_fetch_array($sql));
echo'
<div class="modal fade" id="update_room" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header bg bg-success">
<h4 class="modal-title text-white" id="mediumModalLabel"><i class="fa fa-plus"></i> Add Room </h4>
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close" >
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mt-lg">
<form action="#" class="form-horizontal" id="form" enctype="multipart/form-data" method="post" accept-charset="utf-8">
<input type="text" name="room_id" id="room_id" value="id:'.$_GET['id'].'">
<div class="form-group">
<div class="col-md-12">
<label class="control-label">Room Name <span class="required">*</span></label>
<input type="text" class="form-control" required name="room_name" value="'.$values['room_name'].'"/>
</div>
</div>
<div class="form-group" >
<div class="col-md-12">
<label class="control-label">Status <span class="required">*</span></label>
<div class="radio-inline">
<input type="radio" name="room_status" value="1" ';
if($values['room_status'] == 1)
{echo'checked'; }echo'>
<label for="">Active</label>
<input type="radio" name="room_status" value="2" '; if($values['room_status'] == 2) {echo'checked'; }echo'>
<label for="">Inactive</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" name="submit_room">Submit</button>
</div>
</form>
</div>
</div>
</div>
';
?>
modal end
Well, If you don't want to use ajax you have to submit a form to your bootstrap modal data Into a page and get them with get or post method and include them in php.
Like THis:
list page:
<form method="post" action="modal.php">
<!-- Your List page code --->
<!-- Input for your data --->
<input name="data">
<!-- a submit button --->
<button type="submit">submit</buttton>
</form>
modal Page:
//get data from list page
$data = $_POST["data"];
//Your Codes and data in your modal body
is it possible to use the index view to perform update/edit at the same time using modal form? i have index view with table displaying the data,and inside the table it has button named [edit and delete] now i want to perform edit/update once the edit button is click then modal form will come out..? but whenever is use the modal form it will show error like this image.
This is my Controller:
public function show_setup()
{
$batch=Batch::all();
return view('setup.show_batch',compact('batch'));
}
public function edit_batch(request $request)
{
$batch = Batch::find ($request->id);
$batch->batch_name = $request->batch_name;
$batch->save();
return redirect()->back();
}
My view
<form>
<div class="form-group">
<table class="table table-hover table-bordered" id="table">
<tr>
<th>Batch</th>
<th>Action</th>
</tr>
#foreach($batch as $bt)
<tr>
<td>{{$bt->batch_name}}</td>
<td>
Edit
Delete
</td>
</tr>
#endforeach
</table>
</div>
</form> <!-- Modal-->
<div id="edit_batch" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Edit Batch</h5>
<button type="button" data-dismiss="modal" aria-label="Close" class="close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form action="setup/batch/edit" method="POST">
{{csrf_field()}}
{{ method_field('PUT') }}
<div class="form-group">
<label>School Year</label>
<input type="text" placeholder="School Year" name="batch_name" value="{{$batch->batch_name}}" class="form-control" autocomplete="off">
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<!--End batch Modal-->
The problem is that you want to get the batch_name from the collection $batch you have to pass the data you want using the javaScript the data you need are the id and the batch_name
Here is an example :
<form>
<div class="form-group">
<table class="table table-hover table-bordered" id="table">
<tr>
<th>Batch</th>
<th>Action</th>
</tr>
#foreach($batch as $bt)
<tr>
<td>{{$bt->batch_name}}</td>
<td>
Edit
Delete
</td>
</tr>
#endforeach
</table>
</div>
</form>
<!-- Modal-->
<div id="edit_batch" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Edit Batch</h5>
<button type="button" data-dismiss="modal" aria-label="Close" class="close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form action="setup/batch/edit" method="POST">
{{csrf_field()}}
{{ method_field('PUT') }}
<input id="batch_id" type="hidden" name="id">
<div class="form-group">
<label>School Year</label>
<input id="batch_name" type="text" placeholder="School Year" name="batch_name" class="form-control" autocomplete="off">
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--End batch Modal-->
<script type="text/javascript">
$('.editBtn').on('click',function(e)
{
var link = $(this);
batch_id = link.data("id");
batch_name = link.data("batch_name");
$("#batch_id").val(batch_id);
$("#batch_name").val(batch_name);
});
</script>
I've created a button to show a modal but the thing is the button is working as an insert into DB as I don't know what's the problem in my code.
I need the modal to show a table of products fetched form the DB and showed as a table form later on in a report.
here's the modal code inside the form..
<div class="container">
<!-- ======================= Froms ======================= -->
<form action="input.php" method="post">
<div class="row">
<div class="form-group">
<label class="col-md-2 col-form-label">Attention:</label>
<div class="col-md-3">
<select class="form-control" placeholder="Choose" name="Attention" required="true">
<option>Asset</option>
<option>Consumable</option>
<option>Tool</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-form-label">PR No.:</label>
<div class="col-md-3">
<input class="form-control" type="text" name="PRno">
</div>
</div>
</div>
<!-- End of 1st Row -->
<div class="row">
<div class="form-group">
<label class="col-md-2 col-form-label">Project Name:</label>
<div class="col-md-3">
<select class="form-control" placeholder="Choose" name="ProjectName">
<option>Stock</option>
<option>In Use</option>
<option>Scrap</option>
<option>Lost</option>
</select>
</div>
</div>
</div>
<!-- End of 2nd Row -->
<!-- ============== Items Table ============= -->
<div class="row">
<div class="table-responsive">
<table class="table table-bordered" id="tab_logic">
<thead>
<tr>
<th>Item Description</th>
<th>Part Number</th>
<th>Unit</th>
<th>QTY</th>
<th>Unit Price (SR)</th>
<th>Total Price (SR)</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-4">
<button class="btn btn-secondary" data-toggle="modal">Select ID</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<!-- HEADER | MODAL -->
<h3 class="modal-title">Title Here</h3>
</div>
<!-- BODY | MODAL -->
<div class="modal-body">
Text Content
</div>
<!-- FOOTER | MODAL -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary">Save changes</button>
</div>
</div>
</div>
</div>
</td>
<td>
<strong>Record</strong>
</td>
<td>
<strong>Record</strong>
</td>
<td class="col-md-1">
<div>
<input class="form-control" type="number" name="PRno">
</div>
</td>
<td class="col-md-2">
<div>
<input class="form-control" type="number" name="price" step="0.01" min="0.01" max="1000000">
</div>
</td>
<td>
<strong>Record</strong>
</td>
<td class="col-md-1" id="deleteBtn">
<a class="btn btn-default deleteBtn">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- End of 3rd Row -->
<div class="row">
<a id="add_row" class="btn btn-default pull-right">Add</a>
</div>
<!-- End of 4th Row -->
<!-- ============== Items Table ============= -->
<div class="input-tigger">
<input type="submit" class="btn btn-primary btn-md" name="btninsert" value="Insert" action="input.php" method="post">
</div>
</form>
</div>
and as shown I added the inset button to insert all the form into the DB.
How could the modal work as a insert button instead of the actual button?
You can use javascript/Jquery to prevent the default action of the button and write methods instance of that. I think this will be helpful to you.
$(function() // execute once the DOM has loaded
{
// wire up Add Item button click event
$("#myButton").click(function(event) //give an ID to modal button
{
event.preventDefault(); // cancel default behavior
$('#myModal').modal('show'); //give an ID to modal
//... rest of add logic
});
});
I'm storing data from mysql in SESSION and passing it to another page where I make zip with all data's and download it. So far everything work just perfect.
Now I'm trying to make when user click on download button before to make actual download to enter name for the zip archive in modal window and then download the archive. So far I've made the modal but now I can't figured it out how to pass the input field text into the session. All other data is passed correctly. Here is the source so far
if(! isset($_POST['showcart'])) exit;
echo '<a class="btn btn-danger btn-lg pull-right" style="margin: 10px;" data-toggle="modal" data-target="#myModalNorm">Download All Files</a>
<table class="table table-striped table-bordered table-condensed responsive" id="sort">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>';
foreach ($_SESSION['itemid'] as $i):
$sql = "SELECT * FROM uploads WHERE upload_id = :id";
$result = $pdo->prepare($sql);
$result->bindParam(":id", $i);
$result->execute();
$resArray = $result->fetchAll();
foreach ( $resArray as $row ):?>
<div class="row">
<div class="box-content">
<tbody>
<tr>
<td class="center"><?=$row["upload_id"]?></td>
<td class="center"><?=$row["upload_title"]?></td>
<td class="center"><?=$row["upload_description"]?></td>
</tr>
</tbody>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Please enter the name for the archive
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1"></label>
<input type="text" class="form-control"
id="archiveName" placeholder="Please enter the name for the archive"/>
</div>
</form>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Close
</button>
<a href="create_zip.php" class="btn btn-primary">
Download
</a>
</div>
</div>
</div>
</div>
<?php endforeach;?>
<?php endforeach; ?>
</table> </div>
On the create_zip.php I take all from $_SESSION['itemid'] but this <input type="text" class="form-control" id="archiveName" placeholder="Please enter the name for the archive"/>
How to take also this input?
You can achieve this quite easy actually. Firstly wrap your table around <form></form>
So it will happen something like this
if(! isset($_POST['showcart'])) exit;
echo '<form action="create_zip.php" method="post">
<a class="btn btn-danger btn-lg pull-right" style="margin: 10px;" data-toggle="modal" data-target="#myModalNorm">Download All Files</a>
<table class="table table-striped table-bordered table-condensed responsive" id="sort">
<thead>
....
<!-- Modal Body -->
<div class="modal-body">
<div class="form-group">
<label for="archiveName"></label>
<input type="text" class="form-control"
id="archiveName" name="archiveName" placeholder="Please enter the name for the archive"/>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Close
<input type="submit" name="submit" value="Download" class="btn btn-primary">
</div>
</div>
</div>
</div>
<?php endforeach;?>
<?php endforeach; ?>
</table> </div></form>
Then in create_zip.php just check if isset submit button and assign variable.
if(isset($_POST['submit']))
{
//your code
$archiveName = $_POST['archiveName'];
// other source
} else { echo 'no archive'; }
i want to edit table row using bootstrap model....when i click on edit button it open up a model box with a name of designttion which i want to edit
..but when when i click on button only modalbox show but no record is shown in it...
please solve my problem
Controller
public function edit_desig(){
$this->load->model('designation_model');
$this->designation_model->edit_designation($id);
}
model
public function edit_designation($id){
$query=$this->db->get_where('designation',array('desig_id'=>$id));
return $query->result();
}
My view
<div id="myModal" class="modal fade" id="editdesigymodal" role="dialog">
<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">Edit Designation</h4>
</div>
<div class="modal-body">
<input id="editdesignnation" type="text" class="form-control" placeholder="Enter here" />
</div>
<div class="modal-footer">
<button type="button" onclick="edit_designation()" class="btn btn-success" data-dismiss="modal">Edit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-12">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>#</th>
<th>Designations</th>
</tr>
</thead>
<tbody>
<?php print_r($designation); $i=1;foreach($designation as $desig): ?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $desig['name']; ?></td>
<td><input type="button" value="Delete" class="btn btn-danger"/>
<td class="numeric"><a id= "<?php echo $desig['dkey']; ?>" onclick="edit_designation('<?php echo $desig['dkey']; ?>')" data-target="#myModal" data-toggle="modal" href="<?php echo base_url().'index.php/designation/edit_desig'; ?>"><button class="btn blue" type="button">Edit</button>
</tr>
<?php $i++;endforeach;?>
You need to pass your query result to your view
Controller
public function edit_desig(){
$this->load->model('designation_model');
$designation=$this->designation_model->edit_designation($id);// assing your query result to your variable
$data['designation'] = designation;// pas your variavle to data arrray
$this->load->view('view_name', $data);// load your view with array
}
As per your view code you need to fetch data in array form in your model
Models
public function edit_designation($id){
$query=$this->db->get_where('designation',array('desig_id'=>$id));
return $query->result_array();// change this to array
}