用于隐藏输入字段的内联Javascript功能无法正常运行

时间：2014-12-19 03:59:51

标签： javascript

我不是JS的专家，但是我试图让函数评估我的第一个选择字段中的值，然后将值返回到隐藏的输入字段。不行，JS肯定搞砸了，请帮忙！

/** Usually form leads to sheet/fields which use the data, 
    but for example just used # **/

<form action="#" method="get" name="iceform" id="iceform" onsubmit="iceform_submit()">
  <div class="icecream">

    <div class="flavorType">
      <select name="flavorType" class="flavor-type empty" id = "flavor-type">
        <option value="0" disabled selected>Flavor Type Desired</option>
        <option value="2">Frozen Treats</option>
        <option value="5">Soft Served</option>
      </select>
    </div>

    <div class="flavor">
      <select name="flavorAmount" class="flavor empty" id='flavor-amount'>
        <option value="0" disabled selected>flavor Amount Desired</option>
        <option value="750">$750</option>
        <option value="800">$800</option>
        <option value="850">$850</option>
        <option value="900">$900</option>
        <option value="950">$950</option>
        <option value="1000">$1000</option>
        <option value="1250">$1250</option>
        <option value="1500">$1500</option>
        <option value="1750">$1750</option>
        <option value="2000">$2000</option>
        <option value="2250">$2250</option>
        <option value="2500">$2500</option>
        <option value="2750">$2750</option>
        <option value="3000">$3000</option>
        <option value="3250">$3250</option>
        <option value="3500">$3500</option>
        <option value="3750">$3750</option>
        <option value="4000">$4000</option>
        <option value="4250">$4250</option>
        <option value="4500">$4500</option>
        <option value="5000">$5000</option>
        <option value="5500">$5500</option>
        <option value="6000">$6000</option>
        <option value="6500">$6500</option>
        <option value="7000">$7000</option>
        <option value="7500">$7500</option>
        <option value="8000">$8000</option>
        <option value="8500">$8500</option>
        <option value="9000">$9000</option>
        <option value="9500">$9500</option>
        <option value="10000">$10000</option>
      </select>
    </div>
   <br>
    <!-- Upon submit call js function -->
    <div class="form-button">
      <input type='submit' class="submit tp-button green big :hover.green" value="Continue">
    </div>
    <input type="hidden" name="flavorTypeId" value=''>
  </div>

  <script type="text/javascript">
    /** Function Called to define/return newflavortype **/
  function CheckFlavorTypeID(flavor_amount, flavor_type) {
    var newflavortype = flavor_type;
    switch (parseInt(flavor_type, radix)) {
    case 2:
        /** Frozen Treats **/
      switch (parseInt(flavor_amount, radix)) {
      case 750:
      case 800:
      case 850:
      case 900:
      case 950:
        newflavortype = 10;
        break;
      case 1000:
      case 1250:
      case 1500:
      case 1750:
      case 2000:
      case 2250:
      case 2500:
      case 2750:
      case 3000:
      case 3250:
      case 3500:
      case 3750:
      case 4000:
      case 4250:
      case 4500:
        newflavortype = 11;
        break;
      case 5000:
      case 5500:
      case 6000:
      case 6500:
      case 7000:
      case 7500:
      case 8000:
      case 8500:
      case 9000:
      case 9500:
      case 10000:
        newflavortype = 12;
        break;
      default:
        break;
      }
      break;
    case 5:
      /* Soft Served */
      switch (parseInt(flavor_amount, radix)) {
      case 750:
      case 800:
      case 850:
      case 900:
      case 950:
        newflavortype = 3;
        break;
      case 1000:
      case 1250:
      case 1500:
      case 1750:
      case 2000:
      case 2250:
      case 2500:
      case 2750:
      case 3000:
      case 3250:
      case 3500:
      case 3750:
      case 4000:
      case 4250:
      case 4500:
        newflavortype = 6;
        break;
      case 5000:
      case 5500:
      case 6000:
      case 6500:
      case 7000:
      case 7500:
      case 8000:
      case 8500:
      case 9000:
      case 9500:
      case 10000:
        newflavortype = 7;
        break;
      default:
        break;
      }
      break;
    default: newflavortype = 3;
      break;
    }
    return newflavortype;
  }
    /** The function that submits the form and defines flavorTypeId - value (hidden) **/
    function iceform_submit() {
      var iceform = document.getElementById('iceform');
      var flavorA = document.getElementById('flavor-amount').value;
      var flavorT = document.getElementById('flavor-type').value;
      iceform.flavorTypeId.value = CheckFlavorTypeID(flavorA, flavorT);
      iceform.submit();
    }
  </script>
