I got bug when I use JQuery data-id in jQuery Datatables. For the first 10 (Ten) record working well. But when I click navigation table to enter to the second page, the data-id value not shown. Please see my code below :
<i class="icon-plus2 pr-2"></i> Tambah Data
<table class="table datatable-basic table-striped table-hover">
<thead>
<tr>
<th class="text-center">#</th>
<th>Nama Jenis Obat</th>
<th class="text-center">Aksi</th>
</tr>
</thead>
<tbody>
<?php
$x = 1;
$sdata = mysqli_query($konek, "SELECT * FROM e_jnsobat ORDER BY nm_jnsobat ASC");
while($ddata = mysqli_fetch_array($sdata)) {
echo "
<tr>
<td class='text-center'>" . $x . ".</td>
<td>" . $ddata['nm_jnsobat'] . "</td>
<td class='text-center'>
<div class='btn-group'>
<a href='#' class='breadcrumb-elements-item dropdown-toggle' data-toggle='dropdown' aria-expanded='false'>
<i class='icon-grid3'></i>
</a>
<div class='dropdown-menu dropdown-menu-right' x-placement='bottom-end' style='position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(310px, 40px, 0px);'>
<a href='#' data-toggle='modal' data-target='#modalEdit' data-id='".$ddata['id_jnsobat']."' class='dropdown-item btedit'><i class='icon-pencil7'></i> Edit Data</a>
<div class='dropdown-divider'></div>
<a href='#' data-toggle='modal' data-target='#modalHapus' data-id='".$ddata['id_jnsobat']."' data-nama='".$ddata['nm_jnsobat']."' class='dropdown-item bthapus'><i class='icon-trash'></i> Hapus Data</a>
</div>
</div>
</td>
</tr>
";
$x++;
}
?>
</tbody>
</table>
<div id="modal_theme_custom" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<form method="post">
<div class="modal-header bg-brown">
<h6 class="modal-title">Tambah Data</h6>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Nama Jenis Obat :</label>
<input type="text" class="form-control" name="nm_jnsobat" placeholder="Nama Jenis Obat" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
<button type="submit" name="tambahin" class="btn bg-brown">Tambah Data</button>
</div>
</form>
</div>
</div>
</div>
<div id="modalEdit" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-teal-600">
<h4 class="modal-title">Edit Data</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body pb-0">
<form method="post">
<input type="hidden" name="id_jnsobat" id="id_jnsobat_edit">
<div class="form-group">
<label>Nama Jenis Obat :</label>
<input type="text" name="nm_jnsobat" class="form-control" placeholder="Nama Jenis Obat" id="nm_jnsobat" required>
</div>
<div class="form-group">
<div class="alert alert-warning">Pastikan data yang anda tambahkan adalah benar.</div>
<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
<button type="submit" name="editin" class="btn bg-teal-800">Edit Data</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="modalHapus" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<form method="post">
<input type="hidden" name="id_jnsobat" id="id_jnsobat_hapus">
<div class="modal-header bg-danger">
<h5 class="modal-title">Konfirmasi Hapus Data</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="alert alert-danger">Anda yakin akan menghapus data <b id="nm_jnsobat_hapus"></b>? Data yang sudah dihapus tidak bisa dikembalikan lagi.</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
<button type="submit" name="hapusin" class="btn bg-danger">Ya! Hapus permanen data</button>
</div>
</form>
</div>
</div>
</div>
And this is the javascript code:
<script type="text/javascript">
$(document).ready(function() {
$('.btedit').on('click', function() {
const id = $(this).data('id');
$('#id_jnsobat_edit').val(id);
console.log("Datanya : "+id);
$.ajax({
type: 'get',
url: "<?php echo docroot('ajax/jnsobat/'); ?>"+id,
async: false,
dataType: 'json',
success: function(data) {
//console.log("Datanya : "+data);
$('#nm_jnsobat').val(data[0].nm_jnsobat);
}
});
});
$('.bthapus').on('click', function() {
const id = $(this).data('id');
const nama = $(this).data('nama');
$('#id_jnsobat_hapus').val(id);
//$('#nm_userxx').val(nama);
document.getElementById("nm_jnsobat_hapus").innerHTML = nama;
//console.log("data : " + nama);
});
});
</script>
on the first 10 recode its work well, but when I click button to go to the second page of datatable navigation the data-id dosen't work... I dont know where is the problem... sory about my English...
As per the comments above here is the answer...
The below only listens to click events that are rendered before the code is executed.
$('.bthapus').on('click', function() { ... });
Replacing that with the below listens to the click event on the entire document, so dynamically created elements (such as your table pagination) will be included.
$(document).on('click', '.btedit', function() {
Related
I want to edit/ update data that show in my page. The edit/ update data should done in modal. Below is code that I tried and it didn't work.
I tried lots of methods to done this. But not succeeded. IF anyone can help on this it would be very grateful. Thank you.
<?php
$query1=mysqli_query($dbconn, "SELECT * FROM food_menu WHERE status='1' AND category='Breakfast'" );
?>
<!-- Begin Page Content -->
<div class="container-fluid">
<div class="card-deck">
<div class="card border-dark">
<div class="card-body">
<h3 class="card-title"><b>Breakfast Menu</b></h3>
<?php
while ($row1=mysqli_fetch_array($query1)){
$id=$row1['id'];
$name=$row1['name'];
$details=$row1['details'];
$category=$row1['category'];
$price=$row1['price'];
$image=$row1['image'];
?>
<div class="row">
<div class="col">
<div class="zoom">
<img src="<?php echo $image; ?>" class="rounded float-left img-thumbnail" alt="Food Image">
</div>
</div>
<div class="col">
<div hidden><?php echo $id; ?></div>
<h5><?php echo $name; ?></h5>
<h7><?php echo $details; ?></h7><br>
<h7><b>Rs. <?php echo $price; ?></b></h7><br>
<div class="text-right"><button type="button" class="btn btn-primary btn-sm editbtn" name="edit" id="edit" data-id="<?php echo $id; ?>" data-toggle="modal"><span class="icon text-white-100">
<i class="fas fa-pencil-alt"></i>
</span>UPDATE</button>
</div>
</div>
</div>
<br>
<?php } ?>
<button type="button" class="btn btn-success" name="add" id="add">Add New</button>
</div>
</div>
</div>
</div>
<!-- End of Page Content -->
My Modal is below
<div class="modal fade" id="editmodal" name="editmodal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<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">
<input type="text" name="fid" name="fid" >
<input type="text" name="food_name" id="food_name">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
JavaScript Used.
<script>
$(document).ready(function(){
$('.editbtn').on('click', function(){
$('#editmodal').modal('show');
var ids = $(this).attr('data-id');
$(".modal-body #fid").val( ids );
$(".modal-body #food_name").val( ids );
});
});
</script>
When I click update button the modal is shown but data is not showing the modal.
I have created the ajax code to display the details using bootstrap modal version 3.3.7 (refers to <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">) and it works fine.
but when I want to implement it using bootstrap 4, I have a problem which when clicking "process", there is no response and the Modal does not appear.
<div class="container">
<h2> Proses Penerimaan Siswa Baru </h2>
<table id="tablee" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th> ID PSB </th>
<th> Nama </th>
<th> Sekolah Asal </th>
<th> Kelas </th>
<th> Tahun Pelajaran </th>
<th> Action </th>
</tr>
</thead>
<tbody>
<?php
$sql="SELECT * FROM psbsmp";
$resultset=mysqli_query($connection,$sql) or die(mysqli_error());
while ($rows=mysqli_fetch_array($resultset)){
?>
<tr id="<?php echo $rows['id']; ?>">
<td data-target="idpsb"><?php echo $rows["idpsb"]; ?></td>
<td data-target="nama"><?php echo $rows["nama"]; ?></td>
<td> <?php echo $rows["sekolahasal"]; ?></td>
<td> <?php echo $rows["kelas"]; ?></td>
<td> <?php echo $rows["tahunmasuk"]; ?></td>
<td>Process</td>
</tr>
<?php
}
?>
</tbody>
</table>
and this is the code for modal:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">PROSES PENERIMAAN {Data Calon Siswa}</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-6 col-sm-6 col-md-6">
<div class="form-group">
<label class="control-label">ID PSB</label>
<input class="form-control" type="text" id="idpsb" name="idpsb" disabled>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6">
<div class="form-group">
<label class="control-label"> ID SISWA </label>
<input class="form-control" type="text" id="idsiswa" name="idsiswa" >
</div>
</div>
</div>
<div class="row">
<div class="col-8 col-sm-8 col-md-8">
<div class="form-group">
<label class="control-label">NAMA</label>
<input class="form-control" type="text" id="nama" name="nama" disabled>
</div>
</div>
<div class="col-4 col-sm-4 col-md-4 ">
<div class="form-group">
<label class="control-label">NISN</label>
<input class="form-control" type="text" id="nisn" name="nisn">
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">BEASISWA</label>
<input class="form-control" type="text" id="beasiswa" name="beasiswa">
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">PENERIMAAN</label>
<select class="form-control" name="keterangan" id="keterangan">
<option value="0"> Please Select </option>
<option value="lulus"> Lulus</option>
<option value="lulus bersyarat"> Lulus Bersyarat</option>
<option value="tidak lulus"> Tidak Lulus</option>
</select>
</div>
<input type="hidden" id="userId" class="form-control">
</div>
</div>
</div>
</div>
<div class="modal-footer">
Process
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Ajax code
$(document).ready(function(){
// append values in input fields
$(document).on('click','a[data-role=update]',function(){
var id = $(this).data('id');
var idpsb = $('#'+id).children('td[data-target=idpsb]').text();
var nama = $('#'+id).children('td[data-target=nama]').text();
$('#idpsb').val(idpsb);
$('#nama').val(nama);
$('#userId').val(id);
$('#myModal').modal('toggle');
});
// now create event to get data from fields and update in database
$('#save').click(function(){
var id = $('#userId').val();
var idpsb = $('#idpsb').val();
var nama = $('#nama').val();
$.ajax({
url : 'connection.php',
method : 'post',
data : {idpsb : idpsb , nama : nama , id : id},
success : function(response){
// now update user record in table
$('#'+id).children('td[data-target=idpsb]').text(idpsb);
$('#'+id).children('td[data-target=nama]').text(nama);
$('#myModal').modal('toggle');
}
});
});
});
does it relate to the function of the button that I use is <a></a> element?
Here is simple example of working modal, check the bootstrap 4 links in your application and the html content for modal
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" 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">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
use css to display modal in your javascript
$.ajax({
url : 'connection.php',
method : 'post',
data : {idpsb : idpsb , nama : nama , id : id},
success : function(response){
// now update user record in table
$('#'+id).children('td[data-target=idpsb]').text(idpsb);
$('#'+id).children('td[data-target=nama]').text(nama);
$('#myModal').css('display','block');
}
});
I have a strange issue. Maybe someone has encountered similar case. I have a modal window having a dual select list that pops up by a button click. List items can not be selected (activated by mouse click) on the 1st, 3th, 5th.. times of modal opening but selected only on the 2nd, 4th, 6th.. times of modal opening. I wonder if it is a js conflict issue. Any help will be appreciated. Here is the code:
#model IEnumerable<MajorAdmin.ViewModel.DList>
#{
ViewBag.Title = "List";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="">
<div class="row">
<div class="col-md-12">
<div class="x_panel">
<div class="x_content">
<table id="datatable-buttons" class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
<a>#item.ev</a>
</td>
<td>
<a id="#item.id" name="edit" data-toggle="modal" data-target="#editpartialmodaldiv" class="btn btn-info btn-xs"><i class="fa fa-pencil-square-o"></i> Edit </a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="editpartialmodaldiv" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true"></div>
</div>
<script src="~/Content/vendors/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$("a[name='edit']").click(function () {
var selectedid = this.id;
var data = JSON.stringify({
'selecteditem': selectedid,
});
jQuery.ajax({
type: "POST",
url: "#Url.Action("GetID")",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: data,
success: function (json) {
$("#editpartialmodaldiv").load('#Url.Action("Edit")');
},
failure: function (errMsg) {
alert(data);
}
});
});
</script>
<div class="modal-dialog modal-lg">
<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</h4>
</div>
<div class="modal-body">
<div role="main">
<div class="">
<div class="clearfix"></div>
<div class="dual-list list-left col-md-5">
<div class="well text-right">
<div class="row">
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search"></span>
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
</div>
</div>
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
</div>
</div>
</div>
<ul id="sortable1" class="list-group">
#foreach (var item in Model) { if (item.evl == null) {
<li class="list-group-item"><img src="~/Content/images/img.jpg" class="avatar" style="max-height:30px" alt="Avatar">#item.emp</li>
} }
</ul>
</div>
</div>
<div class="list-arrows col-md-1 text-center">
<button class="btn btn-default btn-sm move-left">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
<button class="btn btn-default btn-sm move-right">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
<div class="dual-list list-right col-md-5">
<div class="well">
<div class="row">
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
</div>
</div>
<div class="col-md-10">
<div class="input-group">
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<ul id="sortable2" class="list-group text-right">
#foreach (var item in Model) { if (item.emp == null) {
<li class="list-group-item"><img src="~/Content/images/img.jpg" class="avatar" style="max-height:30px" alt="Avatar">#item.evaluator</li>
} }
</ul>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="savebutton" name="formsavebutton" value="Create" type="submit" class="btn btn-success">Save</button>
</div>
</div>
</div>
<!-- jQuery -->
<script src="~/Content/vendors/jquery/dist/jquery.min.js"></script>
<!-- Dual List Scripts -->
<script src="~/Content/js/duallist/duallist.js"></script>
I finally found the answer. Thanks to #Kaddath..
I added toggle function to return success of ajax response ==> $('body').on('click', '.list-group .list-group-item', function () {
$(this).toggleClass('active');
I'm currently running into a problem. The problem is that it returns exactly this ' ' when trying to fetch data from 2 classes above the button.
This is how my app.js looks like:
$('.edit').on('click', function(event) {
event.preventDefault();
var productNamee = event.target.parentNode.childNodes[1].textContent;
$('#productname').val(productNamee);
$('#myModal').modal('show');
});
This is how my code looks like where it's implemented:
<table class="table table-striped table-bordered">
<tr>
<th>Product Name</th>
<th>Brand</th>
<th>Description</th>
<th>Posted On</th>
<th>Actions</th>
</tr>
#foreach($posts as $post)
<tr>
<div class="postcontest">
<td>{{ $post->productname }}</td>
<td>{{ $post->brands }}</td>
<td>{{ $post->description }}</td>
<td>{{ $post->created_at }}</td>
</div>
<td>
<div class="interaction">
<a class="btn btn-warning btn-sm edit" role="button" href="#"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></span></a>
<a class="btn btn-danger btn-sm" href="{{ route('post.delete', ['post_id' => $post->id]) }}" role="button"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
</div>
</td>
</tr>
#endforeach
</table>
This is what it returns when opening the modal:
https://gyazo.com/b5709533810d4bdb95029db3af8a9c4c (Totally nothing!)
The Modal:
<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 a product</h4>
</div>
<div class="modal-body">
<form action="#" method="post">
<div class="form-group">
<label for="name">Product Name</label>
<input class='form-control' type="text" name="productname" id="productname">
</div>
<div class="form-group">
<label for="brands">Brands</label>
<input class='form-control' type="text" name="brands" id="brands">
</div>
<div class="form-group">
<label for="brands">Cop Link</label>
<input class='form-control' type="text" name="coplink" id="coplink">
</div>
<div class="form-group">
<label for="brands">Description</label>
<textarea class="form-control" name="description" id="description" rows="5"></textarea>
</div>
<input type="hidden" name="_token" value="{{ Session::token() }}">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button></form>
</div>
</div>
</div>
</div>
Yes, the ID of the text field is 'productname' and that's all correct.
I'm currently out of ideas on how to fix this, any help would be appreciated!
Change this code:
<a class="btn btn-warning btn-sm edit" role="button" href="#"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></span></a>
To
<a onClick="edit('{{$post->productname}}',
'{{$post->brands}}',
'{{$post->description}}',
'{{$post->created_at}}'),"
class="btn btn-warning btn-sm edit" role="button" href="#"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></span></a>
And
$('.edit').on('click', function(event) {
event.preventDefault();
var productNamee = event.target.parentNode.childNodes[1].textContent;
$('#productname').val(productNamee);
$('#myModal').modal('show');
});
To
function edit(productname, brands, description, created_at) {
event.preventDefault();
$('#productname').val(productname);
$('#brands').val(brands);
$('#description').val(description);
$('#created_at').val(created_at);
$('#myModal').modal('show');
}
The form is available when the user clicks a modal. When I click the submit button in the modal, it button does not work.
foreach ($posts as $post) { echo '
<td>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#$id_user">Validasi</button>
</td>
</tr>
</tbody>
';
}
Here is the modal:
echo '
<div id="$id_user" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content" id="registerContent">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-text-header text-center">Validasi</div>
</div>
<div class="modal-body">
<div class="container-fluid">'; echo '
<form class="form col-md-12 center-block" action="http://localhost/MMM/admin/validasi/'.$id_user.'" method="POST" enctype=\ "multipart/form-data\">
<div class="form-group">
<input class="form-control input" placeholder="Dana awal (RP.1.000.000,-)" type="text" name="dana">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn btn-block" name="submit" value="Submit">
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>' ;
You need to check if the submit button has been passed then run the code. This will ensure that you won't get an undefined index error.
if (isset($_POST['submit'])) {
// Your code here.
}
Also use form (<form></form>) tags to specify POST request in method="post".
Errors
Wrong placement of <form> open and close
Miss-Match Character in enctype=\ "multipart/form-data\", (\).
So Final Well-Form Code is
<div id="$id_user" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content" id="registerContent">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-text-header text-center">Validasi</div>
</div>
<form class="form col-md-12 center-block" action="http://localhost/MMM/admin/validasi/'.$id_user.'" method="POST" enctype="multipart/form-data">
<div class="modal-body">
<div class="container-fluid">
<div class="form-group">
<input class="form-control input" placeholder="Dana awal (RP.1.000.000,-)" type="text" name="dana">
</div>
<div class="form-group">
**
<input type="submit" class="btn btn-primary btn btn-block" name="submit" value="Submit">**
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
Note: You are not uploading any Files in your form. So No use of enctype
Don't use echo with single quote: that's what's making your headache. Create code like this:
<div id="<?php echo $id_user ?>" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content" id="registerContent">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<div class="modal-text-header text-center">Validasi</div>
</div>
<div class="modal-body">
<div class="container-fluid">
<form class="form col-md-12 center-block" action="http://localhost/MMM/admin/validasi/<?php echo $id_user ?>" method="POST" enctype="multipart/form-data">
<div class="form-group">
<input class="form-control input" placeholder="Dana awal (RP.1.000.000,-)" type="text" name="dana">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn btn-block" name="submit" value="Submit">
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>
and this other code:
<?php
foreach ($posts as $post): ?>
<td>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#$id_user">Validasi</button>
</td>
<?php endforeach; ?>
Also read What is the difference between single-quoted and double-quoted strings in PHP?