I want to ask my problem hehe: in my case I want to show my data selector from JavaScript to my modal.
From my code, I have done using console.log() to view the data and it works, but it still didn't want to show in my form modal. Please help me where i'm missing it hehe ...
This is my JavaScript
<script>
let namaToko = document.getElementById("namaToko").innerHTML;
let alamatToko = document.getElementById("alamatToko").innerHTML;
let buttonDetail = document.querySelectorAll('.view-detail');
buttonDetail.forEach(function(_el) {
_el.addEventListener('click', function(e) {
jQuery('#modalUpdate').modal('show');
let row = document.querySelector(`[data-row-id="${e.target.dataset.id}"]`);
let nama = row.querySelector('td:nth-child(2)');
let alamat = row.querySelector('td:nth-child(3)');
console.log(nama);
console.log(alamat);
namaToko = nama;
alamatToko = alamat;
});
});
</script>
This is my form modal and the datatable
<!-- Bagian Edit Form Modal -->
<div class="modal fade modalUpdate" tabindex="-1" role="dialog" aria-hidden="true" id="modalUpdate">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">Edit Data Toko</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method = "post" action = "library/services/formAction.php">
<input type="hidden" name="pageReferrer" value="http://localhost/city/?page=store" >
<input type="hidden" name="actionObject" value="toko" >
<input type="hidden" name="actionType" value="update" >
<div class="form-group">
<label for="namaToko" class="col-form-label">Nama Toko</label>
<input type="text" class="form-control" id="namaToko" placeholder="Masukkan Nama Toko" name="namaToko" required>
</div>
<div class="form-group">
<label for="alamatToko" class="col-form-label">Alamat Toko</label>
<input type="text" class="form-control" id="alamatToko" placeholder="Masukkan Nama Toko" name="alamatToko" required>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" name="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Akhir Edit Bagian Modal -->
<!-- /.card-header -->
<div class="card-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Toko</th>
<th>Alamat</th>
<th>Status</th>
<th>Opsi</th>
</tr>
</thead>
<tbody>
<?php
$n=1;
$toko = getDataToko();
while ($dataToko = mysqli_fetch_array($toko)) {
if($dataToko['status_ot']==1)
{
$status = "Aktif";
$idStatus = "1";
}
if($dataToko['status_ot']==2)
{
$status = "Tidak Aktif";
$idStatus = "2";
}
?>
<tr data-row-id="<?= $dataToko['id_ot'] ?>">
<td>
<?php echo $n++; ?>
</td>
<td>
<?php echo $dataToko['nama_ot'] ?>
</td>
<td>
<?php echo $dataToko['alamat_ot'] ?>
</td>
<td>
<?php echo $status ?>
</td>
<td>
<button type ="button" class ="view-detail btn btn-success" data-id="<?= $dataToko['id_ot'] ?>"> Edit </button>
<button type = "button" class = "btn btn-danger deletebtn"> Delete </button>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
And this is the picture where i'm click the Edit Button, and the data was showing in the console but didn't show up in my modal form:
If you give your form a name you can then set its input values using their name.
<form name="myForm" method = "post" action = "library/services/formAction.php">
const myForm = document.forms.myForm;
myForm.elements.namaToko.value = namaToko;
myForm.elements.alamatToko.value = alamatToko;
To set value
jQuery("#modalUpdate #namaToko").val(nama.innerText);
jQuery("#modalUpdate #alamatToko").val(alamat.innerText);
Related
i have an input into my page and it's value is changing by + and - buttons,
this input contain the directive ng-model to pass it's value to angular controller js file
and there is a button to submit the input value inside MYSQL database
the issue is that every time i press the submit button the value inserted into database returns zero value
How can i assign the value of the input which changes by the buttons to the ng-model??
The index.php file :
<!-- October Evaluation Start -->
<div class="row">
<div class="card shadow mb-4" style="width: 900px;">
<div class="card-header py-3">
<div class="row">
<div class="col">
<h6 class="m-0 font-weight-bold text-primary">October evaluation</h6>
</div>
<div class="col"><button id="plus11" class="btn btn-info text-right">Add new</button>
</div>
</div>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="exampleFormControlSelect1">select user</label>
<select class="form-control" id="exampleFormControlSelect1" ng-model="gid">
<?php
$con = mysqli_connect("localhost","root","","users");
$sql = mysqli_query($con, "SELECT name From myusers");
$row = mysqli_num_rows($sql);
while ($row = mysqli_fetch_array($sql)){
echo "<option value='". $row['name'] ."'>" .$row['name'] ."</option>" ;
}
?>
</select>
</div>
<br>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Evaluation</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-number" data-type="minus" data-field="quant[2]">
<span><i class="fas fa-minus"></i></span>
</button>
</span>
<input type="text" id="trig" name="quant[2]" class="form-control input-number" value="1" min="1" max="5" ng-model="onoctober">
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-number" data-type="plus" data-field="quant[2]">
<span><i class="fas fa-plus"></i></span>
</button>
</span>
</div>
</td>
</tr>
</tbody>
</table>
<input type="button" value="submit" class="btn btn-primary" ng-click="insertEval()" />
</form>
</div>
</div>
</div>
<!-- October Evaluation End -->
<br><br>
The AngularJS Controller js file:
var app = angular.module("myApp", []);
app.controller('userEval', function ($scope, $http) {
$scope.insertEval = function () {
$http.post(
"inserteval.php",
{
'gid': $scope.gid,
'onoctober': $scope.onoctober,
}).success(function (data) {
alert(data);
});
}
});
The inserteval.php file:
<?php
$connection = mysqli_connect("localhost","root","","users");
$data = json_decode(file_get_contents("php://input"));
if(count($data)>0)
{
$gid = mysqli_real_escape_string($connection,$data->gid);
$onoctober = mysqli_real_escape_string($connection,$data->onoctober);
$query = "INSERT INTO `myusers`(`name`, `on-october`) VALUES ('$gid','$onoctober')";
if(mysqli_query($connection,$query)){
echo "Done , new User added !";
}else {
echo "Error add !";
}
}
?>
Photos to illustrate:
In support of #Sujay Subrahmanya, you have to inform your html file that it is part of which app and which controller. Here is the syntax to inform it
<body ng-app="myApp" ng-controller="userEval">
<!-- Put your index.php content -->
</body>
I have created custom popup to show my records.
I am using CodeIgniter, I am fetching records from database and display on the view page which is working.
Now I have records in the view page like this
EmpName EMPID Mobile No. Status Action
xyz 122 0012141010 Pending view archive
mnb 123 0124541021 Pending view archive
poiu 124 0000000000 Approved view archive
What I am doing is, When user click on " pending" then it will ask for confirmation popup "Are you sure want to continue?" If the user clicks on "Later" button then the popup will close. It will not take any action. There is no issue till now.
Now let's talk about Sure button. Sure button not taking any action. I don't understand why it's not calling the submit action. Even it's not working on the archive.
Note: I don't want to use confirm() or any alert() popup
View page
<div class="white_bg pad0 m_b_20">
<div class="emp_list">
<div class=" ">
<?php if (!empty($get_emp_records)) {?>
<table cellspacing="0" id="tableData">
<thead>
<tr>
<th class="" width="3%"> <input type="checkbox" id="selectall" />
</th>
<th class="" width="15%"> EmpName </th>
<th class="" width="7%"> EMP ID</th>
<th class="" width="11%"> Mobile No. </th>
<th class="" width="13%"> Status </th>
<th class="" width="23%"> Action </th>
</tr>
</thead>
<?php
foreach ($get_emp_records as $row)
{ $encryption_id=base64_encode($this->encryption->encrypt($row->id));//encrpt the id
?>
<tbody>
<tr>
<td width="3%"><input type="checkbox" name="crm" class="crm_select" value="0" /></td>
<td>
<?php echo $row->firstname; echo $row->lastname;?>
</td>
<td>
<?php echo $row->employee_id;?>
</td>
<td>
<?php echo $row->mobileno;?>
</td>
<?php if ($row->is_approved == 1): ?>
<td>Approved</td>
<?php else: ?>
<td>
<span>Pending</span>
</td>
<?php endif; ?>
<td>View
Archive
</td>
</tr>
<!--conformation popup-->
<div class="confirmation_alert" id="popup-<?=$row->id;?>" style="display: none;">
<div class="opacity"></div>
<div class="profile_content">
<div class="profile_header clearfix">
x
<div class="profile_name_pic"> Confirmation!!! </div>
<div class="profile_header_right">
</div>
</div>
<div class="profile_body">
<div class="row">
<div class="col-md-12">
<div class="leave_reason">
<h3>Are you sure want to continue?</h3>
</div>
</div>
</div>
</div>
<div class="profile_footer clearfix">
<button type="submit" class="btn_default submit_btn" id="confirm">Sure</button>
<button type="button" class="btn_default edit_btn" onclick="closePopup(this)" data-id="<?=$row->id;?>">Later</button>
</div>
</div>
</div>
</tbody>
<?php } ?>
</table>
<?php }else{echo "No record found";}?>
</div>
</div>
</div>
Script
var url = "<?php echo base_url();?>";
function approve(obj) {
var id = $(obj).data('id');
$("#popup-" + id).show();
var el = document.getElementById("confirm");
if (el.addEventListener) {
el.addEventListener("click", function() {
//alert("clicked");
window.location = url + "Employee_control/approved_user?key=" + id;
});
}
return false;
}
function closePopup(obj) {
var id = $(obj).data('id');
$("#popup-" + id).hide();
};
Hope this will help you :
Since your r not submitting any form you should change your button type from submit to button like this :
<div class="profile_footer clearfix">
<button type="button" class="btn_default submit_btn" id="confirm">Sure</button>
<button type="button" class="btn_default edit_btn" onclick="closePopup(this)" data-id="<?=$row->id;?>">Later</button>
</div>
Your js code should be like this :
var url="<?php echo base_url();?>";
function approve(obj)
{
var id = $(obj).data('id');
$("#popup-"+id).show();
$('.submit_btn').on('click',function(e) {
alert('hi i am working');
window.location = url+"Employee_control/approved_user?key="+id;
e.preventDefault();
});
}
</script>
$(document).ready(function(){
var modalConfirm = function(callback){
$(".btn-confirm").on("click", function(){
$("#mi-modal").modal('show');
});
$("#modal-btn-si").on("click", function(){
callback(true);
$("#mi-modal").modal('hide');
});
$("#modal-btn-no").on("click", function(){
callback(false);
$("#mi-modal").modal('hide');
});
};
modalConfirm(function(confirm){
if(confirm){
alert('delete works fine');
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type='button' value="delete" class="btn btn-danger btn-confirm">
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="mi-modal">
<div class="modal-dialog modal-sm">
<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">Do you want to delete?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" id="modal-btn-si"><i class="icon-ok icon-white"></i> Yes</button>
<button type="button" class="btn btn-primary" id="modal-btn-no"><i class="icon-ban-circle icon-white"></i> No</button>
</div>
</div>
</div>
</div>
Hope it will work, try adding click event on idof submit
try using
$('#confirm').click(function()
{
// do tricks
});
I'm not very good(not at all) with ajax/js and will need a little bit help here.
I have table on page which I show data like this:
<table class="table table-bordered">
<thead>
<tr>
<th>People</th>
<th>Rate per person</th>
<th width="200px">Action</th>
</tr>
</thead>
<tbody>
<?php
$result_rates = $conn->query("SELECT * FROM rates Where user_id = 60");
if($result_rates->num_rows>0){
while ($row=$result_rates->fetch_all(MYSQLI_ASSOC)) {
foreach ($row as $r){
}
}
}
?>
<tr>
<td>1</td>
<td >$ <?php if($r['rate_one'] > 0){echo $r['rate_one'];}else{echo '0';} ?></td>
<td><button data-toggle="modal" data-target="#edit-item" class="btn btn-primary edit-item">Edit</button></td>
</tr>
<tr>
<td>2</td>
<td>$ <?php if($r['rate_two'] > 0){echo $r['rate_two'];}else{echo '0';} ?></td>
<td><button data-toggle="modal" data-target="#edit-item" class="btn btn-primary edit-item">Edit</button></td>
</tr>
I have also this modal on the Edit button click
<!-- Edit Item Modal -->
<div class="modal fade" id="edit-item" 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 Item</h4>
</div>
<div class="modal-body">
<form action="includes/update.php" method="put">
<input type="hidden" name="<?php echo $r['rate_id']; ?>" class="edit-id">
<div class="form-group">
<label class="control-label" for="title">People:</label>
<input type="text" name="rate_one" class="form-control" />
</div>
<div class="form-group">
<label class="control-label" for="title">Prise:</label>
<input type="text" name="rate_two" class="form-control" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-success crud-submit-edit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
So when I click on Edit button modal is opened and the data is loaded. If I change some data and click on Submit I've got message for success but data isn't changed in database.
This is the ajax part
/* Edit Item */
$("body").on("click",".edit-item",function(){
var id = $(this).parent("td").data('id');
var rate_one = $(this).parent("td").prev("td").prev("td").text();
var rate_two = $(this).parent("td").prev("td").text();
$("#edit-item").find("input[name='rate_one']").val(rate_one);
$("#edit-item").find("input[name='rate_two']").val(rate_two);
$("#edit-item").find(".edit-id").val(id);
});
/* Updated new Item */
$(".crud-submit-edit").click(function(e){
e.preventDefault();
var form_action = $("#edit-item").find("form").attr("action");
var rate_one = $("#edit-item").find("input[name='rate_one']").val();
var rate_two = $("#edit-item").find("input[name='rate_two']").val();
var rate_id = $("#edit-item").find(".edit-id").val();
$.ajax({
dataType: 'json',
type:'POST',
url: form_action,
data:{rate_one:rate_one, rate_two:rate_two,rate_id:rate_id}
}).done(function(data){
getPageData();
$(".modal").modal('hide');
toastr.success('Rate Updated Successfully.', 'Success Alert', {timeOut: 5000});
});
});
When I look in dev console I see that rate_id isn't passed too. Can anyone help a bit?
$id = $_POST["rate_id"];
$post = $_POST;
$sql = "UPDATE rates SET rate_one = '".$post['rate_one']."'
,rate_two = '".$post['rate_two']."'
WHERE rate_id = '".$id."'";
it is for testing purposes and thats why it isn't with prepared statements
In form data you are not setting rate id in value. Please do the below changes.
<input type="hidden" name="edit-id" class="edit-id" value=<?php echo $r['rate_id']; ?>>
and also please share the php code of update.php for better help.
I currently have the following datatable to display my list of contacts from the database. Each row, I have also insert a "Edit" & "Delete" button and have the data-id="<?=$row['id']?>" passed for the jQuery to handle when the button is clicked. When the button is clicked, through ajax, I will get the data from getcontact.php and set it to the respective input in the modal form, however the data does not seem to be displaying in the form values. May I know where did I go wrong?
tables.php
<table width="100%" class="display table table-striped table-bordered table-hover" id="contactsTable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Company</th>
<th>Position</th>
<th>Phone</th>
<th>Email</th>
<th>Gender</th>
<th>Date Registered</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($result)){
?>
<tr>
<td><?=$row['id']?></td>
<td><?=$row['name']?></td>
<td><?=$row['company']?></td>
<td><?=$row['position']?></td>
<td><?=$row['phone']?></td>
<td><?=$row['email']?></td>
<td><?=$row['gender']?></td>
<td><?=$row['dateregistered']?></td>
<td>
<!-- Edit Button trigger modal -->
<button id="editButton" type="button" class="btn btn-primary" datatoggle="modal" data-target="#editModal" data-id="<?=$row['id']?>">
Edit
</button>
</td>
<td>
<!-- Delete Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#deleteModal" data-id="<?=$row['id']?>">
Delete
</button>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
Modal (in the same page as tables.php)
<!-- Edit Contact Modal -->
<div class="modal fade" id="editModal" 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 Contact</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" method="POST" id="editForm" role="form">
<div class="form-group animated fadeIn">
<label for="nameInput" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="name" name="name" class="form-control" id="nameInput" placeholder="Name" required>
</div>
</div>
<div class="form-group animated fadeIn">
<label for="companyInput" class="col-sm-2 control-label">Company</label>
<div class="col-sm-10">
<input type="company" name="company" class="form-control" id="companyInput" placeholder="Company" required>
</div>
</div>
<div class="form-group animated fadeIn">
<label for="posInput" class="col-sm-2 control-label">Position</label>
<div class="col-sm-10">
<input type="position" name="position" class="form-control" id="posInput" placeholder="Position/Job Title">
</div>
</div>
<div class="form-group animated fadeIn">
<label for="contactInput" class="col-sm-2 control-label">Contact Number</label>
<div class="col-sm-10">
<input type="number" name="contact" class="form-control" id="contactInput" placeholder="Office/Mobile Number" data-error="Please enter a valid mobile number" required>
</div>
</div>
<div class="form-group animated fadeIn">
<label for="emailInput" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" name="email" class="form-control" id="emailInput" placeholder="Email Address">
</div>
</div>
<div class="form-group animated fadeIn">
<label for="genderInput" class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10">
<input type="gender" name="gender" class="form-control" id="genderInput" placeholder="Male/Female">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="editContact" type="button" class="btn btn-primary">Save</button>
</div>
</form>
</div>
jQuery
$("#editButton").click(function(e){
e.preventDefault();
var uid = $(this).data('id'); // get id of clicked row
$.ajax({
url: 'getcontact.php',
type: 'POST',
data: 'id='+uid,
dataType: 'json',
success: function(response){
$("#nameInput").val(result[0]);
$("#companyInput").val(result[1]);
$("#posInput").val(result[2]);
$("#contactInput").val(result[3]);
$("#emailInput").val(result[4]);
$("#genderInput").val(result[5]);
}
});
});
getcontact.php
<?php
include("dbconnect.php");
$id = $_POST['id'];
$result = mysqli_query($link, "SELECT * FROM businesscontact WHERE id=$id");
$rows = array();
while($row = mysqli_fetch_array($result)){
$rows[] = $row['*'];
}
echo json_encode($rows);
?>
1 - you are sending a encoded json from your php file and use it directly from you javascript code which is invalid so to speak,
2 - you are sending the data object to php using ajax wrongly, it should be as follows instead data: {id: uid},
3 - you are declare the wrong data-id , it should be as follows: var uid = $(this).attr('data-id');
you need to decode your json response as follows:
var uid = $(this).attr('data-id');
$.ajax({
url: 'getcontact.php',
method: 'POST',
data: {id: uid},
success: function(response){
var result = JSON && JSON.parse(response) || $.parseJSON(response);
...
// rest of your code
...
Update
and you have an issue in this part:
while($row = mysqli_fetch_array($result)){
$rows[] = $row['*'];
}
to add the whole array you need to do as follows:
while($row = mysqli_fetch_array($result)){
$rows[] = $row;
}
I am trying to pass data from a table to edit a form, using JavaScript. The problem is that I am a complete newbie at JavaScript. Can someone at least help me by giving me an example of what the code should be?
I am not doing AJAX, just simple load data with JavaScript
my model :
function edit($a)
{
$d = $this->db->get_where('crud', array('idcrud' => $a))->row();
return $d;
}
my controller :
function edit()
{
$kd = $this->uri->segment(3);
if ($kd == NULL) {
redirect('Chome');
}
$dt = $this->Mcrud->edit($kd);
$data['fn'] = $dt->firstname;
$data['ln'] = $dt->lastname;
$data['ag'] = $dt->age;
$data['ad'] = $dt->address;
$data['id'] = $kd;
$this->load->view('Vhome', $data);
}
And this is the button in the view, "Vhome", that I use as edit button :
<button class="btn btn-warning btn-xs" onclick="edit(<?php echo $row->idcrud; ?>)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>
That button will call JavaScript edit function that should call the data by "idcrud" :
function edit(idcrud)
{
$('#form')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
$('.modal-title').text('Edit Data'); // Set Title to Bootstrap modal title
// I dont know what must i do here to call my data in table crud by "idcrud"
}
And this is the form where the data gets passed to :
<div class="modal fade" id="modal_form" role="dialog">
<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>
<h3 class="modal-title">Surat Keluar</h3>
</div>
<div class="modal-body form">
<form action="Chome/edit" method="post" id="form" class="form-horizontal">
<input type="hidden" value="" name="id"/>
<div class="form-body">
<div class="form-group">
<label for="fn" class="control-label col-md-3">First Name</label>
<div class="col-md-9">
<input type="text" class="form-control" id="fn" name="fn" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="ln" class="control-label col-md-3">Last Name</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ln" name="ln" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="ag" class="control-label col-md-3">Age</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ag" name="ag" placeholder="age">
</div>
</div>
<div class="form-group">
<label for="ad" class="control-label col-md-3">Address</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ad" name="ad" placeholder="Address">
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" name="mit" class="btn btn-primary" value="Submit">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Can someone give me an example of what must I write in the JavaScript function edit?
edit :
This is full code of my view Vhome.php
Ok, it's quite easy. First put some identifiers on this section:
foreach(...){
...
<tr id="idcrud<?php echo $row->idcrud;?>">
<td class="idcrud"><?php echo $row->idcrud; ?></td>
<td class="fn"><?php echo $row->firstname; ?></td>
<td class="ln"><?php echo $row->lastname; ?></td>
<td class="age"><?php echo $row->age; ?></td>
<td class="addr"><?php echo $row->address; ?></td>
...
</tr>
And in your edit() function:
function edit(idcrud)
{
$('#form')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
$('.modal-title').text('Edit Data'); // Set Title to Bootstrap modal title
// MY EDIT:
$("input #fn").val($("td #idcrud"+idcrud + " .fn").html());
$("input #ln").val($("td #idcrud"+idcrud + " .ln").html());
//and so on
}
Some observation: Inside your form <input type="hidden" value="" name="id"/> will also need an id attribute : <input id="id" type="hidden" value="" name="id"/>. Then you can update it's value with: $("input #id").val(idcrud); in the edit() function.