Question

I am having trouble sending data to the database. The values are being sent, but they are all going into the first drop zone field. And I need each dropzone value to go into the correct field in the database.

I’ve tried putting in different listeners & if statements in the javascript but it won’t work for me.

the html:

<ul id="images">
<li><a id="img1" draggable="true"><img src="images/1.jpg"></a></li>
<li><a id="img2" draggable="true"><img src="images/2.jpg"></a></li>
<li><a id="img3" draggable="true"><img src="images/3.jpg"></a></li>
</ul>

//dropzones


<div class="drop_zones">
<div class="drop_zone" id="drop_zone1" droppable="true">
</div>

<div class="drop_zone" id="drop_zone2"  droppable="true">
</div>

<div class="drop_zone" id="drop_zone3" droppable="true">
</div>
</div>

   <button id = "post" onClick="postdb();">Post info</button>

the javascript:

var addEvent = (function () {
    if (document.addEventListener) {
        return function (el, type, fn) {
            if (el && el.nodeName || el === window) {
                el.addEventListener(type, fn, false);
            } else if (el && el.length) {
                for (var i = 0; i < el.length; i++) {
                    addEvent(el[i], type, fn);
                }
            }
        };
    } else {
        return function (el, type, fn) {
            if (el && el.nodeName || el === window) {
                el.attachEvent('on' + type, function () {
                    return fn.call(el, window.event);
                });
            } else if (el && el.length) {
                for (var i = 0; i < el.length; i++) {
                    addEvent(el[i], type, fn);
                }
            }
        };
    }
})();

var dragItems;
updateDataTransfer();
var dropAreas = document.querySelectorAll('[droppable=true]');

function cancel(e) {
    if (e.preventDefault) {
        e.preventDefault();
    }
    return false;
}

function updateDataTransfer() {
    dragItems = document.querySelectorAll('[draggable=true]');
    for (var i = 0; i < dragItems.length; i++) {
        addEvent(dragItems[i], 'dragstart', function (event) {
            event.dataTransfer.setData('obj_id', this.id);
            return false;
        });
    }
}

addEvent(dropAreas, 'dragover', function (event) {
    if (event.preventDefault)
        event.preventDefault();

    this.style.borderColor = "#000";
    return false;
});

addEvent(dropAreas, 'dragleave', function (event) {
    if (event.preventDefault)
        event.preventDefault();

    this.style.borderColor = "#ccc";
    return false;
});

addEvent(dropAreas, 'dragenter', cancel);

// drop event handler
addEvent(dropAreas, 'drop', function (event) {
    if (event.preventDefault)
        event.preventDefault();

    // get dropped object
    var iObj = event.dataTransfer.getData('obj_id');
    var oldObj = document.getElementById(iObj);

    // get its image src
    var oldSrc = oldObj.childNodes[0].src;
    oldObj.className += 'hidden';

    var oldThis = this;

    setTimeout(function () {
        oldObj.parentNode.removeChild(oldObj); // remove object from DOM

        // add similar object in another place
        oldThis.innerHTML += '<a id="' + iObj + '" draggable="true"><img src="' + oldSrc + '" />      </a>';

        // and update event handlers
        updateDataTransfer();


function postdb(){

if (document.querySelectorAll('[droppable=true]')){


     var dropDetails = oldThis.id + '=' + iObj;


     $.post("a-2.php", dropDetails);
   }


        oldThis.style.borderColor = "#ccc";
    }, 500);

    return false;
});

and my php:

 $sql="INSERT INTO table_answers (drop_zone1, drop_zone2, drop_zone3) VALUES         ('$_POST[drop_zone1]','$_POST[drop_zone2]','$_POST[drop_zone3]')";

Any idea please?

Answer 1

var u = $('drop_zone1'); 
if(u){ 
  $.post("post.php", y); 
}; 

(I’m assuming this is jQuery.)

1. Add the # to the beginning of the selector: $('#drop_zone1');.

2. The jQuery resultset always evaluates to a truthy value. It’s not clear to me what condition you’re trying to validate here…

3. In the PHP code, you’re creating the query in $sql2 in the first if, as opposed to $sql in the other two.

---

Edit – now that we know what you’re trying to do in setTimeout, this simplified function should work:

setTimeout(function() {
    oldObj.parentNode.removeChild(oldObj); // remove object from DOM

    // add similar object in another place
    oldThis.innerHTML += '<a id="' + iObj + '" draggable="true"><img src="' + oldSrc + '" />      </a>';

    // and update event handlers
    updateDataTransfer();
/*
    this part has been removed, see edit below
    var dropDetails = oldThis.id + '=' + iObj;
    // now dropDetails should look something like "drop_zone1=img1"

    $.post("post.php", dropDetails);
*/
    oldThis.style.borderColor = "#ccc";
}, 500);

---

One more edit, to submit all the dropped elements at once:

function postdb() {
  var postDetails = {};
  var dropZones = document.querySelectorAll('[droppable=true]');
  var allZonesDropped = true;
  for(var ix = 0; ix < dropZones.length; ++ix) {
    var zone = dropZones[ix];
    var dropped = zone.querySelector('[draggable=true]');
    if(dropped) {
      var dropTag = dropped.id;
      postDetails[zone.id] = dropTag;
    } else {
      allZonesDropped = false;
    }
  }
  if(allZonesDropped) {
    $.post("a-2.php", dropDetails);
  } else {
    alert('Not all targets have elements in them');
  }
  return false;
});

Just be careful where you place this function – your edited question has it in the middle of the setTimeout call, where it’s definitely not going to work.

---

Regarding your PHP code: You should really learn about PDO or MySQLi and use prepared statements instead of blindly inserting user input into the query. If you care to learn, here is a quite good PDO-related tutorial.