Learn VBA & Macros in 1 Week!

PHP - Php+mysql Drag And Drop

Full Excel VBA Course - Beginner to Expert

Php+mysql Drag And Drop	View Content

Hi,
At present the PHP page reads the MySQL data and prints on screen and if the result if 'FREE' it shows a clickable image for the user to book. I am looking for something that allows the user to drag the result they fund to another location with in the table. I.e. user has box 1 filled with their name, they can drag their name to box 9 and it saves it, so they can go back on the it will be their.

If anyone knows where I can firn maybe a tutorial, or guide to get started with this, as I have looked and cannot see anything.

Cheers.
Stu

Full Excel VBA Course - Beginner to Expert

Help With A Drag And Drop Image Append

Similar Tutorials

View Content

Hello im looking for a little help with my script,

im hosting the files at www.1pw.co.uk/demo.php

After dragging an image into the shopping basket, I would like a thumbnail image to appear in the div at the bottom of the page ( .bowlpic) is this possible and what is the easiest way of going about it?

demo.php
Code: [Select]
<?php

define('INCLUDE_CHECK',1);
require "connect2.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" />
<title>shop</title>

<link rel="stylesheet" type="text/css" href="demo.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.ui.main.js"></script>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript" src="simpletip/jquery.simpletip-1.3.1.pack.js"></script>

<script type="text/javascript" src="script.js"></script>

</head>

<body>

<div id="main-container">
<div class="tutorialzine">
<h1>Shopping cart</h1>
<h3>The best products at the best prices</h3>
</div>

<div class="container">

<span class="top-label">
<span class="label-txt">Products</span>
</span>

<div class="content-area">

<div class="content drag-desired">

<?php

$result = mysql_query("SELECT * FROM internet_shop");
while($row=mysql_fetch_assoc($result))
{
echo '<div class="product"><a href="#" class="item"><img src="img/products/'.$row['img'].'" alt="'.htmlspecialchars($row['name']).'" width="128" height="128" class="pngfix" /></a></div>';

}

?>

<div class="clear"></div>
</div>

</div>

<div class="bottom-container-border">
</div>

</div>

<div class="container">

<span class="top-label">
<span class="label-txt">Shopping Cart</span>
</span>

<div class="content-area">

<div class="content drop-here">
<div id="cart-icon">
<img src="img/Shoppingcart_128x128.png" alt="shopping cart" class="pngfix" width="128" height="128" />
<img src="img/ajax_load_2.gif" alt="loading.." id="ajax-loader" width="16" height="16" />
</div>

<form name="checkoutForm" method="post" action="order.php">

<div id="item-list">
</div>

</form>
<div class="clear"></div>

<div id="total"></div>

<div class="clear"></div>

<a href="" onclick="document.forms.checkoutForm.submit(); return false;" class="button">Checkout</a>

</div>

</div>

<div class="bottom-container-border">
</div>

</div>

</div>

</body>
</html>

script.js
Code: [Select]
var purchased=new Array();
var totalprice=0;

$(document).ready(function(){

$('.product').simpletip({

offset:[40,0],
content:'<img src="img/ajax_load.gif" alt="loading" style="margin:10px;" />',
onShow: function(){

var param = this.getParent().find('img').attr('src');

if($.browser.msie && $.browser.version=='6.0')
{
param = this.getParent().find('img').attr('style').match(/src=\"([^\"]+)\"/);
param = param[1];
}

this.load('ajax/tips.php',{img:param});
}

});

$(".product img").draggable({

containment: 'document',
opacity: 0.6,
revert: 'invalid',
helper: 'clone',
zIndex: 100

});

$("div.content.drop-here").droppable({

drop:
function(e, ui)
{
var param = $(ui.draggable).attr('src');

if($.browser.msie && $.browser.version=='6.0')
{
param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);
param = param[1];
}

addlist(param);
}

});

});

function addlist(param)
{
$.ajax({
type: "POST",
url: "ajax/addtocart.php",
data: 'img='+encodeURIComponent(param),
dataType: 'json',
beforeSend: function(x){$('#ajax-loader').css('visibility','visible');},
success: function(msg){

$('#ajax-loader').css('visibility','hidden');
if(parseInt(msg.status)!=1)
{
return false;
}
else
{
var check=false;
var cnt = false;

for(var i=0; i<purchased.length;i++)
{
if(purchased[i].id==msg.id)
{
check=true;
cnt=purchased[i].cnt;

break;
}
}

if(!cnt)
$('#item-list').append(msg.txt);

if(!check)
{
purchased.push({id:msg.id,cnt:1,price:msg.price});
}
else
{
if(cnt>=3) return false;

purchased[i].cnt++;
$('#'+msg.id+'_cnt').val(purchased[i].cnt);
}

totalprice+=msg.price;
update_total();

}

$('.tooltip').hide();

}
});
}

function findpos(id)
{
for(var i=0; i<purchased.length;i++)
{
if(purchased[i].id==id)
return i;
}

return false;
}

function remove(id)
{
var i=findpos(id);

totalprice-=purchased[i].price*purchased[i].cnt;
purchased[i].cnt = 0;

$('#table_'+id).remove();
update_total();
}

function change(id)
{
var i=findpos(id);

totalprice+=(parseInt($('#'+id+'_cnt').val())-purchased[i].cnt)*purchased[i].price;

purchased[i].cnt=parseInt($('#'+id+'_cnt').val());
update_total();
}

function update_total()
{
if(totalprice)
{
$('#total').html('total: $'+totalprice);
$('a.button').css('display','block');
}
else
{
$('#total').html('');
$('a.button').hide();
}
}

demo.css
Code: [Select]
body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
}

body{
color:#555555;
font-size:13px;
background-color:#282828;
}

.clear{
clear:both;
}

#main-container{
width:700px;
margin:20px auto;
}

.container{
margin-bottom:40px;
}

