I tried to make a Details-Modal, which gets information from the database "products" when the user clicks on the Details-button. However, there are problems with the code, which I couldn't figure out.
when I run on a localhost server, I get this:
Notice: Undefined index: id in
D:\xampp\htdocs\web01\includes\details.php on line 3
Index
<?php
include 'includes/connect_database.php';
$sql ="SELECT * FROM products WHERE category=1";
$category2 = $db->query($sql);
?>
<?php while ($sanpham =mysqli_fetch_assoc($category2)):?>
<div class="col-md-4 col-sm-6 col-xs-12 single_featured_area">
<div class="single_featured wow fadeIn" data-wow-duration=".5s">
<?php echo "<img src='../images/menu/".$product['image']."'>";?>
<div class="featured_overlay">
<div class="overlay_content">
<h3 style="color: white;"> <?= $product['name'];?></h3>
**<button type="button" class="btn-lg" data-toggle="modal" onclick="detailsmodal(<?= $product['id'];?>)">Bestellen</button>**
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php
include 'includes/details.php';
include 'includes/footer.php'; ?>
and footer.php :
<?php
define('BASEURL','/web02/');
?>
<script>
function detailsmodal(id){
var data = {"id":id};
jQuery.ajax({
url: <?=BASEURL;?>+'menu/includes/details.php',
method: "post",
data : data,
success : function(data){
jQuery('body').append(data);
jQuery('#detail-pd').modal('toggle');
},
error : function(){
alert("CAnnot connect");
}
});
}
</script>
and details.php :
<?php
include 'connect_database.php';
**$id = $_POST['id'];
$id = (int)$id;**
$sql = "SELECT * FROM products WHERE id='$id'";
$result = $db->query($sql);
$detailsmd = mysqli_fetch_assoc($result);
?>
<?php ob_start(); ?>
<div class="modal fade sushi01" id="detail-pd" tabindex="-1" role="dialog" aria-labelledby="detail-pd" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" onclick="closeModal()" aria-label="close">
<span aria-hidden="true" >×</span>
</button>
<h4 class="modal-title text-center"><?= $detailsmd['name'];?></h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="center-block">
<img src="<?= $detailsmd['image'];?>" alt="<?= $detailsmd['name'];?>" class="imgbestellen img-responsive">
</div>
</div>
<div class="col-sm-6">
<h4>Description</h4>
<p><?= $detailsmd['text'];?></p>
<hr>
<p>Price: <?= $detailsmd['preis'];?></p>
<form action="add-cart.php" method="post">
<div class="form-group">
<label for="quantity">Quantity :</label>
<input type="text" class="form-control" id="quantity" name="quantity">
</div>
<div class="form-group">
<label for="size"></label>
<select name="size" id="size" class="form-control">
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="submit"><span class="glyphicon glyphicon-shopping-cart"></span> Bestellen</button>
<button class="btn btn-dedault" onclick="closeModal()">Cancle</button>
</div>
</div>
</div>
</div>
<script>
function closeModal(){
jQuery('#detail-pd').modal('hide');
setTimeout(function(){
jQuery('#detail-pd').remove();
},500);
}
</script>
<?php echo ob_get_clean(); ?>
Related
my edit and delete query only work on the first page of datatables, but not on the second page.
i'm using ajax and jquery. i'm new and this is for my project in college. thanks for helping me.
here's the code.
<script>
$(function () {
$("#example1").DataTable();
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false
});
});
</script>
<script type="text/javascript">
$(document).ready(function (){
$(".open_modal").click(function (e){
var m = $(this).attr("id");
$.ajax({
url: "user_edit.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalEdit").html(ajaxData);
$("#ModalEdit").modal('show',{backdrop: 'true'});
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function (){
$(".open_delete").click(function (e){
var m = $(this).attr("id");
$.ajax({
url: "user_delete.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalDelete").html(ajaxData);
$("#ModalDelete").modal('show',{backdrop: 'true'});
}
});
});
});
</script>
<button type="button" data-toggle="modal" data-target="#tambah" class="btn btn-info"><i class="glyphicon glyphicon-plus"></i> Tambah User</button>
</br>
</br>
<?php include"alert.php"; ?>
<table id="example1" class="table table-bordered table-striped" >
<thead>
<tr>
<th>Nomor</th>
<th>Username</th>
<th>Nama Lengkap</th>
<th>Password</th>
<th>Level</th>
<th>Nama Toko</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
include "connection.php";
$query_mysql = mysqli_query($connection,"SELECT username, password, level, nama_lengkap, status, nama_toko FROM master_user INNER JOIN master_toko ON master_user.id_toko = master_toko.id_toko where status='0'")or die(mysqli_error());
$nomor = 1;
while($data = mysqli_fetch_array($query_mysql)){
?>
<tr>
<td><?php echo $nomor++; ?></td>
<td><?php echo $data['username']; ?></td>
<td><?php echo $data['nama_lengkap']; ?></td>
<td><?php echo $data['password']; ?></td>
<td><?php echo $data['level']; ?></td>
<td><?php echo $data['nama_toko']; ?></td>
<td>
</span>Edit |
</span>Hapus
</td>
</tr> <?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- FOR EDIT AND DELETE -->
<div id="ModalEdit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
<div id="ModalDelete" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
and this is for edit
i reference the username because username is my primary key
here the code
include "connection.php";
$username = $_GET['username'];
echo $username;
$ambildata = mysqli_query($connection,"select * from master_user where username='$username'");
while($row= mysqli_fetch_array($ambildata)){
?>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Edit User</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" action="proses_edituser.php" name="modal-popup" enctype="multipart/form-data" method="POST" id="form-edit">
<div class="form-group">
<label class=" control-label col-md-3">Username</label>
<div class="col-md-9">
<input class="form-control" type="text" name="username" value="<?php echo $row['username']; ?>"/>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Nama Lengkap</label>
<div class="col-md-9">
<input class="form-control" type="text" name="nama_lengkap" value="<?php echo $row['nama_lengkap']; ?>"/>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Password</label>
<div class="col-md-9">
<input class="form-control" type="password" name="password" value="<?php echo $row['password']; ?>"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Level</label>
<div class="col-md-9">
<select name="level" class="form-control">
<option value=''>--Select--</option>
<option value='owner' <?php if ($row['level']=='owner'){echo"SELECTED";}?>>Owner</option>
<option value='manajer' <?php if($row['level'] == 'manajer'){ echo "SELECTED"; } ?>>Manajer</option>
<option value='bendahara' <?php if($row['level'] == 'bendahara'){ echo "SELECTED"; } ?> >Bendahara</option>
<option value='administrator' <?php if($row['level'] == 'administrator'){ echo "SELECTED"; } ?>>Administrator</option>
</select>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Toko</label>
<div class="col-md-9">
<select name="id_toko" class="form-control">
<option value="">-- Pilih Toko --</option>
<?php
require "connection.php";
$datatoko = "SELECT * FROM master_toko ORDER BY id_toko ASC";
$resultsql = mysqli_query($connection, $datatoko);
if (mysqli_num_rows($resultsql) > 0) {
while ($row = mysqli_fetch_assoc($resultsql)) {
echo "<option value='$row[id_toko]'>$row[nama_toko]</option>";
// $nama_toko = $row['nama_toko'];
//echo '<option value="'.$row['id_toko'].'">'. $nama_toko.'</option>';
}
}
?>
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" value="Simpan"><span class="glyphicon glyphicon-floppy-saved" style="padding-right: 2px"></span>Simpan</button>
<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-floppy-remove" style="padding-right: 2px"></span>Batal</button>
</div>
</form>
<?php
}
?>
</div>
</div>
</div>
The issue is because the html for these buttons are rendered again & previous event attached to these are not found. So you need to add the events for newly elements also. One good solution is to use jQuery on method to attach the event on dynamic elements as well. Use the below code to check
<script type="text/javascript">
$(document).ready(function (){
$("body").on('click', '.open_modal', function (e){
var m = $(this).attr("id");
$.ajax({
url: "user_edit.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalEdit").html(ajaxData);
$("#ModalEdit").modal('show',{backdrop: 'true'});
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function (){
$("body").on('click', '.open_delete', function (e){
var m = $(this).attr("id");
$.ajax({
url: "user_delete.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalDelete").html(ajaxData);
$("#ModalDelete").modal('show',{backdrop: 'true'});
}
});
});
});
</script>
Please help, I have trouble in this Jquery onclick at my form, Why my data from database can't show ? example, I choose a category "jantung", that should be show data dokter where category is jantung, but if I use onchange at the form it's work.
This is a html where I click the category (if click this category will show the modal)
<?php foreach ($poli as $row): ?>
<div class="col-sm-4 col-6 poliklinik-item">
<a class="poliklinik-link" data-toggle="modal" href="#poliklinikModal1" onclick="hmm('<?=$row->id_poli?>')">
<img class="img-fluid" src="<?php echo base_url();?>assets/upload/<?php echo $row->gambar?>" width="200" height="200">
</a>
<div class="poliklinik-caption text-center">
<h4><?php echo $row->nama_poli; ?></h4>
</div>
<br>
<br>
</div>
<?php endforeach; ?>
And This
<script>
function hmm(idnya) {
$(document).ready(function(){
document.getElementById('poli').value=idnya;
var id_poli = idnya;
$('#dokter').prop('disabled',false);
$.ajax({
url: "http://localhost/coba/Test/get_autofill",
type: "POST",
data: {'id_poli' : id_poli},
dataType: 'json',
success: function(data){
$('#dokter').html(data);
},
error: function(){
alert('Masih error');
}
});
});
}
</script>
The Modal
<?php echo form_open('hal_user/add/')?>
<div class="form-group">
<label>Nama</label>
<input type="hidden" name="id_pasien" class="form-control" readonly="" value="<?=$this->session->userdata('id_pasien') ;?>">
<input type="text" name="nama_pasien" class="form-control" readonly="" value="<?php echo $this->session->userdata('nama_pasien') ; ?>">
</div>
<div class="form-group">
<label>Poli</label>
<select name="id_poli" id="poli" class="form-control">
<option value="">Select Poli</option>
<?php foreach ($poli as $p): ?>
<option value="<?php echo $p->id_poli;?>"><?php echo $p->nama_poli;?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label>Dokter</label>
<select name="id_dokter" id="dokter" class="form-control" disabled="">
<option value="">Select Dokter</option>
</select>
</div>
<div class="form-group">
<label>Tanggal</label>
<input type="date" class="form-control" name="tanggal" placeholder="Pilih Tanggal">
</div>
<div class="form-group">
<label>Waktu</label>
<a class="btn btn-primary form-control" data-toggle="collapse" href="#waktuanak" role="button" aria-expanded="false" aria-controls="collapseExample">
Pilih Waktu
</a>
<div class="collapse" id="waktuanak">
<div class="card card-body">
<div class="btn-group-toggle" data-toggle="buttons">
<?php foreach ($waktu as $row) :?>
<label class="btn btn-outline-primary">
<input type="radio" name="id_waktu" autocomplete="off" value="<?php echo $row->id_waktu; ?>"><?php echo $row->waktu;?>
</label>
<?php endforeach;?>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success btn-wd">Simpan</button>
Batal
</div>
<?php echo form_close(); ?>
Try this
On your view file no need to call function and try to use data-attr and add a class hmm on
<?php foreach ($poli as $row): ?>
<div class="col-sm-4 col-6 poliklinik-item">
<a class="poliklinik-link hmm" data-toggle="modal" href="#poliklinikModal1" data-attr="<?=$row->id_poli?>">
<img class="img-fluid" src="<?php echo base_url();?>assets/upload/<?php echo $row->gambar?>" width="200" height="200">
</a>
<div class="poliklinik-caption text-center">
<h4><?php echo $row->nama_poli; ?></h4>
</div>
</div>
<?php endforeach; ?>
On your jquery try this
<script>
$(document).ready(function(){
$('.hmm').on('click',function(){
var idnya = $(this).attr('data-attr');
$('#poli').val(idnya );
var id_poli = idnya;
$('#dokter').prop('disabled',false);
$.ajax({
url: "http://localhost/coba/Test/get_autofill",
type: "POST",
data: {'id_poli' : id_poli},
dataType: 'json',
success: function(data){
$('#dokter').html(data);
},
error: function(){
alert('Masih error');
}
});
});
}
Updated
$("#poli option[value='" + idnya+ "']").prop("selected", true);
I have a contact form linked with form-to-email.php to send emails.
What happen is when you click submit it will redirect you to another page (new one) what I would like to have is to show/display the success message within the modal right after clicking the botton.
<div class="modal fade" id="modal-register" tabindex="-1" role="dialog" aria-labelledby="modal-register-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<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="modal-register-label">اشتراك</h4>
</div>
<div class="modal-body">
<form method="post" name="myemailform" action="form-to-email.php">
<div class="row">
<div class="col-xs-12 input-group">
<input type="radio" name="form-busnisstype" value="company" id="company">
<label for="company">شركة</label>
<input type="radio" name="form-busnisstype" value="freelaancer" id="freelancer">
<label for="freelancer">مستقل</label>
</div>
<div class="col-xs-12 input-group">
<input type="text" name="form-name" id="name" placeholder="الاسم الكريم" required="required">
</div>
<div class="col-xs-12 input-group">
<input type="email" name="form-email" id="email" placeholder="البريد الالكتروني" required="required">
</div>
<div class="col-xs-12 input-group">
<input type="tel" pattern="^[0-9]*$" name="form-phone" id="phone" placeholder="05xxxxxxxx" required="required">
</div>
<div class="col-xs-12 input-group">
<select name="form-officetype" id="officetype" required="required">
<option value="" disabled selected hidden="" >اختر مكتبك</option>
<option value="Gold">individual</option>
<option value="Silver">room</option>
<option value="Bronze">meeting</option>
<option value="Basic">orgonization</option>
</select>
</div>
<div class="col-xs-12 input-group">
<select name="form-membership" id="membership" required="required">
<option value="" disabled selected hidden="" >اختر باقتك</option>
<option value="Gold">Gold</option>
<option value="Silver">Silver</option>
<option value="Bronze">Bronze</option>
<option value="Basic">Basic</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-12 input-group input-group-icon">
<input placeholder="بداية الاشتراك" type="text" onfocus="(this.type='date')" id="booking" name="form-booking" required="required">
</div>
<div class="col-xs-12 input-group input-group-icon">
<select name="form-person" id="person" required="required">
<option value="" disabled selected hidden="" >كم عدد الاشخاص</option>
<option value="1">1 Person</option>
<option value="2">2 People</option><option value="3">3 People</option><option value="4">4 People</option><option value="5">5 People</option>
</select>
</div>
<textarea id="mep_msg" name="form-message" rows="" Placeholder="Comment" required="required"></textarea>
<input class="send_btn" type="submit" name='submit' value="submit">
</div>
</form>
<script language="JavaScript">
var frmvalidator = new Validator("myemailform");
frmvalidator.addValidation("name","req","Please provide your name");
frmvalidator.addValidation("email","req","Please provide your email");
frmvalidator.addValidation("tel","tel","Please enter a valid email address");
frmvalidator.addValidation("email","email","Please enter a valid email address");
</script>
</div>
</div>
</div>
</div>
<!--Success pop up Starts-->
<div class="modal fade" id="success_msg" role="dialog" tabindex="-1">
<div class="success">
<div class="modal-dialog-success">
<div class="col-xs-12 pade_none">
<button type="button" class="close" onClick="closeConfirm();" data-dismiss="modal">×</button>
<div class="col-xs-12 pade_none">
<h2>Success!</h2>
<p>Your message has been sent.</p>
</div>
<div class="col-xs-12 pad_none">
</div>
</div>
</div>
</div>
</div>
<!--Success pop up ends-->
and the form-to-email.php is the following:
<?php
/* Configuration */
$subject = 'Membership Enquiry'; // Set email subject line here
$mailto = 'email here'; // Email address to send form submission to
/* END Configuration */
$name = $_POST['form-name'];
$visitor_email = $_POST['form-email'];
$message = $_POST['form-message'];
$phone = $_POST['form-phone'];
$busnisstype = $_POST['form-busnisstype'];
$officetype = $_POST['form-officetype'];
$membership = $_POST['form-membership'];
$person = $_POST['form-person'];
$booking = $_POST['form-booking'];
// HTML for email to send submission details
$body = "
<br>
<p>The following information was submitted through the contact form on your website:</p>
<p><b>الاسم</b>: $name<br>
<b>الايميل</b>: $visitor_email<br>
<b>رقم الجوال</b>: $phone<br>
<b>نوع المشأة</b>: $busnisstype<br>
<b>المكتب المرغوب</b>: $officetype<br>
<b>العضوية</b>: $membership<br>
<b>عدد الاشخاص</b>: $person<br>
<b>التاريخ المتوقع لبدء الاشتراك</b>: $booking<br>
<p>ملاحضات اخرى: <b>$message</b></p>
";
$headers = "From: $name <$visitor_email> \r\n";
$headers .= "Reply-To: $email \r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = "<html><body>$body</body></html>";
if (mail($mailto, $subject, $message, $headers)) {
header('Location: thank-you.html');
} else {
echo 'Form submission failed. Please try again...'; // failure
}
?>
You're redirecting to thank-you.html. Add there the code (with the success message) and if you want it to be a modal just add the modal code:
<!--Success pop up Starts-->
<div class="modal fade" id="success_msg" role="dialog" tabindex="-1">
<div class="success">
<div class="modal-dialog-success">
<div class="col-xs-12 pade_none">
<button type="button" class="close" onClick="closeConfirm();" data-dismiss="modal">×</button>
<div class="col-xs-12 pade_none">
<h2>Success!</h2>
<p>Your message has been sent.</p>
</div>
<div class="col-xs-12 pad_none">
</div>
</div>
</div>
</div>
</div>
<!--Success pop up ends-->
And launch a javascript when entering:
<body onload="myOnloadFunc();">
Your function should show modal:
function myOnloadFunc() {
$('#success_msg').modal('show');
}
You do two things either use AJAX to send request to form-to-email.php script or create hidden iframe with id="email" name="email" and use target="email" in form tag, it will open your php script in iframe and execute it but it will not redirect to that page, then you can use
document.getElementById('email').addEventListener('load', function() {
alert('Email Send Successfully');
});
instead of alert you can add toaster (green bar) to your modal.
PHP CODE
<?php session_start();
include('config/connect_database.php');
$Username = '';
if(isset($_POST['Login'])) {
$Username = mysqli_real_escape_string($conn, $_POST['Username']);
$Password = mysqli_real_escape_string($conn, $_POST['Password']);
$sql = "SELECT Username, Password, Authority FROM user WHERE Username LIKE '$Username' AND Status LIKE 'Active'";
$result = mysqli_query($conn, $sql);
if(mysqli_num_rows($result) > 0) {
$username = mysqli_fetch_assoc($result);
mysqli_free_result($result);
mysqli_close($conn);
if(($Username === $username['Username']) && (password_verify($Password, $username['Password']))) {
$_SESSION['Username'] = $_POST['Username'];
$_SESSION['Authority'] = $username['Authority'];
} else {
echo "<script>alert('Invalid Username or Password');</script>";
}
} else {
echo "<script>alert('Invalid Username or Password');</script>";
}
}
?>
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>Management System</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<script>
$(document).ready(function(){
<?php if(isset($_SESSION['username'])){?>$('#modalNotification').modal();<?php } ?>
$('div.modal button').click(function(){ location.href='home.php'; });
});
</script>
</head>
<body>
<nav>
<a class="navbar-brand" href="#">
<img src="Source/pms_logo_blue.png" alt="Logo" style="width:50px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="register.php">Register</a>
</li>
</ul>
</div>
</nav>
<div class="modal fade" id="modalNotification" tabindex="-1" role="dialog" aria-labelledby="modalNotificationTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalNotificationTitle">NOTIFICATION</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>CONTENT</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center py-5">
<div class="col" style="max-width: 400px;">
<h3 style="text-align: center;">Flinken Production Management System</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col" style="max-width:400px;">
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST">
<div class="form-group">
<label>Enter Email</label>
<input type="email" name="Username" value="<?php echo htmlspecialchars($Username); ?>" class="form-control" required>
</div>
<div class="form-group">
<label>Enter Passsword</label>
<input type="password" name="Password" class="form-control" required>
</div>
<div class="form-group">
<button type="submit" name="Login" value="True" class="btn btn-primary btn-block">Login</button>
</div>
</form>
</div>
</div>
</div>
<footer class="section">
<div class="text py-5" style="text-align: center">Copyright </div>
</footer>
</body>
</html>
Just want to ask on how to get the ID in a specific foreach
My Controller
public function validate_subtopic(){
$data = array('success' => false, 'messages' => array());
$this->form_validation->set_rules("subtopicname", "SubTopicName", "trim|required");
$this->form_validation->set_rules("subtopicdescription", "SubTopicDescription", "trim|required");
$this->form_validation->set_error_delimiters('<p class="text-danger">', '</p>');
if($this->form_validation->run()){
$data['success'] = true;
$subtopic_data = array(
'subtopicname' => $this->input->post('subtopicname'),
'subtopicdescript' => $this->input->post('subtopicdescription'),
'subjectID' => $this->input->post('subjectID'),
'topicID' => $this->input->post('topicID'),
);
$this->addtopic_model->insert_subtopic($subtopic_data);
}
else{
foreach ($_POST as $key => $value) {
$data['messages'][$key] = form_error($key);
}
}
echo json_encode($data);
}
My Model
public function insert_subtopic($subtopic_data){
$this->db->insert('subtopics', $subtopic_data);
}
My view from bootstrap modal
<div class="modal inmodal fade" id="addSubTopic" tabindex="-1" role="dialog" aria-hidden="true">
<?php
$att = array(
'method' => 'POST',
'id' => "form-user_sub");
echo form_open("topicAdd_Controller/validate_subtopic", $att);
?>
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h5 class="modal-title">Please Input SubTopic</h5>
</div>
<div id="the-message"></div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label>Sub Topic Name</label>
<input class="form-control" name="subtopicname" id="subtopicname" type="text">
</div>
<div class="form-group">
<label>Sub Topic Description</label>
<textarea name="subtopicdescription" id="subtopicdescription" class="form-control">
</textarea>
</div>
<?php foreach($sample as $row){
?>
<?php $index = current($sample); ?>
<input type="text" value="<?php echo $row['topicID']; ?> name="topicID">
<?php } ?>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</div>
<?php form_close();?>
</div>
This is the output of $sample:
The problem is I can't get the ID from the specific foreach loop I choose. how can I solve this?
Please help
You can use while(){} method, so your script will be like this
$i = 0;
$res = array();
while($data = $_POST){
$res[$i] = $data;
$i++;
}
echo json_encode($res);
I'm trying to get the distance from departure and destination using Google Map API. Its working nicely! But the problem is, I have departure field and Destination field. After filling those fields, if I click on "Get the Distance" button then I wanted it to show the distance value in Bootstrap modal. But, its not showing. That means, I'm not getting distance value in Modal.
Form
<form action="" method="get">
<div class="InP">
<div class="input-group IGCustom">
<span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Departure', 'moorgiz_lang'); ?></span>
<input type="text" name="departure" class="form-control ICustom" id="departure" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
</div>
</div>
<?php if($moorgiz['customize-style']=='black') { ?>
<img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/black/location.png" />
<?php } else { ?>
<img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/icons/location.png" />
<?php } ?>
<div class="InP" style="margin-top:4%;">
<div class="input-group IGCustom">
<span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Destination', 'moorgiz_lang'); ?></span>
<input type="text" name="desti" class="form-control ICustom" id="destination" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
</div>
</div>
<div class="form-group">
<label class="text-left CustomLabel-NoP" for="sel1"><?php _e('Number of Passengers', 'moorgiz_lang'); ?></label>
<select class="form-control pull-left CustomControl-NoP" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-sm-12">
<input type="submit" class="btn btn-info pull-right ButtonPos" data-toggle="modal" data-target="#myModal" value="CALCULATE"/>
</form>
Modal HTML
<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">Modal title</h4>
</div>
<div class="modal-body">
<?php
$addressFrom = $_GET['departure'];
$addressTo = $_GET['desti'];
$distance = getDistance($addressFrom, $addressTo, "K");
echo $distance;
?>
</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>
</div>
</div>
</div>
</div>
Can you guys please suggest me something?
What you need is modal event and ajax method
Couple of changes required in form
change method from get to post or no need at all
assign id='myForm' to form
change type="submit" to type="button"
The form will be
<form action="" method="POST" id="myForm">
<div class="InP">
<div class="input-group IGCustom">
<span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Departure', 'moorgiz_lang'); ?></span>
<input type="text" name="departure" class="form-control ICustom" id="departure" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
</div>
</div>
<?php if($moorgiz['customize-style']=='black') { ?>
<img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/black/location.png" />
<?php } else { ?>
<img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/icons/location.png" />
<?php } ?>
<div class="InP" style="margin-top:4%;">
<div class="input-group IGCustom">
<span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Destination', 'moorgiz_lang'); ?></span>
<input type="text" name="desti" class="form-control ICustom" id="destination" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
</div>
</div>
<div class="form-group">
<label class="text-left CustomLabel-NoP" for="sel1"><?php _e('Number of Passengers', 'moorgiz_lang'); ?></label>
<select class="form-control pull-left CustomControl-NoP" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-sm-12">
<input type="button" class="btn btn-info pull-right ButtonPos" data-toggle="modal" data-target="#myModal" value="CALCULATE"/>
</form>
Modal HTML (added <div class="getdistance"></div> to display the data via ajax method)
<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">Modal title</h4>
</div>
<div class="modal-body">
<div class="getdistance"></div>
</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>
</div>
</div>
</div>
</div>
Modal event listener with Ajax method
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function () {
var form = $('#myForm'); //Get Form
$.ajax( {
type: "POST",
url: caculatedistance.php, //Create this file to handle the form post data
data: form.serialize(), //Post the form
success: function(response) {
$('.getdistance').html(response); //show the distance in modal
}
});
});
});
last create caculatedistance.php where you handle the form posted values, calculate the distance and echo the output to display in modal
<?php
//include getDistance() function
if(isset($_POST['departure'])) {
$addressFrom = $_POST['departure'];
$addressTo = $_POST['desti'];
$distance = getDistance($addressFrom, $addressTo, "K");
echo $distance; //this value will show in modal
}
?>