Javascript事件 - 將值發送到數據庫

Question

我無法將數據發送到數據庫。值正在發送，但他們都進入第一個拖放區域。我需要每個dropzone值進入數據庫中的正確字段。

我試着把不同的聽衆& if語句中的JavaScript，但它不會爲我工作。

的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> 

的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; 
}); 

和我的PHP：

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

任何想法嗎？

Answer 1

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

（我假設這是jQuery的。）

1. 添加#到選擇的開頭：$('#drop_zone1');。

2. jQuery結果集總是評估爲真值。這不是我清楚你要在這裏驗證什麼條件...

3. 在PHP代碼，你在第一if創造$sql2查詢，在另外兩個反對$sql。

---

編輯 - 現在我們知道你想在setTimeout的做什麼，這個簡化的功能應該工作：

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); 

---

還有一個編輯，提交所有立即投放元素：

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 c你放置這個功能是有意義的 - 你編輯的問題在setTimeout調用的中間，它絕對不會工作。

---

關於你的PHP代碼：您應該真的瞭解PDO或MySQLi和使用準備好的語句，而不是盲目地將用戶輸入到查詢。如果你在意學習，here is a quite good PDO-related tutorial。