index.php
First I create a connection with the database, I design table through <td> and <tr>, I create a variable $action to get data through AJAX. I use mysqli_fetch_array to fetch data from the database.
<?php
//including the database connection file
include_once("config.php");
//fetching data in descending order (lastest entry first)
//$result = mysql_query("SELECT * FROM users ORDER BY id DESC"); // mysql_query is deprecated
// using mysqli_query instead
?>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="DataTables/datatables.css" type="text/css">
<link rel="stylesheet" href="DataTables/DataTables/css/dataTables.bootstrap.css" type="text/css">
<link rel="stylesheet" href="DataTables/DataTables/css/jquery.dataTables.css" type="text/css">
<script src="DataTables/datatables.js"></script>
<script src="style/jquery-3.2.1.js"></script>
<script src="style/datatable.js"></script>
<script src="DataTables/DataTables/js/dataTables.bootstrap.js"></script>
<script src="DataTables/DataTables/js/jquery.dataTables.js"></script>
</head>
<body>
Add New Data<br/><br/>
<table id="datatable" class="display" width='100%' border=0>
<thead>
<tr bgcolor='#CCCCCC'>
<td>Name</td>
<td>Age</td>
<td>Email</td>
<td>Update</td>
</tr>
</thead>
<?php
//while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array
//$action=$_POST["action"];
//if($action=='showroom')
{
$result = mysqli_query($mysqli, "SELECT * FROM users ORDER BY id DESC");
while($res = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>".$res['name']."</td>";
echo "<td>".$res['age']."</td>";
echo "<td>".$res['email']."</td>";
echo "<td>Edit | Delete</td>";
}
}
?>
</table>
</body>
</html>
Add.html
<html>
<head>
<title>Add Data</title>
<script src="style/jquery-3.2.1.js"></script>
<script src="style/insert.js"></script>
<script src="style/view.js"></script>
</head>
<body>
Home
<br/><br/>
<table bgcolor="orange" align="center" width="25%" border="0">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td>Age</td>
<td><input type="text" name="age" id="age"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="Submit" id="submit" value="Add"></td>
</tr>
</table>
<button type="button" id="submitBtn">Show All</button>
<div id="content"></div>
</body>
</html>
view.js
I fetch data from the database. I use the show_all() function after that I call $.ajax, data, url, type, success function. The first time I try to fetch data from the database through AJAX.
$(document).ready(function(e) {
$('#submitBtn').click(function() {
debugger;
$.ajax({
//data :{action: "showroom"},
url :"index.php", //php page URL where we post this data to view from database
type :'POST',
success: function(data){
$("#content").html(data);
}
});
});
});
**index.php**
<?php
//including the database connection file
include_once("config.php");
//fetching data in descending order (lastest entry first)
//$result = mysql_query("SELECT * FROM users ORDER BY id DESC"); // mysql_query is deprecated
// using mysqli_query instead
?>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="DataTables/datatables.css" type="text/css">
<link rel="stylesheet" href="DataTables/DataTables/css/dataTables.bootstrap.css" type="text/css">
<link rel="stylesheet" href="DataTables/DataTables/css/jquery.dataTables.css" type="text/css">
<script src="DataTables/datatables.js"></script>
<script src="style/jquery-3.2.1.js"></script>
<script src="style/datatable.js"></script>
<script src="DataTables/DataTables/js/dataTables.bootstrap.js"></script>
<script src="DataTables/DataTables/js/jquery.dataTables.js"></script>
</head>
<body>
Add New Data<br/><br/>
<table id="datatable" class="display" width='100%' border=0>
<thead>
<tr bgcolor='#CCCCCC'>
<td>Name</td>
<td>Age</td>
<td>Email</td>
<td>Update</td>
</tr>
</thead>
<?php
//while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array
//$action=$_POST["action"];
//if($action=='showroom')
{
$result = mysqli_query($mysqli, "SELECT * FROM users ORDER BY id DESC");
while($res = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>".$res['name']."</td>";
echo "<td>".$res['age']."</td>";
echo "<td>".$res['email']."</td>";
echo "<td>Edit | Delete</td>";
}
}
?>
</table>
</body>
</html>
**add.html**
<html>
<head>
<title>Add Data</title>
<script src="style/jquery-3.2.1.js"></script>
<script src="style/insert.js"></script>
<script src="style/view.js"></script>
</head>
<body>
Home
<br/><br/>
<table bgcolor="orange" align="center" width="25%" border="0">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td>Age</td>
<td><input type="text" name="age" id="age"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="Submit" id="submit" value="Add"></td>
</tr>
</table>
<button type="button" id="submitBtn">Show All</button>
<div id="content"></div>
</body>
</html>
**view.js**
$(document).ready(function(e) {
$('#submitBtn').click(function()
{
debugger;
$.ajax({
//data :{action: "showroom"},
url :"index.php", //php page URL where we post this data to view from database
type :'POST',
success: function(data){
$("#content").html(data);
}
});
});
});
**datatable.js**
$(document).ready(function() {
$('#datatable').DataTable( {
} );
} );
$.ajax({
data :{"action": "showroom"} ,
url :"index.php",
type :'POST',
success: function(data){
$("#content").html(data);
}
});
}
Maybe this can help you. I use this to get data from the database.
$.ajax({
type: "GET",
url: "process.php",
success: function(data) {
if (data != "null") {
$('#div_id').html(data)
} else {
$('#div_id').html('<p>No Data found</p>')
}
}
})
you can check this for complete tutorial.how to fetch data from database in php using ajax with example
Related
I'm generating a table using PHP that will retrieve records from a MySQL database. I'm new to DataTables, and my problem is that the "View Products" button that generates along with the table doesn't work. Clicking the button should redirect to a new page with an entirely different table.
here's a screenshot of what it looks like, just in case I'm not making any sense
Here's the entire code for the page.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\reset.css">
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\stylesheet.css">
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\og_stylesheet.css">
<style type="text/css">
thead {
background-color: #dc3545;
color: white;
}
</style>
</head>
<body>
<!-- HEADER -->
<?php include "includes/header.php" ?>
<?php session_start();
?>
<!-- END HEADER -->
<table class="table table-striped" id="table_id">
<thead>
<tr>
<th>Supplier ID</th>
<th>Name</th>
<th>Address</th>
<th>Contact Number</th>
<th>Supplier Details</th>
</tr>
</thead>
<tbody>
<?php
$conn = mysqli_connect("localhost", "root", "", "web_db");
$query = "SELECT * FROM Suppliers";
$search = mysqli_query($conn, $query);
if(mysqli_num_rows($search) > 0 ){
while($row = mysqli_fetch_array($search)){
?>
<form action="supplierdetails.php" method="POST">
<tr>
<td>
<?= $row['supplier_id']?>
</td>
<input type="hidden" value=< ?=$row[ 'supplier_id']?> name = "sup_id">
<input type="hidden" value=< ?=$row[ 'name']?> name = "name">
<td>
<?= $row['name']?>
</td>
<td>
<?= $row['address']?>
</td>
<td>
<?= $row['contactnumber']?>
</td>
<td><input type="submit" name="sub" value="View Products" class="btn btn-info" onclick="sample()"></td>
</tr>
</form>
<?php
}
}
?>
</tbody>
</table>
<script>
$(document).ready(function() {
$(".alert").delay(3000).fadeOut();
});
</script>
<script>
function sample() {
window.alert(document.getElementById("name").getAttribute("value"));
}
</script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>-->
<script type="text/javascript">
$(document).ready(function() {
$('#table_id').DataTable();
});
</script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.filter.range.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#table_id').DataTable();
/* Add event listeners to the two range filtering inputs */
$('#min, #max').keyup(function() {
table.draw();
});
});
</script>
</body>
</html>
The buttons work perfectly before I added DataTables, by the way. I also found out that a table with hard-coded data (as in without PHP) also have buttons that work fine. I'm pretty much at my wits end here. Any help will be appreciated.
Remove the onclick="sample()"
Add this in a document.ready
$(".btn-info").on("click", function() {
window.alert(document.getElementById("name").getAttribute("value"));
});
Maybe use a window.alert('test');
since I dont see the element with the id name anywhere
Please help,
I have problem with a data table. The data table does not work when I use this but it's working when it's outside of this. Please help:
<div id="content">
<?php
$pages_dir = 'pages/admin';
if(!empty($_GET['p'])){
$pages = scandir($pages_dir, 0);
unset($pages[0], $pages[1]);
$p = $_GET['p'];
if(in_array($p.'.php', $pages)){
include($pages_dir.'/'.$p.'.php');
}
else {
echo 'Page Not Found :(';
}
}
else {include($pages_dir.'/profile.php');}
?>
</div>
Then the other full script page, in this page data table is not working, but when I try this outside code before, it works.
<?php
$connect = mysqli_connect("localhost", "root", "", "keep");
$query ="SELECT * FROM barang ORDER BY ID DESC";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Datatables Jquery Plugin with Php MySql and Bootstrap</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
</head>
<body>
<br /><br />
<div class="container">
<h3 align="center">Datatables Jquery Plugin with Php MySql and Bootstrap</h3>
<br />
<div class="table-responsive">
<table id="employee_data" class="table table-striped table-bordered">
<thead>
<tr>
<td>ID</td>
<td>Nama</td>
<td>Kategori</td>
<td>Harga</td>
<td>Jumlah</td>
<td>Supplier</td>
</tr>
</thead>
<?php
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td>'.$row["id"].'</td>
<td>'.$row["nama"].'</td>
<td>'.$row["kategori"].'</td>
<td>'.$row["harga"].'</td>
<td>'.$row["jumlah"].'</td>
<td>'.$row["supplier"].'</td>
</tr>
';
}
?>
</table>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#employee_data').DataTable();
});
</script>
Please help, I'm new to PHP programming. Sorry for the bad English.
I am making one application in which the data is generated from my sql in html table format. I want to generate those data in excel format. Here is my code:
demo.php
<?php
include 'include/db_connection.php';
$query = "select * from main_master";
$result = mysql_query($query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Export HTML table to Excel File using Jquery with PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container" style="width:700px;">
<h3 class="text-center">Export HTML table to Excel File using Jquery with PHP</h3><br />
<div class="table-responsive" id="employee_table">
<table class="table table-bordered">
<tr>
<th width="10%">Id</th>
<th width="30%">Name</th>
<th width="10%">Gender</th>
<th width="50%">Designation</th>
</tr>
<?php
while($row = mysql_fetch_assoc($result))
{
?>
<tr>
<td><?php echo $row['B']; ?></td>
<td><?php echo $row['D']; ?></td>
<td><?php echo $row['E']; ?></td>
<td><?php echo $row['F']; ?></td>
</tr>
<?php
}
?>
</table>
</div>
<div align="center">
<button name="create_excel" id="create_excel" class="btn btn-success">Create Excel File</button>
</div>
</div>
<br />
</body>
</html>
<script>
$(document).ready(function(){
$('#create_excel').click(function(){
var excel_data = $('#employee_table').html();
var page = "excel.php?data=" + excel_data;
window.location = page;
});
});
</script>
excel.php
<?php
header('Content-Type: application/vnd.ms-excel');
header('Content-disposition: attachment; filename='.rand().'.xls');
echo $_GET["data"];
?>
While executing above code, nothing is done. excel not generated. Please help.
I guess everything is working fine it's just you are trying to send too much data in url
$('#create_excel').click(function(){
var excel_data = $('#employee_table').html();
var page = "excel.php?data=" + excel_data;
window.location = page;
});
You can not send a complete html of a table in get request (Query string)
Just redirect user to excel.php page send required parameter in query string if required to create a sql query.
Then instead of echo $_GET["data"];
write complete code of demo.php on excel.php
Now excel.php will look like
<?php
header('Content-Type: application/vnd.ms-excel');
header('Content-disposition: attachment; filename='.rand().'.xls');
include 'include/db_connection.php';
$query = "select * from main_master";
$result = mysql_query($query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Export HTML table to Excel File using Jquery with PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container" style="width:700px;">
<h3 class="text-center">Export HTML table to Excel File using Jquery with PHP</h3><br />
<div class="table-responsive" id="employee_table">
<table class="table table-bordered">
<tr>
<th width="10%">Id</th>
<th width="30%">Name</th>
<th width="10%">Gender</th>
<th width="50%">Designation</th>
</tr>
<?php
while($row = mysql_fetch_assoc($result))
{
?>
<tr>
<td><?php echo $row['B']; ?></td>
<td><?php echo $row['D']; ?></td>
<td><?php echo $row['E']; ?></td>
<td><?php echo $row['F']; ?></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
<br />
</body>
</html>
And you can remove css and js files from it.
Also you need to update your script
<script>
$(document).ready(function(){
$('#create_excel').click(function(){
var page = "excel.php";
window.location = page;
});
});
</script>
Or you can try this lib (Datatable) : https://datatables.net/extensions/buttons/examples/initialisation/export.html
I have added this script for fancybox popup. But it is not working.
It is working on other page but don't know what is the problem in this page, there is much more JavaScript for other functionality, may be this is the reason, but when in console, there's no error!
<table id="tb1" cellspacing="0" cellpadding="7" style="width:99%;border:solid 1px#c0bebe;min-width:550px;height:auto;font-family:arial;font-size:11px;margin-left: 6px;border-bottom: none;">
<tr class="heads tr_check" height="44px">
<th style="padding-left:15px;width:5%">Date</th>
<th style="padding-left:15px;width:5%">From</th>
<th style="padding-left:15px;width:5%">Mode</th>
<th style="padding-left:15px;width:40%">Message</th>
<th style="padding-left:15px;width:10%;border-right: medium none;">Document</th>
</tr>
<?php
$msgMngResult = getMessagesForEdit($_GET['projectid']);
if(mysql_num_rows($msgMngResult)>0) {
while($msgMngtaskDtlsRow = mysql_fetch_array($msgMngResult)) {
if($msgMngtaskDtlsRow['message_from']=='Client') {
$bgcolor = "background-color:#F8E0EC";
} else {
$bgcolor = "background-color:#E7FFD6";
}
$id = $msgMngtaskDtlsRow['id'];
$msgres = getMsgDoc($id);
?>
<tr height="44px" class="tr_check">
<td style="padding-left:15px;<?php echo $bgcolor;?>"><?php echo $msgMngtaskDtlsRow['msg_date'];?></td>
<td style="padding-left:15px;<?php echo $bgcolor;?>"><?php echo $msgMngtaskDtlsRow['message_from'];?></td>
<td style="padding-left:15px;<?php echo $bgcolor;?>"><?php echo $msgMngtaskDtlsRow['message_mode'];?></td>
<td style="padding-left:15px;<?php echo $bgcolor;?>"><?php echo substr($msgMngtaskDtlsRow['message'],0,100);?>Read More..</td>
<div id="divForm<?php echo $id;?>" class="fancybox" style="display:none;">
<p><?php echo $msgMngtaskDtlsRow['message'];?></p>
</div>
<td style="border-right: medium none;padding-left:15px;<?php echo $bgcolor;?>">
<?php while($res = mysql_fetch_array($msgres)) {
echo "<br/><a href='".PROJECT_FILE_PATH.$msg_doc."/".$res['message_docs']."' target='_blank' style='color:blue;text-decoration: underline;'>".$res['message_docs']."</a><br/>";
}
?>
</td>
</tr>
<tr class="hidetr tr_check acctr_<?php echo $msgMngtaskDtlsRow['id']; ?>" ><td colspan="8" style="border-right:0px;"></td></tr>
<?php
}
} else { ?>
<tr height="44px" class="tr_check">
<td align="center" colspan="12">
<div id="err"><div id="errormsg" class="no-record"><strong> No Records Found </strong></div></div>
</td>
</tr>
<?php
} ?>
</table>
<link rel="stylesheet" type="text/css" href="css/datepicker.css" />
<script type="text/javascript" src="js/datepicker.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/tabber.js"></script>
<script type="text/javascript" src="js/paddRow.js"></script>
<script type="text/javascript" src="js/addUnitRow.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.2/tinymce.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" />
<script>
$('.fmsg').live('click', function () {
var id = $(this).attr('id');
alert(id);
$("#"+id).fancybox({
'width':800,
'height':450,
'autoSize' : false,
helpers: {
title : {
type : 'float'
}
}
});
});
</script>
Sometimes it shows - ement.prop is not defined.
It appears often.
I am new in PHP. I have a code which upload a file and store in Mysql database. I create a web form using php. In this form I use jquery datepicker. my problem is that when I run my code its not display date properly. The result of my code is shown below:
But when I use same code without PHP its work properly. I cant understand what is the problem?
Here is my code:
<?php
$host="localhost"; // Host name
$username="root"; // Mysql username
$password=""; // Mysql password
$db_name="test123"; // Database name
//$tbl_name="members"; // Table name
$con=mysql_connect("localhost","root","");
if(! $con)
{
die('Connection Failed'.mysql_error());
}
mysql_select_db("test123",$con);
if(isset($_FILES['files'])){
$errors= array();
foreach($_FILES['files']['tmp_name'] as $key => $tmp_name ){
$file_name = $key.$_FILES['files']['name'][$key];
$file_size =$_FILES['files']['size'][$key];
$file_tmp =$_FILES['files']['tmp_name'][$key];
$file_type=$_FILES['files']['type'][$key];
if($file_size > 2097152){
$errors[]='File size must be less than 2 MB';
}
$query="INSERT into upload_data (`FILE_NAME`,`FILE_SIZE`,`FILE_TYPE`) VALUES('$file_name','$file_size','$file_type'); ";
$desired_dir="user_data";
//$desired_dir=$options['upload_dir']."user_data";
if(empty($errors)==true){
if(is_dir($desired_dir)==false){
mkdir("$desired_dir", 755); // Create directory if it does not exist
}
if(is_dir("$desired_dir/".$file_name)==false){
move_uploaded_file($file_tmp,"$desired_dir/".$file_name);
}else{ // rename the file if another one exist
$new_dir="$desired_dir/".$file_name.time();
rename($file_tmp,$new_dir) ;
}
mysql_query($query);
}else{
print_r($errors);
}
}
if(empty($error)){
echo "Success";
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>File Upload</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$("#mydate").datepicker({
dateFormat: "dd-M-y"
}).datepicker("setDate", new Date());
});
</script>
</head>
<body>
<form action="" method="POST" enctype="multipart/form-data">
<table>
<tr> <td width="327">
<input type="text" id="mydate"> </td> </tr>
<tr> <td>
<input type="file" name="files[]" multiple/></td> </tr>
<tr> <td>
<input type="submit"/></td> </tr>
</table>
</form>
</body>
</html>
I just make two file with name of form.php and second is form1.php
now my code is working well
form1.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" type="text/css" href="newstyles.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$("#mydate").datepicker({
dateFormat: "dd-M-y"
}).datepicker("setDate", new Date());
});
</script>
</head>
<body>
<form action="form.php" method="POST" enctype="multipart/form-data">
<table width="664" >
<tr>
<td height="34" colspan="6" class="DivSubHeaderCellTop"><p> Morning Breifing</p></td>
</tr>
<tr>
<td colspan="6" class="DivSubHeaderCellTop">Upload File</td>
</tr>
<tr><td> </td> <td> MB | Falcons</td> <td width="154"><input type="text" id="mydate">
<td>
</td>
</tr>
<tr> <td width="157" height="23"> </td> </tr>
<tr>
<td colspan="4" bordercolorlight="#006666"> <input type="file" name="files[]" multiple/> </td>
<td width="215">
<input type="submit"/>
</td>
<tr>
<td height="75">
</td>
<td width="116">
</td> </tr>
</table>
</form>
</body>
</html>
form.php
<?php
$host="localhost"; // Host name
$username="root"; // Mysql username
$password=""; // Mysql password
$db_name="test123"; // Database name
//$tbl_name="members"; // Table name
$con=mysql_connect("localhost","root","");
if(! $con)
{
die('Connection Failed'.mysql_error());
}
mysql_select_db("test123",$con);
if(isset($_FILES['files'])){
$errors= array();
foreach($_FILES['files']['tmp_name'] as $key => $tmp_name ){
$file_name = $key.$_FILES['files']['name'][$key];
$file_size =$_FILES['files']['size'][$key];
$file_tmp =$_FILES['files']['tmp_name'][$key];
$file_type=$_FILES['files']['type'][$key];
if($file_size > 2097152){
$errors[]='File size must be less than 2 MB';
}
$query="INSERT into upload_data (`FILE_NAME`,`FILE_SIZE`,`FILE_TYPE`) VALUES('$file_name','$file_size','$file_type'); ";
$desired_dir="user_data";
//$desired_dir=$options['upload_dir']."user_data";
if(empty($errors)==true){
if(is_dir($desired_dir)==false){
mkdir("$desired_dir", 755); // Create directory if it does not exist
}
if(is_dir("$desired_dir/".$file_name)==false){
move_uploaded_file($file_tmp,"$desired_dir/".$file_name);
}else{ // rename the file if another one exist
$new_dir="$desired_dir/".$file_name.time();
rename($file_tmp,$new_dir) ;
}
mysql_query($query);
}else{
print_r($errors);
}
}
if(empty($error)){
echo "Success";
}
}
?>
That type error occurs when missing css file of datepicker.so please verify you load required css file. And file upload only work when submit click so in php code you may check it post request or not
<?php
if(isset($_POST))
{
// do php work
}
?>
// and after your html code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>datepicker demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="datepicker"></div>
<script>
$( "#datepicker" ).datepicker();
</script>
</body>
</html>
View online Demo