CODEWITHSUNDEEP
javascriptjquery
Jack Ottermans
Jack Ottermans

Reputation: 139

jQuery: get values from div elements append them to input for submitting

Thanks for reading, I've been searching for examples or tutorials but I think I don't have the correct Google-terms to find tutorials about this matter.

What I like to accomplish; I would like to know how I can append multiple product titles from a simple cart system/script to an input value for submitting.

Below is the HTML markup inside my HTML form element, there are a few other input and text fields wrapped around them like phones, email and stuff like that but those fields already work correctly. What I need to find out is how do I get those products names within the div elements and append them inside the empty value tag of my hidden input tag at the bottom so I can submit them with my email script?

<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 added this, wrapped the code into an form .submit function/event. But this doesn't work.. 

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

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

    commaSeparatedItems = itemArray.join(",");

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

});

Upvotes: 0

Views: 749

Answers (1)

tymeJV
tymeJV

Reputation: 104775

You can get a nice array of the items, then join them on a comma:

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"

Upvotes: 1

Related Questions