javascript - 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>

编辑添加了此内容，将代码包装到表单 .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"