Add simpleCart Items to Form as Input Values

Question

I need to add the items from simpleCart to a form. I can't find any built-in functions that will do this so I'm trying to create my own script.

On the checkout page simpleCart adds the items like this:

<div class="simpleCart_items">
  <table>
    <thead>
      <tr class="headerRow">
        <th class="item-name">Name</th>
        <th class="item-price">Price</th>
        <th class="item-size">Size</th>
        <th class="item-color">Color</th>
        <th class="item-decrement"></th>
        <th class="item-quantity">Qty</th>
        <th class="item-increment"></th>
        <th class="item-total">SubTotal</th>
        <th class="item-remove"></th>
      </tr>
    </thead>
    <tbody>
      <tr class="itemRow row-0 odd" id="cartItem_SCI-1">
        <td class="item-name">Deer Shirt</td>
        <td class="item-price">฿400.00</td>
        <td class="item-size">Small</td>
        <td class="item-color">Blue</td>
        <td class="item-decrement"><a href="javascript:;" class="simpleCart_decrement" rel="noreferrer" data-ss1492271303="1">-</a></td>
        <td class="item-quantity">2</td>
        <td class="item-increment"><a href="javascript:;" class="simpleCart_increment" rel="noreferrer" data-ss1492271303="1">+</a></td>
        <td class="item-total">฿800.00</td>
        <td class="item-remove"><a href="javascript:;" class="simpleCart_remove" rel="noreferrer" data-ss1492271303="1">Remove</a></td>
      </tr>
      <tr class="itemRow row-1 even" id="cartItem_SCI-2">
        <td class="item-name">Deer Shirt</td>
        <td class="item-price">฿400.00</td>
        <td class="item-size">Medium</td>
        <td class="item-color">Clay</td>
        <td class="item-decrement"><a href="javascript:;" class="simpleCart_decrement" rel="noreferrer" data-ss1492271303="1">-</a></td>
        <td class="item-quantity">1</td>
        <td class="item-increment"><a href="javascript:;" class="simpleCart_increment" rel="noreferrer" data-ss1492271303="1">+</a></td>
        <td class="item-total">฿400.00</td>
        <td class="item-remove"><a href="javascript:;" class="simpleCart_remove" rel="noreferrer" data-ss1492271303="1">Remove</a></td>
      </tr>
    </tbody>
  </table>
</div>

On that same checkout page I have a form where the customer adds their name, mailing address, etc. I'd like to add each item above as an input to the form like this:

<input type="hidden" name="Item 1" value="Deer Shirt">
...

It seemed using jQuery's .each would work, but it's not producing the desired result.

This is what I've got now:

simpleCart.ready(function() {

  $('.itemRow').each(function(){
    $('form').append('<input type="hidden" name="' + $('.itemRow').attr('id') + '" value="' + $('.item-name').text() + '">');
    $('form').append('<input type="hidden" name="' + $('.itemRow').attr('id') + '" value="' + $('.item-color').text() + '">');
  });

});

Expected output:

<input type="hidden" name="cartItem_SCI-1" value="Deer Shirt">
<input type="hidden" name="cartItem_SCI-1" value="Blue">
<input type="hidden" name="cartItem_SCI-2" value="Deer Shirt">
<input type="hidden" name="cartItem_SCI-2" value="Clay">

Actual output:

<input type="hidden" name="cartItem_SCI-1" value="NameDeer ShirtDeer Shirt">
<input type="hidden" name="cartItem_SCI-1" value="ColorBlueClay">
<input type="hidden" name="cartItem_SCI-1" value="NameDeer ShirtDeer Shirt">
<input type="hidden" name="cartItem_SCI-1" value="ColorBlueClay">

Maybe .each isn't the best way. Any ideas on how to get the expected output?

Answer 1

First error is here

$('.itemRow').each(function(){
    $('form').append('<input type="hidden" name="' + $(this).attr('id') + '" value="' + $(this).find('.item-name').text() + '">');
    $('form').append('<input type="hidden" name="' + $(this).attr('id') + '" value="' + $(this).find('.item-color').text() + '">');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="simpleCart_items">
  <table>
    <thead>
      <tr class="headerRow">
        <th class="item-name">Name</th>
        <th class="item-price">Price</th>
        <th class="item-size">Size</th>
        <th class="item-color">Color</th>
        <th class="item-decrement"></th>
        <th class="item-quantity">Qty</th>
        <th class="item-increment"></th>
        <th class="item-total">SubTotal</th>
        <th class="item-remove"></th>
      </tr>
    </thead>
    <tbody>
      <tr class="itemRow row-0 odd" id="cartItem_SCI-1">
        <td class="item-name">Deer Shirt</td>
        <td class="item-price">฿400.00</td>
        <td class="item-size">Small</td>
        <td class="item-color">Blue</td>
        <td class="item-decrement"><a href="javascript:;" class="simpleCart_decrement" rel="noreferrer" data-ss1492271303="1">-</a></td>
        <td class="item-quantity">2</td>
        <td class="item-increment"><a href="javascript:;" class="simpleCart_increment" rel="noreferrer" data-ss1492271303="1">+</a></td>
        <td class="item-total">฿800.00</td>
        <td class="item-remove"><a href="javascript:;" class="simpleCart_remove" rel="noreferrer" data-ss1492271303="1">Remove</a></td>
      </tr>
      <tr class="itemRow row-1 even" id="cartItem_SCI-2">
        <td class="item-name">Deer Shirt</td>
        <td class="item-price">฿400.00</td>
        <td class="item-size">Medium</td>
        <td class="item-color">Clay</td>
        <td class="item-decrement"><a href="javascript:;" class="simpleCart_decrement" rel="noreferrer" data-ss1492271303="1">-</a></td>
        <td class="item-quantity">1</td>
        <td class="item-increment"><a href="javascript:;" class="simpleCart_increment" rel="noreferrer" data-ss1492271303="1">+</a></td>
        <td class="item-total">฿400.00</td>
        <td class="item-remove"><a href="javascript:;" class="simpleCart_remove" rel="noreferrer" data-ss1492271303="1">Remove</a></td>
      </tr>
    </tbody>
  </table>
</div>
<form></form>

And as for me same hidden input name for color and name is error

Answer 2

Pavlo's answer above is correct per the way I asked the original question but due to xDreamCoding's comment I did some digging and found that simpleCart has it's own .each operator. In the end I'm able to get what I need with this:

  simpleCart.each(function( item , x ){
    $('form').append('<input type="hidden" name="' + item.get('id') + ' Name" value="' + item.get('name') + '">');
    $('form').append('<input type="hidden" name="' + item.get('id') + ' Color" value="' + item.get('color') + '">');
  });