jQuery：从div元素获取值将它们附加到输入中以进行提交

Question

感谢您的阅读，我一直在寻找示例或教程，但我认为我没有正确的Google术语来查找有关此问题的教程。

我喜欢完成的事情； 我想知道如何将一个简单的购物车系统/脚本中的多个产品标题附加到要提交的输入值中。

下面是我的HTML表单元素中的HTML标记，周围还有其他一些输入和文本字段，例如电话，电子邮件和类似的内容，但是这些字段已经可以正常使用了。 我需要找出的是如何在div元素中获取这些产品名称，并将其附加到底部隐藏的输入标签的空值标签内，以便使用电子邮件脚本提交它们？

<div class="simpleCart_items">
  <ul>
    <li class="itemRow row-0 odd" id="cartItem_dv-7">
      <div class="item-name">Product name 1</div>
    </li>
    <li class="itemRow row-1 even" id="cartItem_dv-3">
      <div class="item-name">Product name 2</div>
    </li>
    <li class="itemRow row-2 odd" id="cartItem_dv-11">
      <div class="item-name">Product name 3</div>
    </li>
  </ul>
</div>


<div class="hide">
  <input class="hide" type="hidden" name="multi_products" value="** product names here **">
</div>

Edit添加了此内容，将代码包装为.submit函数/事件形式。 但这是行不通的。

$( "form" ).submit(function( event ) {

    var itemArray = $(".item-name").map(function() { return $(this).text() }).get(),

    commaSeparatedItems = itemArray.join(",");

    $('input[name=multi_products]').val(commaSeparatedItems)

});

Answer 1

您可以获得很好的项目数组，然后将它们加入逗号中：

var itemArray = $(".item-name").map(function() { return $(this).text() }).get(),
//["Product name 1", "Product name 2", "Product name 3"];
    commaSeparatedItems = itemArray.join(",");
//"Product name 1,Product name 2,Product name 3"