0

下の画像を参照してください。「製品を追加」をクリックして必要な数の製品を追加すると、2 つの新しい要素 (カテゴリとアイテムのドロップダウン) が表示されます。これは、jQuery を介して行われ、前のものをコピー<li>して新しいものを挿入します。

要素が作成されるとき、動的フィールドの名前は何ですか? データは $_POST に追加され、データベースに挿入できます。

ここに画像の説明を入力

以下の HTML、動的フィールド名を参照 (例: name="items_2"、name="items_2"): フィールドの隠し入力も追加しましたcurrent_added_products。これは、現在追加されている製品の数を教えてくれます。これが必要かどうかわかりませんか？

<ul>
    <li>
        <label>Category</label>
        <select name="category_1"> 
            <option>CPU</option>
            <option>HDD</option>
        </select>
        <select name="items_1"> 
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
        </select>
    </li>
    <li>
        <label>Category</label>
        <select name="category_2"> 
            <option>CPU</option>
            <option>HDD</option>
        </select>
        <select name="items_2"> 
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
        </select>
    </li>
    <li>
        <label></label>
        <input type="hidden" name="current_added_products" value="2" />
        <input type="button" class="add_more_product" value ="Add More Product" />
    </li>
</ul>

また、要素が作成される前に、次の数字を追加する方法を教えてください。

4

5 に答える 5

2

これを試して：

$('.add_more_product').click(function() {
    var $ul = $('ul:last');
    $ul.clone().find('select').attr('name', function(i, cur) {
        return cur.match(/\D+/g).join('') + (Number(cur.match(/\d+/g).join('')) + 1)
    }).end().insertAfter($ul)
})​

http://jsfiddle.net/L7zwn/

$('.add_more_product').click(function(e) {
    e.preventDefault();
    var $ul = $('ul:last');
    $ul.clone().insertAfter($ul)
})

http://jsfiddle.net/U7Zeb/

于 2012-10-03T10:09:37.230 に答える
1

nameそれらにすべてとcategory[]を与えることができ、items[]それらが投稿されると、数値でインデックス付けされた配列になります。このようにして、新しく作成された各要素に番号を追加することを心配する必要はありません。たとえば、CPUwithItem 1とHDDwithItem 2を選択すると、次のように投稿されます。-

array
  'category' => 
    array
      0 => string 'CPU' (length=3)
      1 => string 'HDD' (length=3)
  'items' => 
    array
      0 => string 'Item 1' (length=6)
      1 => string 'Item 2' (length=6)

これにより、新しいフォーム要素を簡単に追加できるようになります。-

html

<ul>
    <li>
        <label>Category</label>
        <select name="category[]">
            <option>CPU</option>
            <option>HDD</option>
        </select>
        <select name="items[]">
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
        </select>
    </li>
</ul>

<input type="button" class="add_more_product" value ="Add More Product" />

jquery

$(document).ready(function() {
    $('.add_more_product').on('click', function() {
        $('li:last').clone().appendTo('ul');
    });
});

これがフィドルです

于 2012-10-03T10:12:12.983 に答える
0

次のコードを使用して、コピーから取得したhtmlを置き換えることができます

htmlCopy.replace(/category_[0-9]+/, function(a){
       return "category_"+ (current_added_products+1);
});
htmlCopy.replace(/items_[0-9]+/, function(a){
       return "items_"+ (current_added_products+1);
});
于 2012-10-03T10:17:30.770 に答える
0

name="item[1]"、を使用できますname="item[2]"。これにより、 に配列が作成されます$_POST['item']。

于 2012-10-03T09:57:11.113 に答える
-1

name上記の回答で説明されているようにarayを使用してください。データベースに追加するには、次のようなコードを使用します。

if (!$con){
   die('Could not connect: ' . mysql_error());
}

mysql_select_db($database, $con);

$authors = $_POST['Author'];
foreach($authors as $author) :
$sql="INSERT INTO savetest (type, number) VALUES ('{$_POST['type']}','{$author}')";

if (!mysql_query($sql,$con)){
   die('Error: ' . mysql_error());
}
endforeach;

もっとこの投稿はあなたを助けることができます。

于 2012-10-03T10:18:27.793 に答える