capture image from webcam and store - codeigniter

I want to capture image from webcam and store it to database and file path.but it will not stored in database also in file path.
My view:
<script type="text/javascript" src="<?php echo base_url() ?>assets/dist/js/webcam.min.js"></script>
<div class="form-group">
<div class="col-sm-3 col-md-offset-3 no-print">
<!--<img src="<?php echo base_url(); ?>assets/images/blank.png" >-->
<div class="clearfix" id="my_camera"></div><br>
<button type="button" class="btn btn-info" onClick="take_snapshot()"><i class="fa fa-camera fa-fw"></i>Capture</button>
</div>
<div class="col-md-3 col-md-offset-1 imager" id="results">
<!--<img src="<?php echo base_url(); ?>assets/images/user.png" class="thumbnail" >-->
<h3>Visitors Photo</h3>
</div>
</div>
<script language="JavaScript">
function take_snapshot() {
Webcam.snap(function (data_uri) {
document.getElementById('results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img src="' + data_uri + '"/>';
});
}
</script>
<script language="JavaScript">
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach('#my_camera');
</script>

if you use https://github.com/jhuckaby/webcamjs/blob/master/DOCS.md you can
Webcam.snap(function (data_uri) {
document.getElementById('results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img src="' + data_uri + '"/>';
});
must be like
Webcam.snap(function (data_uri) {
document.getElementById('results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img src="' + data_uri + '"/>';
Webcam.upload( data_uri, '<?php echo site_url('controlerfunctiontoupload'); ?>', function(code, text) {
if (code == '200') {
alert ('ok');
} else {
alert('error');
}
} );
});
see in documentation
upload_name "webcam"
in controler / function to upload
$filename='test.jpg';
$filepath=FCPATH.'folderWithRights0777/'.$filename;
$result=move_uploaded_file($_FILES['webcam']['tmp_name'], $filepath));
also for insert in database
$this->db->from('files');
$this->db->set('image', $filename);
$this->db->insert();

Related

Ajax to call on same page within column

Hey I am working with AJAX to display live CSV data on my webpage, Currently my AJAX script on button click. But I want it to show the data without refreshing or clicking the button in grid view but I am unable to figure it out.
Here's my attempt :-
$(document).ready(function() {
$('#load_data').click(function() {
$.ajax({
url: "sample.csv",
dataType: "text",
success: function(data) {
var employee_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for (var count = 0; count < employee_data.length; count++) {
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for (var cell_count = 0; cell_count < cell_data.length; cell_count++) {
if (count === 0) {
table_data += '<th>' + cell_data[cell_count] + '</th>';
} else {
table_data += '<td>' + cell_data[cell_count] + '</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
});
<!DOCTYPE html>
<html>
<head>
<title>Click Load Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.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.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1 align="center">Please Click on Load Data</h1>
<br />
<div align="center">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</div>
<br />
<div id="employee_table">
</div>
</div>
</div>
</body>
</html>
Easy! All you need to do is call the data load function on page ready rather than adding it as a .click() callback:
$(document).ready(function() {
$.ajax({
url: "sample.csv",
dataType: "text",
success: function(data) {
var employee_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for (var count = 0; count < employee_data.length; count++) {
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for (var cell_count = 0; cell_count < cell_data.length; cell_count++) {
if (count === 0) {
table_data += '<th>' + cell_data[cell_count] + '</th>';
} else {
table_data += '<td>' + cell_data[cell_count] + '</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Click Load Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.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.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<div id="employee_table">
</div>
</div>
</div>
</body>
</html>

Getting Error in a chatroom that uses socket.io

I am using code as follow
server.js
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
users = [];
connections = [];
server.listen(process.env.PORT || 3000);
console.log('Server Running...');
app.get('/',function (req, res)
{
res.sendFile(__dirname + '/index.html');
});
io.sockets.on('connection', function(socket){
connections.push(socket);
console.log('Connected to %s sockets connection', connections.length);
// Disconnect
socket.on('disconnect', function (data){
if(!socket.username) return;
users.splice(users.indexOf(socket.username), 1);
updateUsernames();
connections.splice(connections.indexOf(socket), 1);
console.log('Disconnected: %s socket connected', connections.length);
});
//Send Message
socket.on('send message', function(data){
console.log(data);
io.sockets.emit('new message', {msg: data});
});
// New user
socket.on('new user', function(data, callback){
callback(true);
socket.username = data;
console.log(socket.username);
users.push(socket.username);
updateUsernames();
});
function updateUsernames(){
io.sockets.emit('get users', users);
}
});
index.html -> Client
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://immodernafrican.move.pk:3000/socket.io/socket.io.js"></script>
<style type="text/css">
body{
margin-top: 30px;
}
#messageArea{
display: none;
}
</style>
</head>
<body>
<div class="container">
<div id="userFormArea" class="row">
<div class="col-md-12">
<form id="userForm">
<div class="form-group">
<label>Enter Username</label>
<input class="form-control" id="username"/>
<br/>
<input type="submit" class="btn btn-primary " value="Login">
</div>
</form>
</div>
</div>
<div class="row" id="messageArea">
<div class="col-md-4">
<div class="well">
<h3>Online Users</h3>
<ul class="list-group" id="users"></ul>
</div>
</div>
<div class="col-md-8">
<div class="chat" id="chat"></div>
<form id="messageForm">
<div class="form-group">
<label>Enter Message</label>
<textarea class="form-control" id="message"></textarea>
<br/>
<input type="submit" class="btn btn-primary " value="Submit">
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var socket = io.connect('http://immodernafrican.move.pk:3000');
var $messageForm = $('#messageForm');
var $message = $('#message');
var $chat = $('#chat');
var $messageArea = $('#messageArea');
var $userFormArea = $('#userFormArea');
var $userForm = $('#userForm');
var $users = $('#users');
var $username = $('#username');
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message', $message.val());
$message.val('');
});
socket.on('new message', function(data){
$chat.append('<div class="well">'+data.msg+'</div>')
});
$userForm.submit(function(e){
e.preventDefault();
socket.emit('new user', $username.val(), function(data){
if(data){
$userFormArea.hide();
$messageArea.show();
}
});
$username.val('');
});
socket.on('get users', function(data){
var html = '';
for(i=0; i<data.length; i++)
{
html += '<li class="list-group-item">'+data[i]+'</li>';
}
users.html(html);
});
});
</script>
</body>
</html>
This is running accurately on localhost but as soon as i upload it to online hosting it gives an error. These are the error i am getting i have seen in console
(index):7 GET http://immodernafrican.move.pk:3000/socket.io/socket.io.js net::ERR_CONNECTION_TIMED_OUT
(index):58 Uncaught ReferenceError: io is not defined
at HTMLDocument.<anonymous> (http://immodernafrican.move.pk/:58:17)
at n (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:14784)
at Object.fireWith (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:15553)
at Function.ready (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:9773)
at HTMLDocument.B (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:14348)
i have tried to change
var socket = io.connect('http://immodernafrican.move.pk:3000');
to
var socket = io.connect();
but invain can anyone please help me regarding this issue so my chatroom can work
Thanks

Dynatable.js remove an element from a stylized list and update count

I am using for the most part the default code from the dynatable website for a stylized list.
I really like it as i get search on all my fields. here is the html code and the javascript code:
<ul id="ul-example" class="row-fluid no-bullets">
<?php foreach ($dms as $k => $v): ?>
<li class="span12" data-color="gray" id="manage_vehicle_id_<?= $v['id'];?>">
<div class="thumbnail">
<div class="thumbnail-image">
<center>
<img src="<?= $v['image']; ?>" width="220" height="180" />
</center>
</div>
<div class="caption">
<center>
<h5><?= $v['year'] . ' ' . $v['make'] . ' ' . $v['model'] . ' ' . $v['trim'];?></h5>
</center>
<hr>
<center>
<p><b>Vin:</b> <?= $v['vin']; ?></p>
<p><b>Stock #:</b> <?= $v['stock'];?></p>
</center>
<hr>
<p>
<center>
<button class="btn btn-primary" onclick="getVehicleDetailsByid('<?= $v['id']; ?>');"><i class="fa fa-edit"></i> Edit</button>
<button class="btn btn-danger" onclick="openDeleteVehicleByIdModal('<?= $v['id']; ?>', '<?= $v['vin']; ?>', '<?= $v['stock'];?>');"><i class="fa fa-minus"></i> Delete</button>
</center>
</p>
</div>
</div>
</li>
<?php endforeach; ?>
</ul>
function ulWriter(rowIndex, record, columns, cellWriter) {
var cssClass = "span12", li;
if (rowIndex % 3 === 0) { cssClass += ' first'; }
li = '<li class="' + cssClass + '" id="'+record.id+'" data-row-index="'+rowIndex+'"><div class="thumbnail"><div class="thumbnail-image">' + record.thumbnail + '</div><div class="caption">' + record.caption + '</div></div></li>';
return li;
}
// Function that creates our records from the DOM when the page is loaded
function ulReader(index, li, record) {
var $li = $(li),
$caption = $li.find('.caption');
record.thumbnail = $li.find('.thumbnail-image').html();
record.caption = $caption.html();
record.label = $caption.find('h5').text();
record.description = $caption.find('p').text();
record.color = $li.data('color');
record.id = $li.attr('id');
record.index = $li.attr('data-row-index');
}
$( '#ul-example' ).dynatable({
table: {
bodyRowSelector: 'li'
},
writers: {
_rowWriter: ulWriter
},
readers: {
_rowReader: ulReader
},
features: {
paginate: false,
sort: true,
search: true,
recordCount: true,
perPageSelect: false
},
inputs: {
searchTarget: '#manage_vehicle_search',
recordCountTarget: '#manage_vehicle_recordCount'
}
});
as you can see in the html i have a delete button that removes the record. I can remove it manually. However it is not actually removed. When a search query happens the item is still in the list.
I remove it with:
$( '#manage_vehicle_id_'+id ).remove();
var dynatable = $('#ul-example').data('dynatable');
dynatable.domColumns.removeFromArray(index);
dynatable.dom.update();
I am getting an error here something like column.length is null. I can see the this.remove method in dynatable is throwing an error.
How can i remove this item from the list and update dynatable dom and the get the right count?
Thanks
I solved this issue by using dynatable.process() instead of remove/update. Not sure if it's the proper solution, but it worked for me.
$( '#manage_vehicle_id_'+id ).remove();
var dynatable = $('#ul-example').data('dynatable');
dynatable.process();

Kendo tooltip showing error in console

I have written a code for a kendo tooltip and it is showing an error like this -
Uncaught TypeError: Object [object Object] has no method
'kendoTooltip'
It is an editable listview in a kendowindow.
Here is the code
<span style="float: right; margin-top: 4px;">
<a id="mortgage_add_row" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon7.png" alt="" height="36" width="37"></a>
<a id="mortgage_delete_row" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon8.png" alt="" height="36" width="37"></a>
<a id="mortgage_edit_row" class="k-edit" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon9.png" alt="" height="36" width="37"></a>
<a id="mortgage_save_row" class="k-insert" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon10.png" alt="" height="36" width="37"></a>
</span><div class="clear"></div>
These all links are CRUD buttons and they are bound to the respective actions.
$(document).ready(function() {
// Other code.
// Add Row
$("#mortgage_add_row").on("click", function(event) {
event.preventDefault();
mortage_listview.add();
});
// Delete Row
$("#mortgage_delete_row").on("click", function(event) {
event.preventDefault();
mortage_listview.remove(mortage_listview.element.children().first());
if (dataSource.total() < 1) {
mortage_listview.add();
} else {
dataSource.read();
}
});
// edit row
$("#mortgage_edit_row").on("click", function(event) {
event.preventDefault();
mortage_listview.edit(mortage_listview.element.children().first());
});
// save row
$("#mortgage_save_row").on("click", function(event) {
event.preventDefault();
mortage_listview.save();
});
if (!kendoWindow_mortgage.data("kendoWindow")) {
kendoWindow_mortgage.kendoWindow({
width: "520px",
title: ""
});
}
$("#mortgage_add_row").kendoTooltip({
content: "Hello!"
});
});
Any help is greatly appreciated.
Thanks.

keep all selected values after submit

I'm stuck with this script I'm using:
index.php
<!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" />
<link href="includes/css/style.css" type="text/css" rel="stylesheet" />
<link href="includes/css/wt-gallery.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="includes/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="includes/js/configuratie.js"></script>
<script type="text/javascript" src="includes/js/jquery.wt-gallery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
$('#wait_1').show();
$('#result_1').hide();
$.get("func.php", {
func: "drop_1",
drop_var: $('#drop_1').val()
}, function(response){
$('#result_1').fadeOut();
setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
});
return false;
});
$('#wait_2').hide();
$('#drop_2').change(function(){
$('#wait_2').show();
$('#result_2').hide();
$.get("func.php", {
func: "drop_2",
drop_var: $('#drop_2').val()
}, function(response){
$('#result_2').fadeOut();
setTimeout("finishAjax2('result_2', '"+escape(response)+"')", 400);
});
return false;
});
$('#wait_3').hide();
$('#drop_3').change(function(){
$('#wait_3').show();
$('#result_3').hide();
$.get("func.php", {
func: "drop_3",
drop_var: $('#drop_3').val()
}, function(response){
$('#result_3').fadeOut();
setTimeout("finishAjax3('result_3', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response) {
$('#wait_1').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
function finishAjax2(id, response) {
$('#wait_2').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
function finishAjax3(id, response) {
$('#wait_3').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
function finishAjax_tier_three(id, response) {
$('#wait_2').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
function finishAjax_tier_four(id, response) {
$('#wait_3').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
function finishAjax_tier_five(id, response) {
$('#wait_4').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>
</head>
<?php
$website = "it";
// configuratie file en db connect
include "includes/inc/config.inc.php";
include('db.php');
include_once "class/slider.class.php";
include('func.php');
$slideralbum = new slideralbum($dbo);
$sliders = $slideralbum->getSliderItems($website);
?>
<body>
<p>
<form name="product" action="" method="post">
<select name="drop_1" id="drop_1">
<option value="" selected="selected" disabled="disabled">Selecteer Merk</option>
<?php getTierOne(); ?>
</select>
<span id="wait_1" style="display: none;">
<img alt="Please Wait" src="ajax-loader.gif"/>
</span>
<span id="result_1" style="display: none;"></span>
<span id="wait_2" style="display: none;">
<img alt="Please Wait" src="ajax-loader.gif"/>
</span>
<span id="result_2" style="display: none;"></span>
<span id="wait_3" style="display: none;">
<img alt="Please Wait" src="ajax-loader.gif"/>
</span>
<span id="result_3" style="display: none;"></span>
<span id="wait_4" style="display: none;">
<img alt="Please Wait" src="ajax-loader.gif"/>
</span>
<span id="result_4" style="display: none;"></span>
<INPUT TYPE="button" VALUE="Refresh" onclick='location.reload()'>
</form>
</p>
<p>
<?php if(isset($_POST['submit'])){
$drop = $_POST['drop_1'];
$drop_2 = $_POST['drop_2'];
$drop_3 = $_POST['drop_3'];
$drop_4 = $_POST['drop_4'];
$drop_5 = $_POST['drop_5'];
?>
<table border="1" bordercolor="#B5B5B5" style="background-color:#FFFFFF" width="250" cellpadding="3" cellspacing="3">
<tr>
<td>Merk:</td>
<td><?php echo $drop;?></td>
</tr>
<tr>
<td>Model:</td>
<td><?php echo $drop_2;?></td>
</tr>
<tr>
<td>Bouwjaar:</td>
<td><?php echo $drop_3;?></td>
</tr>
<tr>
<td>Kleur:</td>
<td><?php echo $drop_4;?></td>
</tr>
</table>
<?php
}
?>
<div id="banner-block"> <!-- Begin of Slideshow -->
<div class="container">
<div class="wt-gallery" style="width:920px; height:375px;">
<div class="main-screen">
<?php if(isset($_POST['submit'])){
$drop = $_POST['drop_1'];
$drop_2 = $_POST['drop_2'];
$drop_3 = $_POST['drop_3'];
$drop_4 = $_POST['drop_4'];
$drop_5 = $_POST['drop_5'];
?>
<img src="images/<?php echo $drop_5;?>" alt="<?php echo $drop_5;?>" width="920" height="360"/>
<?php
}
?>
<noscript>
<!-- placeholder image when javascript is off -->
<img src="../images/triworks_abstract27.jpg" alt=""/>
</noscript>
</div>
<div class="cpanel">
<div class="thumbs-back"></div>
<div class="thumbnails">
<ul>
<?php $sliders = $slideralbum->getSliderItems($website, NULL);
foreach($sliders as $slider){
?>
<li effect="none">
<div>
<a href="<?php echo $slider->slider_img; ?>" height="360" width="720" alt="<?php echo $slider->slider_img; ?>" />
<img src="<?php echo $slider->slider_tmb; ?>" height="70" width="125" alt="<?php echo $slider->slider_tmb; ?>" />
</a>
</div>
<div class="data">
</div>
</li>
<?php
}
?>
</ul>
</div>
<div class="thumbs-fwd"></div>
</div>
</div>
</div>
</div>
</body>
</html>
func.php
<?php
//**************************************
// Page load dropdown results //
//**************************************
function getTierOne()
{
$result = mysql_query("SELECT DISTINCT make FROM vehicles ORDER BY make ASC")
or die(mysql_error());
while($tier = mysql_fetch_array( $result ))
{
?>
<option value="<?php echo $tier['make'];?>"<?php echo (isset($_POST['drop_1']) && $_POST['drop_1'] == $tier['make']) ? ' selected="selected"' : '' ; ?>><?php echo $tier['make'];?></option>
<?php
}
}
//**************************************
// First selection results //
//**************************************
if (isset($_GET['func'])&& $_GET['func'] == "drop_1" ) {
drop_1($_GET['drop_var']);
}
function drop_1($drop_var)
{
include_once('db.php');
$result = mysql_query("SELECT DISTINCT model FROM vehicles WHERE make='$drop_var' ORDER BY model")
or die(mysql_error());
echo '<select name="drop_2" id="drop_2">
<option value=" " disabled="disabled" selected="selected">Selecteer Model</option>';
while($drop_2 = mysql_fetch_array( $result ))
{
echo '<option value="'.$drop_2['model'].'">'.$drop_2['model'].'</option>';
}
echo '</select>';
echo "<script type=\"text/javascript\">
$('#wait_2').hide();
$('#drop_2').change(function(){
$('#wait_2').show();
$('#result_2').hide();
$.get(\"func.php\", {
func: \"drop_2\",
drop_var: $('#drop_1').val(),
drop_var2: $('#drop_2').val()
}, function(response){
$('#result_2').fadeOut();
setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400);
});
return false;
});
</script>";
}
//**************************************
// Second selection results //
//**************************************
if (isset($_GET['func'])&& $_GET['func'] == "drop_2" ) {
drop_2($_GET['drop_var'], $_GET['drop_var2']);
}
function drop_2($drop_var, $drop_var2)
{
include_once('db.php');
$result = mysql_query("SELECT DISTINCT year FROM vehicles WHERE make='$drop_var' AND model='$drop_var2'")
or die(mysql_error());
echo '<select name="drop_3" id="drop_3">
<option value=" " disabled="disabled" selected="selected">Selecteer Jaar</option>';
while($drop_3 = mysql_fetch_array( $result ))
{
echo '<option value="'.$drop_3['year'].'">'.$drop_3['year'].'</option>';
}
echo '</select>';
echo "<script type=\"text/javascript\">
$('#wait_3').hide();
$('#drop_3').change(function(){
$('#wait_3').show();
$('#result_3').hide();
$.get(\"func.php\", {
func: \"drop_3\",
drop_var: $('#drop_1').val(),
drop_var2: $('#drop_2').val(),
drop_var3: $('#drop_3').val()
}, function(response){
$('#result_3').fadeOut();
setTimeout(\"finishAjax_tier_four('result_3', '\"+escape(response)+\"')\", 400);
});
return false;
});
</script>";
}
//**************************************
// Third selection results //
//**************************************
if (isset($_GET['func'])&& $_GET['func'] == "drop_3" ) {
drop_3($_GET['drop_var'], $_GET['drop_var2'], $_GET['drop_var3']);
}
function drop_3($drop_var, $drop_var2, $drop_var3)
{
include_once('db.php');
$result = mysql_query("SELECT DISTINCT color FROM vehicles WHERE make='$drop_var' AND model='$drop_var2' AND year='$drop_var3'")
or die(mysql_error());
echo '<select name="drop_4" id="drop_4">
<option value=" " disabled="disabled" selected="selected">Selecteer Kleur</option>';
while($drop_4 = mysql_fetch_array( $result ))
{
if ($drop_4['color'] != "") {
echo '<option value="'.$drop_4['color'].'">'.$drop_4['color'].'</option>';
}
}
echo '</select>';
echo "<script type=\"text/javascript\">
$('#wait_4').hide();
$('#drop_4').change(function(){
$('#wait_4').show();
$('#result_4').hide();
$.get(\"func.php\", {
func: \"drop_4\",
drop_var: $('#drop_1').val(),
drop_var2: $('#drop_2').val(),
drop_var3: $('#drop_3').val(),
drop_var4: $('#drop_4').val()
}, function(response){
$('#result_4').fadeOut();
setTimeout(\"finishAjax_tier_five('result_4', '\"+escape(response)+\"')\", 400);
});
return false;
});
</script>";
}
//**************************************
// Fourth selection results //
//**************************************
if(isset($_GET['func'])&& $_GET['func'] == "drop_4" ) {
drop_4($_GET['drop_var'], $_GET['drop_var2'], $_GET['drop_var3'], $_GET['drop_var4']);
}
function drop_4($drop_var, $drop_var2, $drop_var3, $drop_var4)
{
include_once('db.php');
$result = mysql_query("SELECT * FROM vehicles WHERE make='$drop_var' AND model='$drop_var2' AND year='$drop_var3' AND color='$drop_var4'")
or die(mysql_error());
while($drop_5 = mysql_fetch_array( $result ))
{
if ($drop_5['img'] != "") {
echo '<input type="checkbox" name="drop_5" id="drop_5" style="display:none;" checked value="'.$drop_5['img'].'"/>';
}
}
echo '<input type="submit" name="submit" value="Submit" />';
}
?>
After I selected all my dropdown items and press submit it is working good but all the selected values are gone...
If you want to change color you have to go to the whole dropdown list again. Is it possible to keep all the selected values after submit?
Thanks in advance
Kind Regards
Joep
You are using GET requests to display each dropdown list in turn, and then using a POST request to submit your completed form. You should make sure that all the dropdowns are displayed after the POST request.
In index.php, I think you could try something like that :
<span id="result_1" style="display: none;">
<?php
if (isset($_POST['submit']) {
drop_1($_POST['drop_1']);
}
?>
</span>
...
<span id="result_2" style="display: none;">
<?php
if (isset($_POST['submit']) {
drop_2($_POST['drop_1'], $_POST['drop_2']);
}
?>
</span>
...
<span id="result_3" style="display: none;">
<?php
if (isset($_POST['submit']) {
drop_3($_POST['drop_1'], $_POST['drop_2'], $_POST['drop_3']);
}
?>
</span>
etc...
Anyway, the idea is to reuse the functions that build your dropdowns, based on the values in the $_POST.

Resources