.top-label{
background:url(img/label_bg.png) no-repeat;
display:inline-block;
margin-left:20px;
position:relative;
margin-bottom:-15px;
}

.label-txt{
background:url(img/label_bg.png) no-repeat top right;
display:inline-block;
font-size:10px;
height:36px;
margin-left:10px;
padding:12px 15px 0 5px;
text-transform:uppercase;
}

.content-area{
background:url(img/container_top.png) no-repeat #fcfcfc;
padding:15px 20px 0 20px;
}

.content{
padding:10px;
}

.drag-desired{
background:url(img/drag_desired_label.png) no-repeat top right;
padding:30px;
}

.drop-here{
background:url(img/drop_here_label.png) no-repeat top right;
}

.bottom-container-border{
background:url(img/container_bottom.png) no-repeat;
height:14px;
}

.product{
border:2px solid #F5F5F5;
float:left;
margin:15px;
padding:10px;
}

.product img{
cursor:move;
}

p.descr{
padding:5px 0;
}

small{
display:block;
margin-top:4px;
}

.tooltip{
position: absolute;
top: 0;
left: 0;
z-index: 3;
display: none;

background-color:#666666;
border:1px solid #666666;
color:#fcfcfc;

padding:10px;

-moz-border-radius:12px;
-khtml-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius:12px;
}

#cart-icon{
width:128px;
float:left;
position:relative;
}

#ajax-loader{
position:absolute;
top:0px;
left:0px;
visibility:hidden;
}

#item-list{
float:left;
width:490px;
margin-left:20px;
padding-top:15px;
}

a.remove,a.remove:visited{
color:red;
font-size:10px;
text-transform:uppercase;
}

#total{
clear:both;
float:right;
font-size:10px;
font-weight:bold;
padding:10px 12px;
text-transform:uppercase;
}

#item-list table{
background-color:#F7F7F7;
border:1px solid #EFEFEF;
margin-top:5px;
padding:4px;
}

a.button,a.button:visited{
display:none;

height:29px;
width:136px;

padding-top:15px;
margin:0 auto;
overflow:hidden;

color:white;
font-size:12px;
font-weight:bold;
text-align:center;
text-transform:uppercase;

background:url(img/button.png) no-repeat center top;
}

a.button:hover{
background-position:bottom;
text-decoration:none;
}

a, a:visited {
color:#00BBFF;
text-decoration:none;
outline:none;
}

a:hover{
text-decoration:underline;
}

h1{
font-size:28px;
font-weight:bold;
font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
}

h2{
font-weight:normal;
font-size:20px;

color:#666666;
text-indent:30px;
margin:20px 0;
}

.tutorialzine h1{
color:white;
margin-bottom:10px;
font-size:48px;
}

.tutorialzine h3{
color:#F5F5F5;
font-size:10px;
font-weight:bold;
margin-bottom:30px;
text-transform:uppercase;
}

.tutorial-info{
color:white;
text-align:center;
padding:10px;
margin-top:-20px;
}

*/ added myself */
.icon-blank{
background:url('icons/blank.gif') no-repeat;
}
.icon-add{
background:url('icons/edit_add.png') no-repeat;
}
.icon-edit{
background:url('icons/pencil.png') no-repeat;
}
.icon-remove{
background:url('icons/edit_remove.png') no-repeat;
}
.icon-save{
background:url('icons/filesave.png') no-repeat;
}
.icon-cut{
background:url('icons/cut.png') no-repeat;
}
.icon-ok{
background:url('icons/ok.png') no-repeat;
}
.icon-no{
background:url('icons/no.png') no-repeat;
}
.icon-cancel{
background:url('icons/cancel.png') no-repeat;
}
.icon-reload{
background:url('icons/reload.png') no-repeat;
}
.icon-search{
background:url('icons/search.png') no-repeat;
}
.icon-print{
background:url('icons/print.png') no-repeat;
}
.icon-help{
background:url('icons/help.png') no-repeat;
}
.icon-undo{
background:url('icons/undo.png') no-repeat;
}
.icon-redo{
background:url('icons/redo.png') no-repeat;
}
.icon-back{
background:url('icons/back.png') no-repeat;
}
.icon-sum{
background:url('icons/sum.png') no-repeat;
}
.icon-tip{
background:url('icons/tip.png') no-repeat;
}

.icon-mini-add{
background:url('icons/mini_add.png') no-repeat 2px 2px;
}
.icon-mini-edit{
background:url('icons/mini_edit.png') no-repeat 2px 2px;
}
.icon-mini-refresh{
background:url('icons/mini_refresh.png') no-repeat 3px 2px;
}

.products{
list-style:none;
padding:0px;
height:100%;
}
.products li{
float:left;
margin:10px;
}
.item{
display:block;
text-decoration:none;
}
.item img{
border:1px solid #333;
}
.item p{
margin:0;
font-weight:bold;
text-align:center;
color:#c3c3c3;
}
.cart{
position:fixed;
right:0;
top:0;
width:300px;
height:100%;
background:#ccc;
padding:0px 10px;
}
.bowlpic {
height:300px;
width:260px;
overflow:none;
background-image:url(bowl.jpg);
background-repeat:no-repeat;
background-color:#FF0000;
float:left;
text-align: left;
}
.total{
margin:0;
text-align:right;
padding-right:20px;
}
#productpics {
height:300px; width:1000px;
}
#arrow {height:300px; width:300px; float:left;
}

Not Getting The Filename Of A Drag And Drop Image In Php

Similar Tutorials

View Content

I'm trying to create a form that has a drag and drop image with it. I did a tutorial for the drag and drop and now I'm trying to put it together with a form.

The problem I'm having is that I'm not able to get the filename, so that I can insert it into the database.

I've tried doing this

if(isset($_POST['add_product']))
{
    $filename = $_FILES['files']['name'];

    echo print_r($filename);
    die();
}

