Changing hidden field based on select box selection

Changing hidden field based on select box selection

We have the following:

  • Select field called "favePet"
  • Hidden field called "petRefCode"

Because we have no control over the server, we have to do this on the front end. We need to send a certain "petRefCode" based on the favorite pet selection:

  1. favePet is Dog, then petRefCode is 'domestic01'
  2. favePet is Cat, then petRefCode is 'domestic01'
  3. favePet is Hamster, then petRefCode is 'domestic02'
  4. favePet is Parrot, then petRefCode is 'domestic02'
  5. favePet is Spider, then petRefCode is 'domestic03'
  6. favePet is Goldfish, then petRefCode is 'domestic03'

  2. <input type="hidden" name="petRefCode " id="petRefCode " value="">

  4. <label for="favePet">Choose your favorite pet:</label>
  5. <select id="favePet" name="favePet">
  6.     <option value="">--Please choose an option--</option>
  7.     <option value="dog">Dog</option>
  8.     <option value="cat">Cat</option>
  9.     <option value="hamster">Hamster</option>
  10.     <option value="parrot">Parrot</option>
  11.     <option value="spider">Spider</option>
  12.     <option value="goldfish">Goldfish</option>
  13. </select>
How can I submit a hidden field based on the selection? I was experimenting with this:

  2. var refCode={
  3. dog : "domestic01",
  4. cat : "domestic01",
  5. hamster : "domestic02",
  6. parrot : "domestic02", 
  7. spider : "domestic03",
  8. goldfish : "domestic03"
  9.  }

  12. $("#favePet").change(function(e) {
  13. var [ petRefCode] = e.target.value;
  14. if ( e.target.value ) {
  15. $('#petRefCode').val(refCode[petRefCode]);
  16. } else {
  17. $('#petRefCode').val('');
  18. }
  19. })