0

I'm no expert in JS, but I'm trying to make a function assess the values in my first select fields, and then return the value to a hidden input field. Doesn't work, JS is definitely messed up, please help!

/** 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>
Bakajuice
  • 173
  • 1
  • 9
  • `In other topic` You should consider to store all the `cases` in array or other data structure your code look like spaguetti code. and its hard to read. – ncubica Dec 19 '14 at 05:25
  • that's a great idea, though I wasn't entirely sure how to create arrays in js, I am familiar with jquery though. Sorry. – Bakajuice Dec 19 '14 at 05:43

2 Answers2

1

Your function iceform_submit is never being called because you have a onsubmit attribute on your button. It should be on the form tag, (or you should use an onClick on the button tag instead). It is the form that gets submitted, not the button!

So your form tag should look like this;

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

..and you should remove the onsubmit from the button, like this;

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

I've chosen not to comment on the rest of your code (as that was not your question), suffice to say that your switch statement could be simplified a LOT.

Hope this helps.

gts101
  • 719
  • 7
  • 13
  • No good :C , the flavorTypeId still doesn't retain any values, I appreciate the help though -EDIT - I've changed the above code to reflect your answer. Thank you – Bakajuice Dec 19 '14 at 04:23
1

replace input submit to this:

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

and use this script and remember you do not have variable radix anywhere declared so i just removed it:if you are willing to use then declare it and assign some value to it then use,but i personally don't see any use of it.

<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>
Suchit kumar
  • 11,809
  • 3
  • 22
  • 44
  • my hero, thank you so much XD. I know this isn't the question, but anyway to make this work with validation - which is limited to submit – Bakajuice Dec 19 '14 at 04:42
  • @Bakajuice i did not get you.please elaborate. – Suchit kumar Dec 19 '14 at 04:44
  • Sorry, html5 validation for required fields (i think) only works with input submit not input button, would using something like prevent_default with input submit work in this situation. – Bakajuice Dec 19 '14 at 04:47
  • 1
    if you can use jquery see this:http://stackoverflow.com/questions/6462143/prevent-default-on-form-submit-jquery.because from iceform_submit() you can not pass event because it is in html. – Suchit kumar Dec 19 '14 at 05:00
  • thanks a lot @suchit ultimately I'll look into it, probably use jquery for validation – Bakajuice Dec 19 '14 at 05:04