Question

请参阅下图，我想通过点击“添加更多产品”添加许多产品，然后会出现2个新元素（类别和项目下拉列表）。这将通过jQuery完成，以复制先前的<li>并插入一个新的。{/ p>

创建元素时，动态字段的名称应该是什么？数据将被添加到$ _POST中，我可以插入到数据库中。

enter image description here

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

此外，在创建元素之前，如何获取下一个要添加的数字？

Answer 1

试试这个：

$('.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/

Answer 2

你可以给他们name category[]和items[]，然后当他们发布时，你最终会得到一个数字索引数组，这样你就不需要了担心为每个新创建的元素追加一个数字。例如，选择带有CPU的{{1}}和带有Item 1的{{1}}会导致以下内容发布： -

HDD

这将使添加新表单元素变得更加容易： -

<强> HTML

Item 2

<强> jquery的

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)

Here's a fiddle

Answer 3

您可以使用name="item[1]"，name="item[2]"。这将导致$_POST['item']中的数组。

Answer 4

您可以使用以下代码替换您从副本获得的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);
});

Answer 5

使用aray name，如上面的答案中所述。更多要在数据库中添加使用代码，

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;

更多this帖子可以帮助你..

动态字段名称 - 应该如何完成？

5 个答案: