2

次のコードは、1 つのテキスト ボックスのみを配列に格納します。その場で複数の動的テキストボックスを格納する多次元配列が必要です。

コードは現在、ユーザーに 4 つの入力を求めており、% を使用してそれを 1 つの文字列に連結し、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;
    }
   });
});

誰かがコードを多次元に変更するのを手伝ってくれませんか?

4

1 に答える 1

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コントロールを 1 ではなく 0 から開始する場合は、他のすべての下に配置します。

  2. ctr--X ボタンのクリック ハンドラ内で実行しないでください。ユーザーが最後の行以外の行を削除してから別の行を追加すると、問題が発生するためです。配列に空の穴を残してから、サーバー側で処理します。

  3. タグname="days"から属性を削除します。<select>それ以外の場合は提出されます。

JSFiddle を使用して完全なソースを確認し、送信された値をテストします。

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

于 2012-10-11T05:37:02.283 に答える