如何在表单中捕获购物车的内容作为输入

时间:2013-03-10 17:52:52

标签: javascript jquery

如何将“shoppingCart”选项作为输入“formdesc”捕获?

示例:<ol id="shoppingCart" name="formdesc"></ol>不起作用。

HTML:

...
<select id="apparelType">
    <option selected="selected" value="na">Select</option>
    <option value="0">T-Shirt</option>
    <option value="1">Shorts</option>
    <option value="2">Hat</option>
    <option value="3">Bag</option>
</select>

<label for="numb">Total: <span>$</span></label> 
<input id="numb" type="number" name="formbal" value="0.00" /> 
<input id="pretaxTotal" type="hidden" value="0.00" />
<ol id="shoppingCart"></ol>
</form>

JS:

<script type="text/javascript">

    $('#apparelType').change(function(){
        var apparelType = $('#apparelType');
        var fmapVal = apparelType.val();

        if (fmapVal == 'na') {
          alert('Please select an apparel type.');
        } else {
          var appVal = [ 15, 20, 25, 30 ];
          var description = apparelType.find('option:selected').text();
          var cost = appVal[fmapVal];

          var pretaxTotal = parseInt($('#pretaxTotal').val());
          var subtotal = pretaxTotal + cost;
          var updatedTotal = ( subtotal * 1.06 ).toFixed(2);

          $('#pretaxTotal').val(subtotal);
          $('#numb').val(updatedTotal);

          $('#shoppingCart').append('<li>' + description + '</li>');
      }
  });

</script>

1 个答案:

答案 0 :(得分:0)

您可以在表单中创建另一个隐藏字段,每次进行选择时,您可以将值(0-3)添加到隐藏字段并为每个项目添加分隔符。因此该字段包含类似0;3;1;2;3;的内容。稍后,您可以在接收表单数据的代码中再次拆分它。

在你的HTML中,它看起来像这样:

<input id="techCart" type="hidden" value = ""/>

在你的JS中你可以添加:

$('#techCart').val($('#techCart').val() + ":" + apparelType.val());

在你的其他部分结束时。

请参阅http://jsfiddle.net/5frXU/1/进行快速测试。