Answers.Body: <p>You definitely don't need JS here.</p>
  
  <p>I'm  a bit pushed for time, so this won't be an epic answer, but e.g. with your select, you should not be using a hidden field for the qty.  </p>
  
  <p>The select itself just sets the quantity value - either <code>1</code> if the option is chosen or no value if the option is not chosen....it really is as simple as:</p>
  
  <pre><code>&lt;form&gt;
  
    {# primary item - use whatever input you like for qty, or just do it in a hidden... #}
    &lt;input type="hidden" name="items[9999][purchasableId" value="{{ mainproduct.purchasableId }}"&gt;
    &lt;input type="hidden" name="items[9999][qty]" value="1"&gt;
  
    {# accessories #}
    {% for accessory in accessories %}
      &lt;input type="hidden" name="items[loop.index][puchasableId]" value=="{{ accessory.purchasableId }}"
      &lt;select name="items[loop.index][qty]"&gt;
        &lt;option value="1"&gt;Yes Please&lt;/option&gt;
        &lt;option value="0"&gt;No Thanks&lt;/option&gt;
      &lt;/select&gt; 
    {% endfor %}
  
  &lt;/form&gt;
  </code></pre>
  
  <p>This will cause the following to be posted - 
  <code>items[0][purchasableId] = 45</code> </p>
  
  <p>and depending on the user choice, either </p>
  
  <p><code>items[0][qty] = 1</code> or <code>items[0][qty] = 0</code></p>
  
  <p>...and multiAdd will just ignore this if the <code>qty</code> = <code>0</code>.</p>
  
  <p>The key thing to understand is the value of the index is totally irrelevant as long as it is the same for the purchasableId and the qty - it just acts to join the data together - you could literally send:</p>
  
  <pre><code>items['TrumpIsInsane'][purchasableId] = 45
  items['TrumpIsInsane'][qty] = 1
  </code></pre>
  
  <p>...and it should still work.  So for the primary product I just use something like <code>9999</code> so that I am sure it won't conflict with any of the loop indexes (I'm not going to have 10000 accessories eh?) -> it's just a made up number.</p>
  
  <p>For completeness, radios would only be slightly different:</p>
  
  <pre><code>&lt;form&gt;
  
    {# primary item - use whatever input you like for qty, or just do it in a hidden... #}
    &lt;input type="hidden" name="items[9999][purchasableId" value="{{ mainproduct.purchasableId }}"&gt;
    &lt;input type="hidden" name="items[9999][qty]" value="1"&gt;
  
    {# accessories #}
    {% for accessory in accessories %}
      &lt;input type="hidden" name="items[loop.index][puchasableId]" value=="{{ accessory.purchasableId }}"
      &lt;input type="radio" name="items[loop.index][qty]" value="1" checked&gt; Yes Please&lt;br&gt;
      &lt;input type="radio" name="items[loop.index][qty]" value=""&gt; No Thanks&lt;br&gt;
    {% endfor %}
  &lt;/form&gt; 
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-10-14T02:59:59.687Z
Answers.LastActivityDate: 2016-10-14T05:23:36.977Z
Answers.LastEditDate: 2016-10-14T05:23:36.977Z
Answers.UserDisplayName: Jeremy Daalder
Body: <p>First off, I'd like to thank Jeremy for his help.</p>
  
  <p>I have a set of add-on products that go along with my primary product. The options are a radio group.</p>
  
  <p>I am using <a href="https://github.com/engram-design/MultiAdd" rel="nofollow">Multi-Add</a> to tie everything together - and it's all working great. I'm able to add the primary and optional products to the cart.</p>
  
  <p>Where I am hung up is, because I have a radio group - no matter which option I choose, I am always ending up with the <em>last</em> option being chosen. 
  Which makes perfect sense since that's the last radio in the group that gets picked up.</p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>...
  // items[1][qty] is a &lt;select&gt; input for the primary product
  ...
  
  {% for foo in products %}
      &lt;div class="radio"&gt;
          &lt;label&gt;
              &lt;input type="radio" name="items[2][qty]" value="1"&gt;
                 {{ foo.title }} &amp;ndash; {% if foo.defaultVariant.price == 0 %} Included with registration {% else %} {{ foo.defaultVariant.price|currency(cart.currency) }}{% endif %}
          &lt;/label&gt;
          &lt;input type="hidden" name="items[2][purchasableId]" value="{{ foo.defaultVariant.purchasableId }}"&gt;
      &lt;/div&gt;
  {% endfor %}
  </code></pre>
  
  <p>As you can see whatever the <em>last</em> radio input is, will be the value that is picked up by Craft regardless of what the user has actually chosen.</p>
  
  <p>So I thought since each radio is a product (with no variants), I could just use the loop index:</p>
  
  <pre><code>&lt;input type="hidden" name="items[{{ loop.index }}][purchasableId]" value="{{ foo.defaultVariant.purchasableId }}"&gt;
  </code></pre>
  
  <p>Which works, but the loop will start at <code>1</code> each time. I am hung up on how I can start the loop at a specific number. Or, perhaps there is a better way?</p>
  
  <p>If I were using checkboxes, I'd only have one option per product/input name.</p>
  
  <p>I have also tried using a <code>&lt;select&gt;</code> element, but I get hung up on how I can offer a "No thanks" option.</p>
  
  <pre><code>&lt;select name="items[2][purchasableId]" class="form-control required"&gt;
      &lt;option value=""&gt;Select&lt;/option&gt;
       {% for foo in products %}
           &lt;option value="{{ foo.defaultVariant.purchasableId }}"&gt;
           {{ foo.title }} &amp;ndash; {% if foo.defaultVariant.price == 0 %} Included with registration {% else %} {{ foo.defaultVariant.price|currency(cart.currency) }}{% endif %}
           &lt;/option&gt;
      {% endfor %}
  &lt;/select&gt;
  &lt;input type="hidden" name="items[2][qty]" value="1"&gt;
  </code></pre>
  
  <p>Which also works well, but if the user does not choose an option, because I am passing a value of <code>1</code> with the hidden input, I get an error that I am attempting to use an invalid purchasable ID. Which also makes perfect sense.</p>
  
  <p>I feel like I am so close, but just can't quite see clear enough to know what to do. Worst case I suppose I just listen for either a change/click event via javascript and update the qty value accordingly.</p>
  
  <p>Thank you for any suggestions!</p>
  
Tags: <plugin-development><plugin-craftcommerce>
Title: How can I start a loop at a specific number?
ThreadText: # How can I start a loop at a specific number?
  
  (Asked by: username_0 on 2016-10-13)
  
  First off, I'd like to thank username_1 for his help.
  
  I have a set of add-on products that go along with my primary product. The options are a radio group.
  
  I am using [Multi-Add](https://github.com/engram-design/MultiAdd) to tie everything together - and it's all working great. I'm able to add the primary and optional products to the cart.
  
  Where I am hung up is, because I have a radio group - no matter which option I choose, I am always ending up with the *last* option being chosen.
  Which makes perfect sense since that's the last radio in the group that gets picked up.
  
  Here is what I have so far:
  
  ```
  ...
  // items[1][qty] is a <select> input for the primary product
  ...
  
  {% for foo in products %}
      <div class="radio">
          <label>
              <input type="radio" name="items[2][qty]" value="1">
                 {{ foo.title }} &ndash; {% if foo.defaultVariant.price == 0 %} Included with registration {% else %} {{ foo.defaultVariant.price|currency(cart.currency) }}{% endif %}
          </label>
          <input type="hidden" name="items[2][purchasableId]" value="{{ foo.defaultVariant.purchasableId }}">
      </div>
  {% endfor %}
  
  ```
  
  As you can see whatever the *last* radio input is, will be the value that is picked up by Craft regardless of what the user has actually chosen.
  
  So I thought since each radio is a product (with no variants), I could just use the loop index:
  
  ```
  <input type="hidden" name="items[{{ loop.index }}][purchasableId]" value="{{ foo.defaultVariant.purchasableId }}">
  
  ```
  
  Which works, but the loop will start at `1` each time. I am hung up on how I can start the loop at a specific number. Or, perhaps there is a better way?
  
  If I were using checkboxes, I'd only have one option per product/input name.
  
  I have also tried using a `<select>` element, but I get hung up on how I can offer a "No thanks" option.
  
  ```
  <select name="items[2][purchasableId]" class="form-control required">
      <option value="">Select</option>
       {% for foo in products %}
           <option value="{{ foo.defaultVariant.purchasableId }}">
           {{ foo.title }} &ndash; {% if foo.defaultVariant.price == 0 %} Included with registration {% else %} {{ foo.defaultVariant.price|currency(cart.currency) }}{% endif %}
           </option>
      {% endfor %}
  </select>
  <input type="hidden" name="items[2][qty]" value="1">
  
  ```
  
  Which also works well, but if the user does not choose an option, because I am passing a value of `1` with the hidden input, I get an error that I am attempting to use an invalid purchasable ID. Which also makes perfect sense.
  
  I feel like I am so close, but just can't quite see clear enough to know what to do. Worst case I suppose I just listen for either a change/click event via javascript and update the qty value accordingly.
  
  Thank you for any suggestions!
  
  **Tags:** plugin-development, plugin-craftcommerce
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2016-10-14. Score: 1
  
  You definitely don't need JS here.
  
  I'm a bit pushed for time, so this won't be an epic answer, but e.g. with your select, you should not be using a hidden field for the qty.
  
  The select itself just sets the quantity value - either `1` if the option is chosen or no value if the option is not chosen....it really is as simple as:
  
  ```
  <form>
  
    {# primary item - use whatever input you like for qty, or just do it in a hidden... #}
    <input type="hidden" name="items[9999][purchasableId" value="{{ mainproduct.purchasableId }}">
    <input type="hidden" name="items[9999][qty]" value="1">
  
    {# accessories #}
    {% for accessory in accessories %}
      <input type="hidden" name="items[loop.index][puchasableId]" value=="{{ accessory.purchasableId }}"
      <select name="items[loop.index][qty]">
        <option value="1">Yes Please</option>
        <option value="0">No Thanks</option>
      </select> 
    {% endfor %}
  
  </form>
  
  ```
  
  This will cause the following to be posted -
  `items[0][purchasableId] = 45`
  
  and depending on the user choice, either
  
  `items[0][qty] = 1` or `items[0][qty] = 0`
  
  ...and multiAdd will just ignore this if the `qty` = `0`.
  
  The key thing to understand is the value of the index is totally irrelevant as long as it is the same for the purchasableId and the qty - it just acts to join the data together - you could literally send:
  
  ```
  items['TrumpIsInsane'][purchasableId] = 45
  items['TrumpIsInsane'][qty] = 1
  
  ```
  
  ...and it should still work. So for the primary product I just use something like `9999` so that I am sure it won't conflict with any of the loop indexes (I'm not going to have 10000 accessories eh?) -> it's just a made up number.
  
  For completeness, radios would only be slightly different:
  
  ```
  <form>
  
    {# primary item - use whatever input you like for qty, or just do it in a hidden... #}
    <input type="hidden" name="items[9999][purchasableId" value="{{ mainproduct.purchasableId }}">
    <input type="hidden" name="items[9999][qty]" value="1">
  
    {# accessories #}
    {% for accessory in accessories %}
      <input type="hidden" name="items[loop.index][puchasableId]" value=="{{ accessory.purchasableId }}"
      <input type="radio" name="items[loop.index][qty]" value="1" checked> Yes Please<br>
      <input type="radio" name="items[loop.index][qty]" value=""> No Thanks<br>
    {% endfor %}
  </form> 
  
  ```
  
  
  ---
  
  