</form>

2 个答案:

答案 0 :(得分：1)

您的函数iceform_submit永远不会被调用，因为您的按钮上有onsubmit属性。它应该在表单标记上，（或者您应该在按钮标记上使用onClick）。它是提交的表单，而不是按钮！

所以你的表格标签应该是这样的; 

<form action="#" method="get" name="iceform" id="iceform" onsubmit="iceform_submit()">

..你应该从按钮中删除onsubmit，就像这样; 

<input type='submit' class="submit tp-button green big :hover.green" value="Continue">

我选择不对你的其余代码发表评论（因为这不是你的问题），只需说你的switch语句可以简化很多。

希望这有帮助。

答案 1 :(得分：1)

将输入提交替换为：

 <input type='button' onclick="iceform_submit()" class="submit tp-button green big :hover.green" value="Continue">

并使用此脚本并记住你没有声明变量radix，所以我只是删除它：如果你愿意使用然后声明它并为它分配一些值然后使用，但我个人不要＆＃ 39;看不到任何用途。

<script type="text/javascript">
    /** Function Called to define/return newflavortype **/
  function CheckFlavorTypeID(flavor_amount, flavor_type) {
    var newflavortype = flavor_type;
    switch (parseInt(flavor_type)) {
    case 2:
        /** Frozen Treats **/
      switch (parseInt(flavor_amount)) {
      case 750:
      case 800:
      case 850:
      case 900:
      case 950:
        newflavortype = 10;
        break;
      case 1000:
      case 1250:
      case 1500:
      case 1750:
      case 2000:
      case 2250:
      case 2500:
      case 2750:
      case 3000:
      case 3250:
      case 3500:
      case 3750:
      case 4000:
      case 4250:
      case 4500:
        newflavortype = 11;
        break;
      case 5000:
      case 5500:
      case 6000:
      case 6500:
      case 7000:
      case 7500:
      case 8000:
      case 8500:
      case 9000:
      case 9500:
      case 10000:
        newflavortype = 12;
        break;
      default:
        break;
      }
      break;
    case 5:
      /* Soft Served */
      switch (parseInt(flavor_amount)) {
      case 750:
      case 800:
      case 850:
      case 900:
      case 950:
        newflavortype = 3;
        break;
      case 1000:
      case 1250:
      case 1500:
      case 1750:
      case 2000:
      case 2250:
      case 2500:
      case 2750:
      case 3000:
      case 3250:
      case 3500:
      case 3750:
      case 4000:
      case 4250:
      case 4500:
        newflavortype = 6;
        break;
      case 5000:
      case 5500:
      case 6000:
      case 6500:
      case 7000:
      case 7500:
      case 8000:
      case 8500:
      case 9000:
      case 9500:
      case 10000:
        newflavortype = 7;
        break;
      default:
        break;
      }
      break;
    default: newflavortype = 3;
      break;
    }
    return newflavortype;
  }
    /** The function that submits the form and defines flavorTypeId - value (hidden) **/
    function iceform_submit() {
      var iceform = document.getElementById('iceform');
      var flavorA = document.getElementById('flavor-amount').value;
      var flavorT = document.getElementById('flavor-type').value;
      iceform.flavorTypeId.value = CheckFlavorTypeID(flavorA, flavorT);
    //  alert(iceform.flavorTypeId.value);
      iceform.submit();
    }
  </script>
相关问题
最新问题