php - 将多个动态文本框放入 JavaScript 数组中

Question

以下代码仅将一个文本框存储到数组中。我想要一个多维数组来动态存储多个动态文本框。

该代码当前要求用户提供 4 个输入，我使用 % 将其连接成一个字符串并将其发布到 php 页面。

我希望它获取所有 4 个输入并将它们存储在一个数组中，每个动态添加的文本框存储如下:

name[0][0] = dmenuvalue;  
name[0][1] = $name.val();  
name[0][2] = $origprice.val();  
name[0][3] = $specprice.val();

那么当用户添加另一个时，它将是

name[1]0] = dmenuvalue, etc,etc

工作代码:

$(function(){
   var $name = $("#name");
   var $origprice = $("#origprice");
   var $specprice = $("#specprice");
   var $add = $("#add");
   var $list = $("#list");
   var ctr = 0;
   $add.click(function() {
    ctr++;
    var elem = document.createElement("div");
    var hidden = document.createElement("input");
    var close = document.createElement("a");
    var dmenu = document.getElementById("days");
    var dmenuvalue = dmenu.options[dmenu.selectedIndex].text;
    var regex  = /^\d+(?:\.\d{0,2})$/;
    if(dmenuvalue != "temp" && $name.val().indexOf("%") == -1 &&  ($origprice.val().indexOf("%") == -1 && regex.test($origprice.val())) && ($specprice.val().indexOf("%") == -1 && regex.test($specprice.val())))
    {
        var name = dmenuvalue +"%"+ $name.val() + "%" + $origprice.val()  + "%" + $specprice.val();
        //var name[0][0] = dmenuvalue;
        //var name[0][1] = $name.val();
        //var name[0][2] = $origprice.val();
        //var name[0][3] = $specprice.val();
        //for(i=0;i<5;i++){
               $(hidden).attr({
               'type': 'hidden',
               'name': 'name[]',
               'value': name
               });
          // }
           $(close).attr({
           'href': '#'
           }).html("X").click(function() {
           $(elem).remove();
           ctr--;
           return false;
           });
           $(elem).html(name).append(hidden)
           .append(close);
           $list.append(elem);
        document.getElementById("dailydeals").innerHTML = '';
           return false;
    } else {
        document.getElementById("dailydeals").innerHTML = '*Please complete all required fields above.';
        return false;
    }
   });
});

有人可以帮我将代码修改为多维吗？

Answer 1

为了制作多维数组，只需在点击事件之外创建一个普通数组:

var dailyDeals = [];

然后(在单击事件内)创建另一个数组和 push将其放入父数组中:

var dailyDeal = [
    dmenuvalue,
    $name.val(),
    $origprice.val(),
    $specprice.val()
];
dailyDeals.push(dailyDeal);

但我不认为你真的需要这个嵌套数组(至少从我从你的代码中理解)，因为你需要的只是内部数组来创建隐藏的输入:

for (i = 0; i < 4; i++) {
    $('<input type="hidden">').attr({
        'name': 'name[' + ctr + '][' + i + ']',
        'value': dailyDeal[i]
    }).appendTo(elem);
}

我的建议:

1. 移动 ctr++; if 内的行这使得验证。如果您希望控件从 0 而不是 1 开始，请将其放在其他所有内容的下方。

2. 不要这样做ctr--在 X 按钮的点击处理程序中。因为如果用户删除最后一行以外的任何其他行，然后用户添加另一行，就会遇到问题。我会让数组留有空洞，然后在服务器端处理它。

3. 删除 name="days"来自 <select> 的属性标签。否则将提交。

JSFiddle 查看完整源代码并测试提交的值:

http://jsfiddle.net/protron/xGhnv/4/