Search code examples
javascriptjqueryformsdrop-down-menuhidden-field

Defining hidden field value based on select box selection


Is there a jQuery way to using the "starts with" from the SELECT box to pass a variable to a hidden field? Here's what I have for the script to far, but I need it to only look for the first letter, really.

For example, if the user selects "Keyboards - Acoustic Piano", we need "KeyboardMag" to pass through in the hidden field "referralCode". Here's what I have so far:

$( document ).ready(function() {
var refcode={
      Guitars     : "GuitarsMag",
      Keyboards   : "KeyboardMag",
      Drums       : "DrumMag",
      Microphones : "MusicMag"
}
$("#productsMusical").change(function(e){ 
      $('[name="referralCode"]').val(  refcode[ $(this).val() ] )
})
});

<input name="referralCode" value="" id="referralCode" type="hidden">

<select id="productsMusical" name="productsMusical">
  <option value="" selected="selected">--Please Select--</option>
  <option value="Guitars - Acoustic">Guitars - Acoustic</option>
  <option value="Guitars - Electric">Guitars - Electric</option>
  <option value="Guitars - Bass">Guitars - Bass</option>
  <option value="Keyboards - Acoustic Piano">Keyboards - Acoustic Piano</option>
  <option value="Keyboards - Digital Piano">Keyboards - Digital Piano</option>
  <option value="Keyboards - Synth">Keyboards - Synth</option>
  <option value="Drums - Acoustic">Drums - Acoustic</option>
  <option value="Drums - Electric">Drums - Electric</option>
  <option value="Drums - Band">Drums - Band</option>
  <option value="Microphones - Vocal">Microphones - Vocal</option>
  <option value="Microphones - Vocal Headset">Microphones - Vocal Headset</option>
  <option value="Microphones - Instrument">Microphones - Instrument</option>
</select>

Solution

  • You could split the value by ' - ' since that seems to be a uniform part of your dropdown values.

    $(document).ready(function() {
      var refcode = {
        Guitars: "GuitarsMag",
        Keyboards: "KeyboardMag",
        Drums: "DrumMag",
        Microphones: "MusicMag"
      }
      
      $("#productsMusical").change(function(e) {
        var [ refferalCode, other ] = e.target.value.split(' - ');
        
        if ( e.target.value ) {
          $('#referralCode').val(refcode[refferalCode]);
        } else {
          $('#referralCode').val('');
        }
      })
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input name="referralCode" value="" id="referralCode">
    
    <select id="productsMusical" name="productsMusical">
      <option value="" selected="selected">--Please Select--</option>
      <option value="Guitars - Acoustic">Guitars - Acoustic</option>
      <option value="Guitars - Electric">Guitars - Electric</option>
      <option value="Guitars - Bass">Guitars - Bass</option>
      <option value="Keyboards - Acoustic Piano">Keyboards - Acoustic Piano</option>
      <option value="Keyboards - Digital Piano">Keyboards - Digital Piano</option>
      <option value="Keyboards - Synth">Keyboards - Synth</option>
      <option value="Drums - Acoustic">Drums - Acoustic</option>
      <option value="Drums - Electric">Drums - Electric</option>
      <option value="Drums - Band">Drums - Band</option>
      <option value="Microphones - Vocal">Microphones - Vocal</option>
      <option value="Microphones - Vocal Headset">Microphones - Vocal Headset</option>
      <option value="Microphones - Instrument">Microphones - Instrument</option>
    </select>