獲取並傳遞來自Javascript的數組值

背景信息位 - 我們使用的系統的開發人員已離開公司，並且我被要求添加一些新功能。不用說，沒有文檔，更糟糕的是我是一個絕對的新手，所以我必須學習，因爲我一直在前進。我有點努力做大部分事情，但總是陷入這個問題。對於任何有足夠的幫助我的人來說，如果你真的能夠愚蠢地回答那些很好的答案。所以，問題........獲取並傳遞來自Javascript的數組值

動態填充項目列表的HTML頁面。對於列表中的每個項目都有一個複選框，對於每個勾選的複選框，我需要更新一個MySQL數據庫。這增加了複選框的頁面的代碼是

echo("<td class=\"tableRight\" style=\"width: 5%\"><input type=\"checkbox\" name=\"costume[]\" value=\"".$costume['id']."\" id=\"costume_".$costume['id']."\" onclick=\"tickrow(".$costume['id'].");\" /></td>");

JavaScript文件是在頁面頭部裝有

<script src=\"costume-list.js\" type=\"text/javascript\"></script>

按鈕的代碼應該踢關閉數據庫更新

echo("<div class=\"navContainer\" onClick=\"batch_move() \" class=\"navItem\">"); 
echo("<img src=\"/resource/img/icon/move.png\" border=\"0\" /><br />Batch Move Costumes"); 
echo("</a></div>");

最後，我設法放在一起的JavaScript是

function batch_move() { 

var combo = document.getElementById("cbo_title"); 
var move_to = combo.options[combo.selectedIndex].text; 
var move_to_id = combo.options[combo.selectedIndex].value; 

if (move_to.length==0) { 
alert("Please select the location you want to move the costumes to."); 
return; 
} 

var resp_move = confirm("Are you sure you want to MOVE the selected costumes to "+move_to+" ?"); 

if (resp_move==true) { 
    alert("Lets move em"); 
    window.open ("http://path-to-server/costume/batch-move-costume.php? loc="+move_to_id+"&items="+INeedTheArrayHere,"mywindow","menubar=1,resizable=1,width=350,height=250"); 
}

}

所以我想要做的是首先要確保至少有一個複選框被選中並且如果是則得到的勾選框的值到一個數組傳遞給被叫PHP形式。我可以在打開的表單中管理更新代碼，只需將數組添加到它。

對不起，對於很長的文章，但希望這是足夠的信息。如果還有什麼需要了解的，請提問，我會提供更多詳細信息。非常感謝

來源

2014-10-10 Alan_G

你可以請加你的HTML也 – Hitesh 2014-12-05 09:07:31

首先，您有我最深切的同情。它完全吸收像這樣的混亂傾倒在你身上。這應有助於：

var valString = ""; 
var list = document.querySelectorAll('input[type ="checkbox"]'); 
for(var node in list) { 
    if(list[node].checked) { 
     valString += list[node].name + ','; 
     //you will need to add a name property when you create the html 
     //<input type='checkbox' name='dress'>Dress 
    } 
}

這將創建一個逗號分隔的所有選中的複選框值，您可以發送到服務器的字符串。你可以將它分成服務器端的一個數組。您將無法將數組放入網址的GET部分，就像上面有'IneedArrayHere'部分，因此是字符串。另外，如果選擇過多（URL有長度限制），您將需要從GET切換到POST，這是另一個問題。

P.S.我強烈建議你把所有逃脫的雙引號加上單引號。這類事情是由習慣於像SQL品種的人完成的，其中單引號和雙引號之間的差異是顯着的，但在javascript和大多數（所有？）服務器端語言（如php）中，差異是不相關的。

來源

2014-10-10 11:24:59

'value'會返回一個空字符串，除非你指定標籤上的「值」屬性（或JS表示物）。這是'HTML'重載輸入標籤來代表文本框（有一個值）和複選框/單選按鈕（技術上不這樣做）的結果。複選框前面的文本只是文本（不是輸入元素本身的屬性），並且不一定有很好的方法來獲取它，它更容易將屬性放在標記上並檢索它。 – 2014-10-10 11:32:04

<script> 
function myFunction() 
{ 
    var collection =document.getElementById("boxes").getElementsByTagName('INPUT'); 
    var res =[]; 
    for (var x=0; x < collection.length; x++) { 
     if (collection[x].type.toUpperCase()=='CHECKBOX') 
      var b = [collection[x].name ,collection[x].checked ] ; 
      res[res.length] = b; 
    } 
    alert(JSON.stringify(res)); 
} 
</script> 
<html> 
<div id="boxes"> 
<input type="checkbox" name="1" value="1">eded</input> 
<input type="checkbox" name="2" value="2">eded</input> 
</div> 

<input type="button" onclick="myFunction()" value="ok"> 
<html>

現在您可以簡單地將JSON發送到服務器。

來源

2014-10-10 11:53:48

非常感謝您的回答。我已將您的代碼插入到JavaScript中，並勾選了表單上的一些複選框。當代碼運行時，我得到第一個提示消息，但不是消息框的值爲valString？。

這顯然事情我做錯了 - 我說我一個完整的新手，並努力去抓住這個系統我似乎繼承了

當前的代碼如下所示（不通過選擇！）這一點，任何指向我的最新的錯誤，將不勝感激

function batch_move() { 

var combo = document.getElementById("cbo_title"); 
var move_to = combo.options[combo.selectedIndex].text; 
var move_to_id = combo.options[combo.selectedIndex].value; 

if (move_to.length==0) { 
alert("Please select the location you want to move the costumes to."); 
return; 
} 

var resp_move = confirm("Are you sure you want to MOVE the selected costumes to "+move_to+" ?"); 

var valString = ""; 
var list = document.querySelectorAll('input[type ="checkbox"]'); 
for(var node in list) { 
if(list[node].checked) { 
valString += list[node].name + ','; 
} 
} 

alert(valString); 

if (resp_move==true) { 
alert("Lets move em"); 
window.open ("http://path-to-server/costume/batch-move-costume.php?loc="+move_to_id+"&items=2,3,4,5","mywindow","menubar=1,resizable=1,width=350,height=250"); 
} 

}

來源

2014-10-10 13:42:44

你知道jQuery嗎？使用jQuery會更容易 – Hitesh 2014-12-05 09:07:04

獲取並傳遞來自Javascript的數組值

回答

相關問題