I've fetched rows from MySQL and looped it with Bootstrap modal and I've made a form in modal from which the data is being sent to PHP script (update.php) with the help of ajax. But in return I am getting the output of last row only.
I need to get the record of specific student with its unique ID.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table class="table table-responsive">
<thead>
<tr>
<th>NAME</th>
<th>ROLL NUMBER</th>
<th>CONTACT NO</th>
<th>ADDRESS</th>
<th>EDIT</th>
</tr>
</thead>
<tbody>
<?php
$query = "SELECT * FROM students ORDER BY id DESC";
$query_run = mysqli_query($connection, $query);
if($query_run){
while($row = mysqli_fetch_assoc($query_run)){
$id = $row['id'];
$name = $row['name'];
$rollno = $row['rollno'];
$contact = $row['contact'];
$address = $row['address'];
echo "<tr>";
echo '<td>' . $name . '</td>';
echo '<td>' . $rollno . '</td>';
echo '<td>' . $contact . '</td>';
echo '<td>' . $address . '</td>';
echo "<td><button class='btn btn-link btn-custom dis' data-toggle='modal' data-target='#myModal$id'>
EDIT</button> </td>";
echo '</tr>';
?>
<div class="modal fade" id="myModal<?php echo $id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">EDIT RECORD</h4>
</div>
<div class="modal-body">
<form id="updateValues" action="update.php" method="POST" class="form">
<div class="form-group">
<label for="name">NAME</label>
<input type="text" class="form-control" name="name" id="name" value="<?php echo $name; ?>">
</div>
<div class="form-group">
<label for="rollno">ROLL NO</label>
<input type="text" class="form-control" name="rollno" id="rollno" value="<?php echo $rollno; ?>">
</div>
<div class="form-group">
<label for="contact">CONTACT</label>
<input type="text" class="form-control" name="contact" id="contact" value="<?php echo $contact; ?>">
</div>
<div class="form-group">
<label for="address">ADDRESS</label>
<textarea class="form-control" rows="3" name="address" id="address"><?php echo $address; ?></textarea>
</div>
<input type="hidden" name="id" value="<?php echo $id; ?>">
<input type="submit" class="btn btn-primary btn-custom" value="Save changes">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div id="results"></div>
</div>
</div>
</div>
</div>
<?php }
}?>
</tbody>
</table>
</body>
</html>
JS:
$(document).ready(function(){
var values, url;
$('#updateValues').submit(function(e){
e.preventDefault();
values = $(this).serialize();
url = $(this).attr('action');
$.post(url, values, function(data){
$('#results').html(data);
});
});
});
Update.php:
<?php
if(isset($_POST['name'])&&isset($_POST['rollno'])&&isset($_POST['contact'])&&isset($_POST['address'])){
$id = $_POST['id'];
$name = $_POST['name'];
$rollno = $_POST['rollno'];
$contact = $_POST['contact'];
$address = $_POST['address'];
echo "$id $name $rollno $contact $address";
}else{
echo 'ERROR!';
}
?>
This is not tested/debugged but refactor your code similar to this:
<?php
$query = "SELECT * FROM students ORDER BY id DESC";
$query_run = mysqli_query($connection, $query);
if($query_run){
$out = '
<table class="table table-responsive">
<thead>
<tr>
<th>NAME</th>
<th>ROLL NUMBER</th>
<th>CONTACT NO</th>
<th>ADDRESS</th>
<th>EDIT</th>
</tr>
</thead>
<tbody>
';
while($row = mysqli_fetch_assoc($query_run)){
$out .= '<tr class="trID_' .$row['id']. '">';
$out .= '<td class="td_name">' . $row['name'] . '</td>';
$out .= '<td class="td_rollno">' . $row['rollno'] . '</td>';
$out .= '<td class="td_contact">' . $row['contact'] . '</td>';
$out .= '<td class="td_address">' . $row['address'] . '</td>';
$out .= "<td><button class='td_btn btn btn-link btn-custom dis'>EDIT</button> </td>";
$out .= '</tr>';
}
$out .= '</tbody></table>
echo $out;
?>
<script>
$(document).ready(){
$('.td_btn').click(function(){
var $row = $(this).closest('tr');
var rowID = $row.attr('class').split('_')[1];
var name = $row.find('.td_name').val();
var rollno = $row.find('.td_rollno').val();
var contact = $row.find('.td_contact').val();
var address = $row.find('.td_address').val();
$('#frm_id').val(rowID);
$('#frm_name').text(name);
$('#frm_rollno').text(rollno);
$('#frm_contact').text(contact);
$('#frm_address').text(address);
$('#myModal').modal('show');
});
});//END document.ready
</script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">EDIT RECORD</h4>
</div>
<div class="modal-body">
<form id="updateValues" action="update.php" method="POST" class="form">
<div class="form-group">
<label for="name">NAME</label>
<input type="text" class="form-control" name="name" id="frm_name">
</div>
<div class="form-group">
<label for="rollno">ROLL NO</label>
<input type="text" class="form-control" name="rollno" id="frm_rollno">
</div>
<div class="form-group">
<label for="contact">CONTACT</label>
<input type="text" class="form-control" name="contact" id="frm_contact">
</div>
<div class="form-group">
<label for="address">ADDRESS</label>
<textarea class="form-control" rows="3" name="address" id="frm_address"></textarea>
</div>
<input type="hidden" name="frm_id">
<input type="submit" class="btn btn-primary btn-custom" value="Save changes">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div id="results"></div>
</div>
</div>
</div>
</div>
<?php
}
}
?>
Notes:
(1) Create the entire table in a variable, then output the variable all at once.
(2) You only need one modal, not one modal for each table row. Therefore, remove modal creation from inside while loop.
(3) Use jQuery to:
(a) detect button click in row
(b) get table data for that row
(c) populate fields in modal
(d) display modal
You are using Bootstrap, which uses jQuery, so it makes sense to use jQuery to do this.
(4) Using jQuery to get values from table cells vs. input fields:
(a) .text() - from table cells
(b) .val() - from <input> or <textarea>
Here is a jsFiddle Demo you can play with that demonstrates how you can use jQuery to populate the modal depending on the row that was clicked.
Related
I have a data table that displays the counter table in the database.
It has create and edit buttons, each linked to a pop-up modal. The create button works fine, but I'm having an issue with the edit button.
When I click the edit button in a row, it's supposed to retrieve the data from the database table and display them in the text fields of the edit modal.
The data gets retrieved without any issues. But, the only thing that gets displayed in the edit modal is the id. The rest of the data gets displayed in the create modal.
I tried to find the error but I couldn't figure it out yet.
This is the counter table
CREATE TABLE IF NOT EXISTS `counter` (
`id` int(11) UNSIGNED NOT NULL AUTO_INCREMENT,
`name` varchar(50) DEFAULT NULL,
`description` varchar(255) DEFAULT NULL,
`created_at` date DEFAULT NULL,
`updated_at` date DEFAULT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=28 DEFAULT CHARSET=utf8;
Here's how the code goes.
create modal
<div id="addModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add New Counter</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form action="" method="post" id="form-data" novalidate>
<div class=" form-group">
<label>Counter Name</label>
<input type="text" name="name" id="name" class="form-control" required>
</div>
<div class=" form-group">
<label>Description</label>
<textarea name="desc" id="desc" class="form-control" rows="4" cols="50" required></textarea>
</div>
<div class="form-group">
<label>Status</label><br>
<input type="radio" id="status" name="status" value="1" checked required>
<label for="avtive">Active</label><br>
<input type="radio" id="status" name="status" value="0">
<label for="avtive">Inactive</label><br>
</div>
<div class="form-group">
<input type="reset" class="btn btn-secondary" />
<input type="submit" id="insert" name="insert" value="Add Counter" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
edit modal
<div id="editModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Counter</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form action="" method="post" id="edit-form-data" novalidate>
<input type="text" name="id" id="id">
<div class=" form-group">
<label>Counter Name</label>
<input type="text" name="name" id="name" class="form-control" required>
</div>
<div class=" form-group">
<label>Description</label>
<textarea name="desc" id="desc" class="form-control" rows="4" cols="50" required></textarea>
</div>
<div class="form-group">
<label>Status</label><br>
<input type="radio" id="status" name="status" value="1" checked required>
<label for="avtive">Active</label><br>
<input type="radio" id="status" name="status" value="0">
<label for="avtive">Inactive</label><br>
</div>
<div class="form-group">
<input type="reset" class="btn btn-secondary" />
<input type="submit" id="update" name="update" value="Edit Counter" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
script
<script>
$(document).ready(function() {
//edit ajax request
$("body").on("click", ".editBtn", function(e) {
// console.log("working");
e.preventDefault();
edit_id = $(this).attr('id');
$.ajax({
url: "../../php/admin-action.php",
type: "POST",
data: {
edit_id: edit_id
},
success: function(response) {
data = JSON.parse(response);
// console.log(data);
$("#id").val(data.id);
$("#name").val(data.name);
$("#desc").val(data.description);
$("#status").val(data.status);
},
error: function(response) {
toastr.error('Error detected while adding, Please try again later!');
}
})
})
// update ajax request
$("#update").click(function(e) {
if ($("#edit-form-data")[0].checkValidity()) {
e.preventDefault();
$.ajax({
url: "../../php/admin-action.php",
type: "POST",
data: $("#edit-form-data").serialize() + "&action=update",
success: function(response) {
toastr.success('Counter edited successfully!');
setInterval(2000);
$("#editModal").modal('hide');
$("#edit-form-data")[0].reset();
showAllCounters();
},
error: function(response) {
toastr.error('Error detected while editing, Please try again later!');
}
})
}
})
});
</script>
admin-action.php
// handle view counter list
if (isset($_POST['action']) && $_POST['action'] == 'view') {
$output = '';
$data = $db->read_counter();
if ($db->totalRowCount_counter() > 0) {
$output .= '<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Counter</th>
<th>Description</th>
<th>Created Date</th>
<th>Updated Date</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>';
foreach ($data as $row) {
$output .= ' <tr>
<td>' . $row['id'] . '</td>
<td>' . $row['name'] . '</td>
<td>' . $row['description'] . '</td>
<td>' . $row['created_at'] . '</td>
<td>' . $row['updated_at'] . '</td>
<td>' . $row['status'] . '</td>
<td class="project-actions text-right">
<a class="btn btn-primary btn-sm viewBtn" id="' . $row['id'] . '">
<i class="fas fa-folder">
</i>
View
</a>
<a class="btn btn-info btn-sm editBtn" data-toggle="modal" data-target="#editModal" id="' . $row['id'] . '">
<i class="fas fa-pencil-alt">
</i>
Edit
</a>
<a class="btn btn-danger btn-sm dltBtn" id="' . $row['id'] . '">
<i class="fas fa-trash">
</i>
Delete
</a>
</td></tr>';
}
$output .= '</tbody></table>';
echo $output;
} else {
echo '<h3 class="text-center text-secondary mt-5">:(No counters present in the database!)</h3>';
}
// print_r($data);
}
if (isset($_POST['action']) && $_POST['action'] == 'insert') {
$name = $_POST['name'];
$desc = $_POST['desc'];
$status = $_POST['status'];
$db->insert_counter($name, $desc, $status);
}
if (isset($_POST['edit_id'])) {
$id = $_POST['edit_id'];
$row = $db->getCounterByID($id);
echo json_encode($row);
}
if (isset($_POST['action']) && $_POST['action'] == 'update') {
$id = $_POST['id'];
$name = $_POST['name'];
$desc = $_POST['desc'];
$status = $_POST['status'];
$db->update_counter($id, $name, $desc, $status);
}
admin-db.php
public function getCounterById($id)
{
$sql = "SELECT * FROM counter WHERE id = $id";
$stmt = $this->conn->prepare($sql);
$stmt->execute(['id' => $id]);
$result = $stmt->fetch(PDO::FETCH_ASSOC);
return $result;
}
public function update_counter($id, $name, $desc, $status)
{
$sql = "UPDATE counter SET name=:name, desc=:desc,status=:status WHERE id = :id ";
$stmt = $this->conn->prepare($sql);
$stmt->execute(['name' => $name, 'desc' => $desc, 'status' => $status, 'id' => $id]);
return true;
}
I'm posting all of the code because I'm not exactly sure where the problem is. Apologies for making it so long.
FIRST OF ALL
You should not use the same value for HTML id attribute. You used in both create and edit form the same ids for the input fields. The value of the id attribute has to be unique on the entire HTML page, even if some parts are hidden.
CURRENT BEHAVIOR
Your create form does not have an input field with attribute id='id', that is why the corresponding input field is filled after the ajax request.But the other 4 input fields exist in both forms. Because the create form is placed before the update form in your HTML content, the input fields of create form are filled.
SOLUTION
Please change your success function of your .editBtn click handler like this:
success: function(response) {
data = JSON.parse(response);
// console.log(data);
let $form = $('#edit-form-data');
let radioId = data.status === "1" ? "#editStatusActive" : "#editStatusInactive";
$form.find("input[id='id']").val(data.id);
$form.find("input[name='name']").val(data.name);
$form.find("[name='desc']").val(data.description);
$form.find(radioId).click();
},
},
Then update the form group for status in your update form like this:
<div class="form-group">
<label>Status</label><br>
<input type="radio" name="status" id="editStatusActive" value="1" checked required>
<label for="editStatusActive">Active</label><br>
<input type="radio" name="status" id="editStatusInactive" value="0">
<label for="editStatusInactive">Inactive</label><br>
</div>
officer_cashier.php
This is my modal form I want to display a table upon clicking the button add from cashier_template.php in DIV tag id=add_table
<div class="modal fade" id="fee_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Process payment</h5>
<button type="button" class="close get_close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="POST" action="officer_cashier.php" id="reg">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Student information</legend>
<input type="hidden" class="form-control" id="id" name="id">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" readonly="readonly">
</div>
<div class="form-group">
<label for="course">Course</label>
<input type="text" class="form-control" id="course" name="course" readonly="readonly">
</div>
<div class="form-group">
<label for="sem">Semester</label>
<input type="text" class="form-control" id="sem" name="sem" readonly="readonly">
</div>
<div class="form-group">
<label for="year">Year</label>
<input type="text" class="form-control" id="year" name="year" readonly="readonly">
</div>
</fieldset>
<button class="btn btn-sucess add_fees" id="add_fees">add</button >
<div class="form-group" id="display_table"></div><!-- I want to display the table inside of this DIV tag -->
</form>
</div>
</div>
</div>
</div>
script
This is my AJAX the course,sem,year data is what i need to display the table, so if those three fetch successfully I want to display it in my DIV tag #display_table
$(document).on('click', '.add_fees', function(){
$.ajax({
type: "post",
url: "../templates/cashier_template.php",
data: {
"course": $("#course").val(),
"semester": $("#sem").val(),
"year": $("#year").val(),
},
success: function(data) {
$("#display_table").html(data);
}
});
});
cashier_template.php
This is the cashier template once the AJAX pass the data and matcher the query it should display in modal but I wasnt getting
<?php
ob_start();
include("../include/userlogin.php");
if(!isset($_SESSION))
{
session_start();
}
if($_SESSION['usertype'] != 1){
header("location: login.php?success=1");
$_SESSION['message'] = "You cannot access this page unless you are a officer!";
}
ob_end_flush();
$yearId = $_POST['year'];
$courseId = $_POST['course'];
$semesterId = $_POST['semester'];
$result = $connect->query("SELECT id, total_fees, fee_names FROM manage_fees WHERE year_lvl = '$yearId' AND course = '$courseId' AND semester = '$semesterId'") or die($connect->error());
while($row = $result->fetch_assoc()):
?>
<div class="table-sorting table-responsive" style="margin-top: 1rem;">
<table class="table table-striped table-bordered table-hover" id="table1">
<thead>
<tr class="p-4">
<th scope="col">Select</th>
<th scope="col">School fees</th>
<th scope="col">Amount</th>
<th scope="col">type</th>
</tr>
</thead>
<tbody>
<?php
$result = $connect->query("SELECT * FROM fees;") or die($connect->error());
while($row = $result->fetch_assoc()){
?>
<tr>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input check_amount" name="local_fees">
<label class="custom-control-label" for="check_amount"></label>
</div>
</td>
<td name="selected_fees"><?php echo $row['fee_name']; ?></td>
<td name="amount"><?php echo $row['amount']; ?></td>
<td><?php echo $row['type']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<?php endwhile; ?>
<script src="../js/datable.js"></script>
You are overwriting the $result object (and subsequently the $row obect) when you query fees. So the big loop at the top:
while($row = $result->fetch_assoc()):
is getting overwritten down the line by
$result = $connect->query("SELECT * FROM fees;");
while($row = $result->fetch_assoc()){
But really, there's no need to query FEES in every loop. Why not first get all the fees data into an array, then just access it in the other loop. So first, at the top of your php script:
<?php
$fees=array();
$result = $connect->query("SELECT * FROM fees;");
while($row = $result->fetch_assoc()){ $fees[]=$row; }
?>
Then in your main loop
<?php
foreach ($fees as $fee) {
?>
...
<td name="selected_fees"><?php echo $fee['fee_name']; ?></td>
<td name="amount"><?php echo $fee['amount']; ?></td>
<td><?php echo $fee['type']; ?></td>
</tr>
<?php } ?>
So my purpose is to get the ID from a database and making the id ready to be used for modal. I know that I can use input type=hidden but I don't know for sure it is safe because in inspect element, user can edit it. I'm thinking also of session but I don't have any idea how can I do it. So what are the ways I can do to make the id not editable after submitting? Or how can i put it in array and match the id? Here is my code I used
class.names.php
public function getAllNames()
{
$obj = new Db();
$stmt = $obj->connect()->query("SELECT * FROM persons");
while ($person = $stmt->fetch())
{
echo "<tr>";
echo "<td>".$person['first_name']."</td>";
echo "<td>".$person['last_name']."</td>";
echo "<td><a id=\"".$person['person_id']."\"type=\"button\" data-target-toggle=\"modal\" data-target=\"#edit-name-modal\" class=\"btn btn-danger edit_data\" href=\"#\">Update</a></td>";
echo "</tr>";
}
}
names.js
$(document).on('click', '.edit_data', function(){
var person_id = $(this).attr("id");
$.ajax({
url:"/data/updatename.php",
method:"POST",
data:{person_id:person_id},
dataType:"json",
success:function(data){
$('#first_name').val(data.first_name);
$('#last_name').val(data.last_name);
$('#person_id').val(data.person_id);
$('#edit-name-modal').modal('show');
}
});
});
updatename.php
<?php
include_once 'db.php';
if(isset($_POST["person_id"]))
{
$person_id = $_POST["person_id"];
$object = new Dbc();
$stmt = $object->connect()->prepare("SELECT * FROM persons WHERE person_id=?");
$stmt->execute([$person_id]);
$profile_info = $stmt->fetch();
echo json_encode($profile_info);
}
?>
namelist.php
<div class="modal fade" id="edit-name-modal" name="edit-name" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="POST" enctype="multipart/form-data" action="namelist.php">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Update Name's List</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>First Name</label>
<input type="text" id="first_name" name="first_name" class="form-control">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" id="last_name" name="last_name" class="form-control">
</div>
<input type="hidden" id="person_id" name="person_id">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" name="update" class="btn btn-primary">Update</button>
</div>
</div>
</form>
</div>
I have written a dependable dropdown and its first get the id from the first dropdown and set the div id of the second drop down through ajax call. The issue is when I try to do with html() the second drop down first value can not be selected.
Here is the image of the dependable dropdown
Here is the code I am trying:
<div class="modal fade" id="addNewFloor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
<div class="modal-dialog" role="document" style="">
<div class="modal-content">
<?php echo form_open('registrations/saveNewFloor'); ?>
<?php if (isset($message)) { ?>
<CENTER><h3 style="color:green;">Data inserted successfully</h3></CENTER><br>
<?php } ?>
<div class="modal-header">
<img src="assets/backend/img/floor.png" style="widows:50px;height:50px">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="myModalLabel">Register New Floor</h4>
</div>
<hr class="colorgraph">
<div id="floorModelBox"></div>
<div class="modal-body" style="margin-bottom:2px;padding-top:1px">
<table class="table table-condensed" style="background-color:#F5F5F5;margin-bottom:1px">
<caption><h3><small>Floor Path</small><h3></caption>
<!------- Select Branch --------------------->
<tr><td>Select Branch</td><td >
<select class="form-control" name="branchId_floorModel1" id="branchId_floorModel" onChange="return selectBuildings_floorModel(this.value);selectBuildings_floorModel323();clearFloors();clearSections();clearIots();clearGateways();myFunction();" >
<option value="0" selected> -- select Branch --</option>
<?php
foreach($groups as $row)
{
echo '<option value="'.$row->branchId.'">'.$row->branchName.'</option>';
}
?>
</select></td></tr>
<tr><td>Select Building</td><td>
<select class="form-control" name="buildingBox_floorModel1" style="width:100%;" id="buildingBox_floorModel" required>
<option selected ="selected" value="0">select Building</option></select>
</td></tr>
</table>
<hr/>
<table class="table table-condensed" style="margin-top:2px;margin-bottom:1px">
<caption><h3><small>Floor Details </small><h3></caption>
<tr><td>Floor Name :</td><td > <input type="text" class="form-control input-sm" name="floorName_FloorModel" id="floorName_FloorModel" /></td></tr>
<tr><td>Floor No : </td><td><input type="text" class="form-control input-sm" placeholder="building no" name="floorNo_FloorModel" id="floorNo_FloorModel" /></td></tr>
</table>
</div>
<div class="modal-footer" style="margin-bottom:2px;padding-top:1px">
<hr class="colorgraph">
<button type="button" class="btn btn-primary " data-dismiss="modal" onClick="window.location.reload();">CLOSE</button>
<?php echo form_submit(array( 'class'=>'btn btn-success ', 'id' => 'submit', 'value' => 'Submit')); ?>
<?php echo form_close(); ?><br/>
<div id="fugo">
</div>
</div>
</div>
</div>
</div>
function selectBuildings_floorModel(branchId) {
$.ajax({
url: '<?php echo base_url();?>registrations/get_building_section/' + branchId ,
success: function (response)
{
jQuery('#buildingBox_floorModel').html(response);
}
});
}
//controller method
function get_building_section($branchId)
{
$this->MBuilding->get_building_by_branch($branchId);
$sections = $this->db->get_where('building' , array(
'branchId' => $branchId
))->result_array();
// print_r($sections);die;
foreach ($sections as $row) {
//echo $row['buildingName'];
//
echo '<option value="' . $row['buildingId'] . '">' . $row['buildingName'] . '</option>';
}
}
I even tried with the append() method, but then it's not clearing the dropdown list value.
Try Following...
$("#branchId_floorModel").change(function (){
// Your Code....
});
I'm trying to work out how to get the value of a checkbox submit it to a variable which is an id from a sql db.
Below is my current code:
-- Index.php
<?php
$sql = "SELECT * FROM `file`";
if (!$result = $db->query($sql)){
die('There was an error running the query [' . $db->error . ']');
}
?>
<form method="post">
<button class="btn btn-success">New</button>
<button type="submit" class="btn btn-warning">Edit</button>
<button class="btn btn-danger">Delete</button>
<table class="table table-condensed">
<thead>
<th>#</th>
<th>Name</th>
<th>Category</th>
<th>Date</th>
</thead>
<tbody>
<?php while($row = $result->fetch_assoc()){ ?>
<td><input type="checkbox" name="id_grab" value="<?php echo $row['file_id']; ?>"></td>
<td><?php echo $row['file_name']; ?></td>
<td><?php echo $row['file_category']; ?></td>
<td><?php echo date('d-m-y', strtotime($row['file_date'])); ?></td>
</tbody>
<?php } ?>
</table>
</form>
-- file_edit.php
<?php include('../db_connect.php') ;
$id=isset($_POST['id_grab']);
$sql = "SELECT * FROM `file` WHERE file_id = $id";
if (!$result = $db->query($sql)){
die('There was an error running the query [' . $db->error . ']');
}
$row = $result->fetch_assoc();
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h4 class="modal-title" id="myModalLabel">Edit Invoice / Receipt</h4>
</div>
<div class="modal-body">
<form action="../includes/file_update.php" method="post" role="form" enctype="multipart/form-data">
<div class="form-group">
<label for="File_Name">Name</label>
<input type="text" name="file_name" class="form-control" id="file_name" value="<?php echo $row['file_name']; ?>">
</div>
<div class="form-group">
<lable for="File_Category">Category</label>
<input type="text" name="file_category" class="form-control" id="file_category" placeholder="Financial">
</div>
<div class="form-group">
<label for="file_tag">Tag</label>
<input type="text" name="file_tag" class="form-control" id="file_tag" placeholder="statement">
</div>
<div class="form-group">
<label for="file_description">Description</label>
<input type="text" name="file_description" class="form-control" id="file_description">
</div>
<div class="form-group">
<label for="file_date">Date</label>
<input type="date" name="file_date" class="form-control" id="file_date">
</div>
<div class="form-group">
<label for="file_location">File</label>
<input type="file" class="form-control" name="file_location" value="file">
<p class="help-block">Select appropriate file for upload.</p>
</div>
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success">Upload</button>
</form>
</div>
I can't work it out, spent hours looking online... My concern is at it's using Bootstraps Modal I wasn't sure if it would be able to grat the POST data... As if I enter the ID manually it works...
Any assistance would be greatly appreciated.
change this
$id=isset($_POST['id_grab']);
to
$id=isset($_POST['id_grab'])?$_POST['id_grab']:'';
//if id_grab dont have a value then $id value will be ''
isset() Returns TRUE if var exists and has value other than NULL, FALSE otherwise.