Creating Multiple Select Option Box in Paypal Shop

Question

Is it possible to submit items to a paypal shopping cart using a multiple select box? I currently have a javascript in place that loops through the options, appends them to my form, and then submits the form. However only the last item is being submitted.

Here is the code:

function getValues() {
var os0 = document.getElementById("os0");
var options = os0 && os0.options;
var price = 0;
for (i=0; i < options.length; i++) {
  if(options[i].selected) {
    switch(i) {
      case 2:
      case 4:
      case 7:
      case 8:
        price = "30.00";
        break;
      case 0:
      case 1:
      case 3:
      case 5:
      case 6:
        price ="25.00";
        break;
      default:
        price ="25.00";
        break;  
    }

    $("#singleDungeon").append('<input type="hidden" name="option_select'+i+'" value="'+options[i].value+'"/>');
    $("#singleDungeon").append('<input type="hidden" name="option_amount'+i+'" value="'+price+'"/>');
  }
}
document.getElementById('singleDungeon').submit(); 
return true;
}
</script>

Any insight is appreciated.

Thanks!

Answer 1

Got it working. The shopping cart system will ignore items if not used with correct increments and syntax. So, changed the code to item_name_# and amount_#. Also, added a count value instead of using the index value. So it will be amount_1, amount_2, instead of amount_6, etc.

                      <div class="pt1">
                    <h2>Single Dungeons</h2>
                    <div class="price3">
                      <h1>$25 - $30</h1>
                      <p>&nbsp;</p>
                    </div>
                    <!--price-->
                      <div class="content">
                        <p>Bring any class!</p>
                      </div>
                      <div class="content">
                        <p>You play your character!</p>
                      </div>
                        <div class="content">
                        <input type="hidden" name="on0" value="Single Dungeon"/>
                        <select multiple="multiple" name="os0" id="os0">
                          <option value="Gate of the Setting Sun">Gate of the Setting Sun - $25</option>
                          <option value="Shado'pan Monastery">Shado'pan Monastery - $25</option>
                          <option value="Stormstout Brewery">Stormstout Brewery - $30</option>
                          <option value="Temple of the Jade Serpent">Temple of the Jade Serpent - $25</option>
                          <option value="Mogu'Shan Palace">Mogu'Shan Palace - $30</option>
                          <option value="Scholomance">Scholomance - $25</option>
                          <option value="Scarlet Halls">Scarlet Halls - $25</option>
                          <option value="Scarlet Monastery">Scarlet Monastery - $30</option>
                          <option value="Siege of Niuzao Temple">Siege of Niuzao Temple - $30</option>
                        </select>
                      </div>
                      <!--content-->
                      <form action='https://www.paypal.com/cgi-bin/webscr' method='post' target="paypal" id="singleDungeon" >
                        <input type="hidden" name="cmd" value="_cart">
                        <input type="hidden" name="upload" value="1">
                        <input type='hidden' name="business" value="[e-mail]">
                        <input type='hidden' name="currency_code" value="USD">
                        <input type="hidden" name="return" value="http://www.project-carry.com"/>
                        <input type="hidden" name="cancel_return" value="http://www.project-carry.com"/>
                        <input type="hidden" name="shopping_url" value="http://www.project-carry.com/buy-now.html">
                        </form>
                        <a href="#" onclick="getValues(); return false">Buy Now</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>            
function getValues() {
var os0 = document.getElementById("os0");
var options = os0 && os0.options;
var price = 0;
var count = 1;
for (i=0; i < options.length; i++) {
  if(options[i].selected) {
    switch(i) {
      case 2:
      case 4:
      case 7:
      case 8:
        price = "30.00";
        break;
      case 0:
      case 1:
      case 3:
      case 5:
      case 6:
        price ="25.00";
        break;
      default:
        price ="25.00";
        break;  
    }

    $("#singleDungeon").append('<input type="hidden" name="item_name_'+count+'" value="'+options[i].value+'" />');
    $("#singleDungeon").append('<input type="hidden" name="amount_'+count+'" value="'+price+'" />');
    count++;
  }
}
document.getElementById('singleDungeon').submit(); 
return true;
}
</script>