but I get a blank array

Quote

Array ( [0] => ) 1

and when I do this

if(isset($_FILES['files']))
{

    $filename = $_FILES['files']['name'];

    echo print_r($filename);
    die();

}

I get the name of my image, but if I do this

if(isset($_FILES['files']))
{
    $filename = $_FILES['files']['name'];
}

if(isset($_POST['add_product']))
{
    echo print_r($filename);
    die();
}

I get a blank array as well

Quote

Array ( [0] => ) 1

Here I was hoping that I could grab the $filename and pass it on to the

Quote

if(isset($_POST['add_product]))

Here is my form

<form action="" method="POST" enctype="multipart/form-data">
    <div class="form-group">
        <label for="title">Title</label>
        <input type="text" class="form-control" name="title">
    </div>

    <div class="form-group">
        <label for="content">content</label>
        <textarea name="content" id="content" class="form-control" cols="30" rows="10"></textarea>
    </div>

    <input type="file" name="files[]" id="standard-upload-files" multiple>
    <input type="submit" value="Upload files" id="standard-upload">

    <div class="wrapper">
        <div class="upload-console">
            <h2 class="upload-console-header">
                Upload
            </h2>

            <div class="upload-console-body">
                <div class="upload-console-drop" id="drop-zone">
                    just drag and drop files here
                </div>

                <div class="bar">
                    <div class="bar-fill" id="bar-fill">
                        <div class="bar-fill-text" id="bar-fill-text"></div>
                    </div>
                </div>

                <div class="hidden" id="uploads-finished">
                    <h3>Process files</h3>

                    <div class="upload-console-upload">
                        <a href="#">filename.jpg</a>
                        <span>Success</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-dark btn-lg btn-block" name="add_product">Save</button>
    </div>
</form>

Here is the js files that I got from the tutorial that I did.

main.js

(function(){
    "use strict";

    var dropZone = document.getElementById('drop-zone');
    var barFill = document.getElementById('bar-fill');
    var barFillText = document.getElementById('bar-fill-text');
    var uploadsFinished = document.getElementById('uploads-finished');

    var startUpload = function(files){
        // console.log(files);
        app.uploader({
            files: files,
            progressBar: barFill,
            progressText: barFillText,
            processor: 'index.php',

            finished: function(data){
                // console.log(data);
                var x;
                var uploadedElement;
                var uploadedAnchor;
                var uploadedStatus;
                var currFile;

                for(x = 0; x < data.length; x = x + 1)
                {
                    currFile = data[x];

                    uploadedElement = document.createElement('div');
                    uploadedElement.className = 'upload-console-upload';

                    uploadedAnchor = document.createElement('a');
                    uploadedAnchor.textContent = currFile.name;

                    if(currFile.uploaded)
                    {
                        uploadedAnchor.href = 'uploads/'+currFile.file;
                    }

                    uploadedStatus = document.createElement('span');
                    uploadedStatus.textContent = currFile.uploaded ? 'Uploaded' : 'Failed';

                    uploadedElement.appendChild(uploadedAnchor);
                    uploadedElement.appendChild(uploadedStatus);

                    uploadsFinished.appendChild(uploadedElement);
                }

                uploadsFinished.className = '';

            },

            error: function(){
                console.log('there was an error');
            }
        });
    };

    //drop functionality

    dropZone.ondrop = function(e){
        e.preventDefault();
        this.className = 'upload-console-drop';

        startUpload(e.dataTransfer.files);
    };

    dropZone.ondragover = function(){
        this.className = 'upload-console-drop drop';
        return false;
    };

    dropZone.ondragleave = function(){
        this.className = 'upload-console-drop';
        return false;
    };
}());

upload.js

var app = app || {};

(function(o){
    "use strict";

    //private methods
    var ajax, getFormData, setProgress;

    ajax = function(data){


        var xmlhttp = new XMLHttpRequest();

        var uploaded;

        xmlhttp.addEventListener('readystatechange', function(){
            if(this.readyState === 4)
            {
                if(this.status === 200)
                {
                    uploaded = JSON.parse(this.response);

                    if(typeof o.options.finished === 'function')
                    {
                        o.options.finished(uploaded);
                    }
                }else{
                    if(typeof o.options.error === 'function')
                    {
                        o.options.error();
                    }
                }
            }
        });

        xmlhttp.upload.addEventListener('progress', function(e){
            var percent;

            if(e.lengthComputable === true)
            {
                percent = Math.round((event.loaded / event.total) * 100);
                setProgress(percent);
            }
        });

        xmlhttp.open('post', o.options.processor);
        xmlhttp.send(data);
    };

    getFormData = function(source){

        var data = new FormData();
        var i;

        for(i = 0; i < source.length; i = i + 1)
        {
            data.append('files[]', source[i]);
        }

        return data;
    };

    setProgress = function(value){
        if(o.options.progressBar !== undefined)
        {
            o.options.progressBar.style.width = value ? value + '%' : 0;
        }

        if(o.options.progressText !== undefined)
        {
            o.options.progressText.textContent = value ? value + '%' : '';
        }
    };

    o.uploader = function(options){

        o.options = options;

        if(options.files !== undefined)
        {
            ajax(getFormData(o.options.files));

            // getFormData(o.options.files);
        }
    }
}(app));

Moved: Submit Button For Drag And Drop Sorting Lists

Similar Tutorials

View Content

This topic has been moved to JavaScript Help.

http://www.phpfreaks.com/forums/index.php?topic=310879.0

-1 Down Vote Favorite I Am Using The Dragdrop Functionality On A Page Which Also Updates The Database.drag And Drop Is Working Fine But I Am Havin

Similar Tutorials

View Content

I am using the dragdrop functionality on a page which also updates the database.Drag and drop is working fine But i am having difficulty to determine which events to use to update the database. Here is my code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Portlets</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<!--<link rel="stylesheet" href="/resources/demos/style.css">-->
<style>
body {
min-width: 520px;
}
.interview-questions-column {
width: 400px;
float: left;
padding-bottom: 100px;
}

.question-bank {
width: 500px;
float: left;
padding-bottom: 100px;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
.portlet-toggle {
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
}
.portlet-content {
padding: 0.4em;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 50px;
}



.sortable {
border: 1px solid #eee;
width: 95%;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
.sortable li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 95%;
}

.bank-quertion-sotrable {
    border: 1px solid #eee;
width: 150px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;

}

.bank-quertion-sotrable li{
    margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 200px;

}
.ui-state-default { height: 1.5em; line-height: 1.2em; }


</style>
<script>
$(function() {
$( ".interview-questions-column" ).sortable({
connectWith: ".interview-questions-column",
handle: ".portlet-header",
cancel: ".portlet-toggle",
placeholder: "portlet-placeholder ui-corner-all"
});

$( ".portlet" )
.addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
.find( ".portlet-header" )
.addClass( "ui-widget-header ui-corner-all" )
.prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");

$( ".portlet-toggle" ).click(function() {
var icon = $( this );
icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
});
});


$(function() {
    $( ".sortable" ).sortable({
         placeholder: "ui-state-default",
         connectWith: ".connectedSortable",
         /*receive: function(event, ui) {
           // only perform for sub drop downs
              if($(this).hasClass('question_bank'))
               {
                   // if the item doesn't have the matching sub class
                   if (!$(this).hasClass($(ui.item).attr('class')))
                   {
                       // cancel the sortable
                       $(ui.sender).sortable('cancel');
                   }
               }
                alert('receive');
                alert(ui.sender.attr("dataid"));
                alert(ui.sender.toSource());
            //  alert("[" + this.id + "] received [" + ui.item.attr("id") + "] from [" + ui.sender.attr("id") + "]");

        },*/

        update: function (event, ui) {
            //serial = $('#sortableF').sortable('serialize');
            var data = $(this).sortable('serialize');
            alert(data);
                 //alert('update sortable');
                 //alert("[" + this.id + "] received [" + ui.item.attr("id") + "] from [" + ui.sender.attr("id") + "]");
        // POST to server using $.post or $.ajax
        /*$.ajax({
            data: 'test',
            type: 'POST',
            url: '/your/url/here'
        });*/
    }




    }).disableSelection();
});


$(function() {
$( ".draggable" ).draggable({
connectToSortable: ".sortable",
helper: "clone",
/*revert: function(valid) {
        if(valid) {

            alert("drop is valid");
            //Dropped in a valid location
        }
        else {
            alert("drop is invalid");
            //Dropped in an invalid location
        }
       // return !valid;
      return false;
    }*/
stop: function( event, ui ) {
    // alert(ui);
    // alert("[" + this.id + "] received [" + ui.item.attr("id") + "] from [" + ui.sender.attr("id") + "]");

    }   

});


});
    $( "ul, li" ).disableSelection();
</script>
</head>
<body>
<div class="interview-questions-column">

<div class="portlet">
<div class="portlet-header">Feeds</div>
    <div class="portlet-content">
        <ul id="sortableF" class="connectedSortable sortable">
            <li class="ui-state-default" id="item-1">Item 1</li>
            <li class="ui-state-default" id="item-2">Item 2</li>
            <li class="ui-state-default" id="item-3">Item 3</li>
            <li class="ui-state-default" id="item-4">Item 4</li>
            <li class="ui-state-default" id="item-5">Item 5</li>
        </ul>
    </div>
</div>


    <div class="portlet">

    <div class="portlet-header">News</div>
    <div class="portlet-content">  
        <ul id="sortableS" class="connectedSortable sortable">
            <li class="ui-state-default" id="item-6">Item 1</li>
            <li class="ui-state-default" id="item-7">Item 2</li>
            <li class="ui-state-default" id="item-8">Item 3</li>
            <li class="ui-state-default" id="item-9">Item 4</li>
            <li class="ui-state-default" id="item-10">Item 5</li>
        </ul>
    </div>

    </div>




    <div class="portlet">
    <div class="portlet-header">Shopping</div>
    <div class="portlet-content">

     <ul id="sortableS" class="connectedSortable sortable">
            <li class="ui-state-default" id="item-11">Item 1</li>
            <li class="ui-state-default" id="item-12">Item 2</li>
            <li class="ui-state-default" id="item-13">Item 3</li>
            <li class="ui-state-default" id="item-14">Item 4</li>
            <li class="ui-state-default" id="item-15">Item 5</li>
        </ul>

    </div>
    </div>




    <div class="portlet">
    <div class="portlet-header">Links</div>
    <div class="portlet-content">

     <ul id="sortableS" class="connectedSortable sortable">
            <li class="ui-state-default" id="item-16">Item 1</li>
            <li class="ui-state-default" id="item-17">Item 2</li>
            <li class="ui-state-default" id="item-18">Item 3</li>
            <li class="ui-state-default" id="item-19">Item 4</li>
            <li class="ui-state-default" id="item-20">Item 5</li>
        </ul>

    </div>
    </div>



    <div class="portlet">
    <div class="portlet-header">Images</div>
    <div class="portlet-content">

      <ul id="sortableS" class="connectedSortable sortable">
            <li class="ui-state-default" id="item-21">Item 1</li>
            <li class="ui-state-default" id="item-22">Item 2</li>
            <li class="ui-state-default" id="item-23">Item 3</li>
            <li class="ui-state-default" id="item-24">Item 4</li>
            <li class="ui-state-default" id="item-25">Item 5</li>
        </ul>

    </div>
    </div>

</div>

<div class="question-bank">

<div class="portlet">
    <div class="portlet-header">Question bank</div>
        <div class="portlet-content">
           <ul id="question_back" class="connectedSortable bank-quertion-sotrable">
                <li class="ui-state-default draggable" id="item-26">Item 1</li>
                <li class="ui-state-default draggable" id="item-27">Item 2</li>
                <li class="ui-state-default draggable" id="item-28">Item 3</li>
                <li class="ui-state-default draggable" id="item-29">Item 4</li>
                <li class="ui-state-default draggable" id="item-30">Item 5</li>
            </ul>
         </div>
    </div>

</div>


</body>
</html>

Basically above code will form few boxes with items(which are actually questions) in it. There is one box on the right side with heading "Question Bank". From the "Question Bank" we can drag the questions to other boxes but can't do the reverse(this is also working). Also we can sort the questions within the box or drag the questions from one box to another. Box heading are the categories and items are questions associated to that categories. What i need is : Event that updates the database when we drag the questions from "Question Bank" to any box on the left side. Please note Questions in the "Question Bank" are pre created coming from database. Event that updates the database when we sort the questions within the box. Event that updates the database when we drag the question from one box to another box. it should also do the sorting for that two boxes. Event that updates the database when we sort the boxes. Here is the JS Fiddle link jsfiddle.net/6o30rrzx Question Bank is comming on the bottom of the page instead of on the right side any advice and suggestions will be greatly appreciated Thank you for reading this post.

Moved: Calling Info From Mysql Based On A Drag And Dropped Location

Similar Tutorials

View Content

This topic has been moved to Ajax Help.

http://www.phpfreaks.com/forums/index.php?topic=352302.0

Drop Down Box From Mysql

Similar Tutorials

View Content

hey guys just a quick one

i want a drop down box which is populated from a mysql query which is eay enough but also at the same time i also want the dropdown box to look at the current record and have the value in the drop down box

e.g.

the drop down has values 1, 2, 3, 4, 5 in it which are pulled from a table called values

the current record is from a table called staff and it has an id of 45 and a user level of 3

i want the drop down to have all the values selectable to update the record but on load it will have 3 as the current, i want to be able to chage this 3 to a 5 and update the record

how can i do this.? just a brief code example would be awsome and ill adopt it to fit

Php/mysql Drop Down Error

Similar Tutorials

View Content

Hey all -

I (think) that I'm following the code exactly, but no luck... Essentially I want to populate a drop down menu from text stored in mysql (varchar).

Here is my code (and where I'm pulling the code found below). Any ideas what's going wrong. (My error: Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in....).

$sql = "SELECT * FROM table";
$results = mysql_query($sql); //or die("Query failed with error: ".mysql_error()); // execute the query
$options="";

while ($row=mysql_fetch_array($results)){
$id=$row["id"];
$thing=$row["thing"];
$options.="<OPTION VALUE=\"$id\">".$thing;
}

<select name="id" style="font-size:20px;font-family:Arial;width:275px">
<option value=0>Choose<? echo $options?></option>
</select>

Here is where I'm getting my code sample: http://forums.devarticles.com/mysql-development-50/drop-down-menu-populated-from-a-mysql-database-1811.html

Thank for any advice!!

Php/mysql/drop Down Menus

Similar Tutorials

View Content

I got some help here about 6 months ago with drop down menus & I need a little more.
I'm working on a form that has about 20 drop down menus, each populated from a mysql database table with about 50 entries each.
I need to keep the selected menu option on the form after the form is submitted but each time the form is submitted the selected menu option reverts back to the first item in the database table. Is there any practical way to fix this problem other than using javascript to finish up?

Drop Down And Insert Into Mysql

Similar Tutorials

View Content

I'm a newbie on php. I'm really a system administrator and I was just task to do this simple task. For me its hard but I'm sure for a programmer this is very simple. My agenda is to pull out data on one of my column in mysql, select it and dump it on mysql. Here is the php for retrieving mysql data

Code: [Select]
<?php
function database_connect($users)
{
    $resource_link = mysql_connect("localhost", "root", "root");
    if (mysql_select_db($users, $resource_link)) {
        return $resource_link;
    } else {
        echo "Cannot connect to DB";
        return false;
    }
}

function print_dropdown($query, $link){
    $queried = mysql_query($query, $link);
    $menu = '<select username="username">';
    while ($result = mysql_fetch_array($queried)) {
        $menu .= '
      <option value="' . $result['id'] . '">' . $result['username'] . '</option>';
    }
    $menu .= '</select>';
    return $menu;
}

//Some other form elements, or just start a form.
echo '<form method="post" action="create2.php">';

//The important bit
echo print_dropdown("SELECT username FROM mailbox;", database_connect("users"));

//Some other form elements, or just end the form.
echo '<input type="submit" name="submit" value="submit"/></form>';

Here is the content of my create2.php. This is the php page who do the insert on my mysql.

Code: [Select]
<?php
// open the connection
$conn = mysql_connect("localhost", "root", "root");
// pick the database to use
mysql_select_db("users",$conn);
// create the SQL statement
$sql2 = "INSERT INTO mailbox values ('','locked','','$_POST[username]','',NOW(),'','locked','')";
// for troubleshooting
$result = mysql_query($sql2, $conn) or die(mysql_error());
// execute the SQL statement
//if (mysql_query($sql2, $conn)) {
//    echo "Success";
//} else {
//   echo "Fail";
//}
}
?>

When I click the submit button, I don't see any record being inserted on my table. I'm using the create2.php on my other page though it is only an insert/fill up form not like this one that I need to pull up the date, select and insert to mysql.

Multiple Drop Down Lists Via Php Mysql

Similar Tutorials

View Content

Hello Friends!.... here is the big idea. I am trying to make a form in which there will be 2 drop down lists which will be populating directly from MySQL DB ....
Actually i am developing a student management system as my first PHP project... here i want to have 2 drop down lists first is roll number and second is student name. i want that when some one select the roll number in the first drop down the student name against it is automatically populated in the next drop down.

please help me friends i am new to php and dont know soo much.! any help PLZZZZZZZZZZ

Keep A Variable From A Mysql Generated Drop Down

Similar Tutorials

View Content

hey all
so I have this bit down:
Code: [Select]
$query="SELECT `2010 Region Code` AS codes FROM locations";

$results = mysql_query($query);

$options="";

$options = "<select location='codes'>";
while($nt=mysql_fetch_assoc($results))
{

$thing=$nt["codes"];

$options.="\r\n<option value ='{$nt['codes']}'>
{$nt['codes']}</option>";
}
$options .="\r\n</select>";
echo $options;

what I'm trying to do is grab the selection from the drop down and display it as a table (the sql query would be extended should we manage to figure this one out

I've tried
Code: [Select]
echo"<form name='LOCATIONS' action='".$_SERVER['PHP_SELF']."' target='iframe' method='post'>";
any ideas?

Mysql Query/drop Down Selected

Similar Tutorials

View Content

I've got a HTML drop down box as similar to this:

<select name="dropdown">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

If I run a mysql query and get a result of "Option 3", is there anyway using PHP to give Option 3 the selected value?

Delete A Mysql Row From A Drop-down Html Menu

Similar Tutorials

View Content

Hi all,

I am currently learning PHP and have the homework to produce a function that can delete a row in a MySQL database table by clicking on an item in a drop-down menu in a web page.

The code I have produced up until now is this:

<!DOCTYPE HTML>
<html lang="de">
<head>
	<meta charset="utf-8" />
	<title>E3_Artikel_Löschen</title>

</head>
<body>
<form method = "GET">

<?php
	$anr="";
	
	try {
	$pdo = new PDO ('mysql:dbname=bestelldatenbank;host=localhost;charset=utf8', 'root', '');
	} catch (PDOException $error){
		die ($error->getMessage());
		}		
?>

	<div>
		<p>
			<label for="artikel">Artikel: </label>
				<select id="artikel" name="artikel">
					<?php
						$sqlSelect = "SELECT anr, name FROM artikel ORDER BY anr ASC";
						foreach ($pdo->query($sqlSelect) as $row) {
							echo "<option value=$row[0]>$row[0] | $row[1]</option>\n";
							$anr = $row[0];

						}
					?>
				</select>
			
			<input type = "submit" value = "Delete row" />
			
		</p>
	</div>

<?php
	function artLoeschen($anr) {
		echo "Function called $anr";
		if(isset($_GET[$anr])) {
			$anr = $_GET[$anr];
			$sqlDelete = $pdo->query("DELETE FROM artikel WHERE anr = :anr");
			if ($stmt = $pdo->prepare($sqlDelete)) {
				$stmt->bindParam(':anr', $anr);
				$stmt->execute();
			}
			echo "<h2><b>Artikel gelöscht!</b></h2>";
		}
	}
?>

</form>
</body>
</html>

So, I have observed the following when I run the script in a browser:

1. The HTML works as expected and I get a drop-down list with the article number and description of each item in the affected table.

2. I can click on an item in the list and it populates the top item in the drop-down list.

3. When I click delete row, the selected item is not deleted.

4. There are no error messages returned but the function is not executed (at least not as I would like to expect).

I have obviously missed something or made a mistake in my code.

I would be very grateful for any help...this is driving me mad! :)

Regards,

Kevin

Update Mysql Using Result From Drop Down Box <select>

Similar Tutorials

View Content

I am trying to update a mysql table called AvItems with the value 'Torso' in the Equip "section?" I have been through the forums and cannot see anything to match.
I dont mind if the page looses the onsubmit() and has a button instead.
Though I would like to update the database and link back to the same page: There is a display that shows the item that is currently equiped, I have put this in to show it works, or doesn't as the case may be.
Hope I got the code /code right this time.

many thanks in advance

Andy Curtis

Code: [Select]
create table Items(
ItemID integer unsigned auto_increment primary key,
ItemName varchar(20) not null,
Type varchar(10),
UsedOn varchar(10),
);

create table AvItems(
AvItemID integer unsigned auto_increment primary key,
AvID integer unsigned,
ItemID integer unsigned,
Equip varchar(8));

<?php

$username="root";
$password="MyPassword";
$database="MyDataBase";
$AvName = "AndyJCurtis";

mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");

$AvAccR = mysql_query( " SELECT AvID FROM AvAcc WHERE AvName = '$AvName' " );
$AvID = mysql_result($AvAccR, 0, 'AvID');
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$Torso = mysql_query(" select ItemName from AvItems, Items where AvItems.itemID = Items.itemID AND AvItems.AvID = '$AvID' AND UsedON = 'Body' ");
$TorsoE = mysql_query(" select ItemName from AvItems, Items where AvItems.itemID = Items.itemID AND AvItems.AvID = '$AvID' And UsedON = 'Body' AND Equip = 'Body' ");
if(mysql_num_rows($TorsoE) != 0)
{
$TorsoItem = mysql_result($TorsoE ,0,"ItemName");
//mysql_close();
?>

<title></title>
<head></head>
<body>
<form action="http://localhost/CI/Equip2.php" method="post">

<table border=1>
<tbody>
<tr>
<td>Torso<BR>
<?PHP
echo "$TorsoItem <BR>";
?>
<select name="Torso" onchange="submit();" value =" Update">
<?PHP
while($TorsoRow = mysql_fetch_array($Torso))
{
echo "<option value=\"".$TorsoRow['ItemName']."\">".$TorsoRow['ItemName']."\n </option>";
}
?>
</select>
</td>
</tr>

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
<?php
if($_POST['Torso'] == 'Update')
{
mysql_query("update AvItems set Equip = '' where Equip='Torso'") or die("cant update unequip");
mysql_query("update AvItems set Equip = 'Torso' where ItemID='{$_POST['ItemName']}'") or die("cant update equip");
}
?>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

</tbody>
</table>
</.form>
</body>
</html>

Populating Drop Down Menu's With Mysql Data

Similar Tutorials

View Content

Alright so I created a MySQL database that has 5 tables each named a brand of a dirt bike.

In each table their are 2 fields, one INDEX_ID and MODELS.

Under that for rows I have every model bike named.

A quick question before I get onto what I want to do:

Can data be added underneath the rows?

For example, users will be able to submit information about each bike model. If each bike model is a row, can there be a category past that row or do I need to make each field a model name and just have a ton of fields and have the rows be the information users submit.

To make it easier to understand I'll post the SQL code for the brand Honda:

CREATE TABLE `Honda` (
`INDEX_ID` int(3) NOT NULL auto_increment,
`MODELS` varchar(20) collate latin1_general_ci NOT NULL,
PRIMARY KEY (`INDEX_ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=23 ;

--
-- Dumping data for table `Honda`
--

INSERT INTO `Honda` VALUES(1, 'CR85');
INSERT INTO `Honda` VALUES(2, 'CR125');
INSERT INTO `Honda` VALUES(3, 'CR250');
INSERT INTO `Honda` VALUES(4, 'CRF100');
INSERT INTO `Honda` VALUES(5, 'CRF150');
INSERT INTO `Honda` VALUES(6, 'CRF230');
INSERT INTO `Honda` VALUES(7, 'CRF250X');
INSERT INTO `Honda` VALUES(8, 'CRF250R');
INSERT INTO `Honda` VALUES(9, 'CRF450X');
INSERT INTO `Honda` VALUES(10, 'CRF450R');
INSERT INTO `Honda` VALUES(11, 'CRF50');
INSERT INTO `Honda` VALUES(12, 'CRF70');
INSERT INTO `Honda` VALUES(13, 'CRF80');
INSERT INTO `Honda` VALUES(14, 'XR650');
INSERT INTO `Honda` VALUES(15, 'CR500');
INSERT INTO `Honda` VALUES(16, 'XR100');
INSERT INTO `Honda` VALUES(17, 'XR200');
INSERT INTO `Honda` VALUES(18, 'XR250');
INSERT INTO `Honda` VALUES(19, 'XR400');
INSERT INTO `Honda` VALUES(20, 'XR50');
INSERT INTO `Honda` VALUES(21, 'XR70');
INSERT INTO `Honda` VALUES(22, 'XR80');

Anyway I still need to figure out how to have this under a form that a user can use to select the bike they want to submit information about. A code like this perhaps?:

<?
$connection = mysql_connect("localhost","user","pass");
$fields = mysql_list_fields("dbname", "table", $connection);
$columns = mysql_num_fields($fields);
echo "<form action=page_to_post_to.php method=POST><select name=Field>";
for ($i = 0; $i < $columns; $i++) {
echo "<option value=$i>";
echo mysql_field_name($fields, $i);
}
echo "</select></form>";
?>

Thanks.

Insert Date Into Mysql From Drop Down Menus

Similar Tutorials

View Content

I am trying to insert a date into a mySQL table from html drop downs with php. Right now when I enter the date it goes into the database as 0000-00-00. Can anybody see why it might be doing this?

My html:
Code: [Select]
<label for='birthdate' >Birthdate (Optional):</label><br/>
<select name='month' id='month' value='<?php echo $fgmembersite->SafeDisplay('month') ?>'>
<option value="01" selected="January">January</option>
<option value="02">February</option>
<option value="03">March</option>
etc...
</select>  
<select name='day' id='day' value='<?php echo $fgmembersite->SafeDisplay('day') ?>'>
<option value="01" selected="1">1</option>
<option value="02">2</option>
<option value="03">3</option>
etc...
</select>  
<select name='year' id='year' value='<?php echo $fgmembersite->SafeDisplay('year') ?>'>
<option value="2010" selected="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
etc...
</select>

And my php to collect info:
Code: [Select]
$formvars['birthdate'] = $this->Sanitize($_POST['year'], $_POST['month'], $_POST['day']);
php where I make table:
Code: [Select]
"birthdate DATE NOT NULL ,".

php to insert into mysql:
Code: [Select]
$insert_query = 'insert into '.$this->tablename.'(
name,
address,
birthdate,
sex,
program,
guide,
email,
username,
password,
confirmcode
)
values
(
"' . $this->SanitizeForSQL($formvars['name']) . '",
"' . $this->SanitizeForSQL($formvars['address']) . '",
"' . $this->SanitizeForSQL($formvars['birthdate']) . '",
"' . $this->SanitizeForSQL($formvars['sex']) . '",
"' . $this->SanitizeForSQL($formvars['program']) . '",
"' . $this->SanitizeForSQL($formvars['guide']) . '",
"' . $this->SanitizeForSQL($formvars['email']) . '",
"' . $this->SanitizeForSQL($formvars['username']) . '",
"' . md5($formvars['password']) . '",
"' . $confirmcode . '"
)';

Thank you!

<object> Drop Down Menu : Connect To Mysql

Similar Tutorials

View Content

your MySQL server version: 5.1.36

Code: [Select]
SELECT * FROM game_weapons

Table: Picture Attached

the EXPLAIN output for your query, if applicable:
I wish to connect a drop down menu's selection of weapons with the correlated table information.

What do I want to happen:
Click on a drop down Menu and have a list of weapons, these weapons are associated with a set number in the database and passed onto the next screen. (The larger number wins, this part I have figured out).

               <p>
               <select name="weapon2" style="font-size:20px;font-family:Arial;width:275px">
               <option value="power">Power</option>
               <option value="intelligence">Intelligence</option>
               <option value="speed">Speed</option>
               <option value="reserve">Reserve</option>
               </select>
               </p>

I do have the battle code figured out! (This should be the last step).

Retrieve Information From Mysql Through Drop Down List

Similar Tutorials

View Content

I have created a drop down list and it does retrieve information from mysql but now I want to use what is been selected to retrieve information.

How Do I do this?

<?php

MYSQL_CONNECT(localhost,'root','') OR DIE("Unable to connect to database");
@mysql_select_db(Examination) or die( "Unable to select database");

$query=("SELECT * FROM subject");

$result=mysql_query($query) or die ("Unable to Make the Query:" . mysql_error() );
echo "<select name=myselect>";

while($row=mysql_fetch_array($result)){

echo "<OPTION VALUE=".$row['Sub_ID'].">".$row['Sub_Name']."</OPTION>";
}

echo "</select>";

?>

Insert In Mysql Array Value From Drop Select Box Value - Cannot Pass The Var

Similar Tutorials

View Content

I am simply trying to insert a value generated from an array in a while loop, but it seems the value is not global and I can't pass it as I like. I did some research on this, but could not find an answer that solved my issue...

Here is my select box code which is working perfect:

<select name="city">
<?php
$sql = "SELECT id, city_name FROM cities ".
"ORDER BY city_name";
$results_set = (mysqli_query($cxn, $sql)) or die("Was not able to produce the result set!");
while($row = mysqli_fetch_array($results_set)) {
echo "<option value=$row[id]>$row[city_name]</option>";
}
?>
</select>

Are any variables defined in a while loop global to the while loop only?

Here is my SQL which you can see my $row[id] being passed thru field city_id... The value is being generated as supposed to based on value like: value="1", value="2" etc.. for the select options for each city name. So the values are there... But I CANNOT get that numerical id to pass to the database when submitting my form.

Any ideas for a workaround to get this value passing as normal?

if (isset($_POST['addPosting'])) {
$query = "INSERT INTO Postings (id, city_id, title, description) VALUES
('','$row[id]','$_POST[title]','$_POST[description]')";

Default In Drop Down List Chosen From Mysql Table

Similar Tutorials

View Content

I am working on a project that uses a drop down list to chose the category when inserting new data into the database. What I want to do now is make the drop down list default to the chosen category on the list records page and the update page. I have read several tutorials, but they all say that I have to list the options and then select the default. But since it is possible to add and remove categories, this approch won't work. I need the code to chose the correct category on the fly.

There are two tables, one that has the category ID and category name. The second table has the data and the catid which is referenced to the category id in the first table.

Code: [Select]
--
-- Table structure for table `categories`
--

DROP TABLE IF EXISTS `categories`;
CREATE TABLE IF NOT EXISTS `categories` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`categories` varchar(37) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=40 ;

-- --------------------------------------------------------

--
-- Table structure for table `links`
--

DROP TABLE IF EXISTS `links`;
CREATE TABLE IF NOT EXISTS `links` (
`id` int(4) NOT NULL AUTO_INCREMENT,
`catid` int(11) DEFAULT NULL,
`name` varchar(255) NOT NULL DEFAULT '',
`url` varchar(255) NOT NULL DEFAULT '',
`content` varchar(255) NOT NULL DEFAULT '',
PRIMARY KEY (`id`),
KEY `catid` (`catid`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=35 ;

Then is the list records file, I have

Code: [Select]
<?php
include ("db.php");
include ("menu.php");

$result = mysql_query("SELECT categories FROM categories") or die(mysql_error());
while ($row = mysql_fetch_array($result)) {
$categories=$row["categories"];
$options.= '<option value="'.$row['categories'].'">'.$row['categories'].'</option>';
};

$id = $_GET['id'];
$query="SELECT * FROM links ORDER BY catid ASC";
$result=mysql_query($query);

?>
<table width="65%" align="center" border="0" cellspacing="1" cellpadding="0">
<tr>
<td>
<table width="100%" border="1" cellspacing="0" cellpadding="3">
<tr>
<td colspan="7"><strong>List data from mysql </strong> </td>
</tr>

<tr>
<td align="center"><strong>Category ID</strong></td>
<td align="center"><strong>Category ID</strong></td>
<td align="center"><strong>Name</strong></td>
<td align="center"><strong>URL</strong></td>
<td align="center"><strong>Content</strong></td>
<td align="center"><strong>Update</strong></td>
<td align="center"><strong>Delete</strong></td>
</tr>
<?php
while($rows=mysql_fetch_array($result)){
?>
<tr>
<td>
<SELECT NAME=catid>
<OPTION>Categories</OPTION>
<?php echo $options; ?>
</SELECT>
</td>
<td><? echo $rows['catid']; ?></td>
<td><? echo $rows['name']; ?></td>
<td><a href="<? echo $rows['url']; ?>"><? echo $rows['url']; ?></a></td>
<td><? echo $rows['content']; ?></td>
<td align="center"><a href="update.php?id=<? echo $rows['id']; ?>">update</a></td>
<td align="center"><a href="delete.php?id=<? echo $rows['id']; ?>">delete</a></td>

</tr>
<?php
}
?>
</table>
</td>
</tr>
</table>
<?php
mysql_close();
?>

So, how do I get this code
Code: [Select]
$result = mysql_query("SELECT categories FROM categories") or die(mysql_error());
while ($row = mysql_fetch_array($result)) {
$categories=$row["categories"];
$options.= '<option value="'.$row['categories'].'">'.$row['categories'].'</option>';
};

<SELECT NAME=catid>
<OPTION>Categories</OPTION>
<?php echo $options; ?>
</SELECT>

to give me an output that will be

something like if catid exactly matches categories.id echo categories.categorie ???

so far everything I have done produces either a default category of the last category, the catid (which is a number), all of the categories (logical since catid will always be = id, or nothing. How do I get just the category name?

I will keep reading and try to figure this out, but any help would be greatly appreciated.

Thanks in advance