Jquery Wont change input element value when select value is changed

Question

Im trying to update an element's value based on the value of a select element I want it to update instantaneously and not on form submit so I tried using jquery .on("change") but have had no success. Please see code below:

jQuery(document).ready(function($) {
  var cproduct = $("#product").val();
  console.log(cproduct);
  var cprodid = $("#cprodid").val(); //this is element value I want to change
  var _80gallon = 13448;
  var _52gallon = 13444;
  var _42gallon = 13441;
  var _32gallon = 13435;

  $("#product").on(("change",

    function() {
      alert(this.value);
      cproduct = $("#product").val();
      console.log(cproduct);

      if (cproduct == "32 Gallon Solar Water Heater") {
        $("#cprodid").val() = _32gallon;
      };

      if (cproduct == "42 Gallon Solar Water Heater") {
        $("#cprodid").val() = _42gallon;
      };

      if (cproduct == "52 Gallon Solar Water Heater") {
        $("#cprodid").val() = _52gallon;
      };

      if (cproduct == "80 Gallon Solar Water Heater") {
        $("#cprodid").val() = _80gallon;
      };

    }));

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <span id="wpcf7-603f35ee122ae" class="wpcf7-form-control-wrap Firstname-wrap" style="display:none !important; visibility:hidden !important;"><label  class="hp-message">Please leave this field empty.</label><input class="wpcf7-form-control wpcf7-text"  type="text" name="Firstname" value="" size="40" tabindex="-1" autocomplete="nope" /></span></p>
  <p><span class="wpcf7-form-control-wrap product"><select name="product" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required form-control-lg" id="product" aria-required="true" aria-invalid="false"><option value="">Product Of Interest</option><option value="32 Gallon Solar Water Heater">32 Gallon Solar Water Heater</option><option value="42 Gallon Solar Water Heater">42 Gallon Solar Water Heater</option><option value="52 Gallon Solar Water Heater">52 Gallon Solar Water Heater</option><option value="80 Gallon Solar Water Heater">80 Gallon Solar Water Heater</option><option value="Commercial Heaters">Commercial Heaters</option></select></span></p>
  <input type="hidden" name="cprodid" value="" class="wpcf7-form-control wpcf7-hidden" id="cprodid" />
  <div class="form-row">
    <div class="col-md-6">
      <span class="wpcf7-form-control-wrap fullname"><input type="text" name="fullname" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control-lg" id="fullname" aria-required="true" aria-invalid="false" placeholder="Full Name" /></span>
    </div>
    <div class="col-md-6">
      <span class="wpcf7-form-control-wrap email"><input type="email" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email form-control-lg" id="email" aria-required="true" aria-invalid="false" placeholder="Email Address" /></span>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6">
      <span class="wpcf7-form-control-wrap address"><input type="text" name="address" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control-lg" id="address" aria-required="true" aria-invalid="false" placeholder="Street Address" /></span>
    </div>
    <div class="col-md-6">
      <span class="wpcf7-form-control-wrap parish"><select name="parish" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required form-control-lg" id="parish" aria-required="true" aria-invalid="false"><option value="Parish">Parish</option><option value="Hanover">Hanover</option><option value="St.James">St.James</option><option value="Trelawny">Trelawny</option><option value="St.Ann">St.Ann</option><option value="St.Mary">St.Mary</option><option value="Portland">Portland</option><option value="St.Thomas">St.Thomas</option><option value="Kingston">Kingston</option><option value="St.Andrew">St.Andrew</option><option value="St.Catherine">St.Catherine</option><option value="Clarendon">Clarendon</option><option value="Manchester">Manchester</option><option value="St.Elizabeth">St.Elizabeth</option><option value="Westmoreland">Westmoreland</option></select></span>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6">
      <span class="wpcf7-form-control-wrap phonenumber1"><input type="tel" name="phonenumber1" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel form-control-lg" id="phonenumber1" aria-required="true" aria-invalid="false" placeholder="Phonenumber 1" /></span>
    </div>
    <div class="col-md-6">
      <span class="wpcf7-form-control-wrap phonenumber2"><input type="tel" name="phonenumber2" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel form-control-lg" id="phonenumber2" aria-invalid="false" placeholder="Phonenumber 2" /></span>
    </div>
  </div>
  <p><span class="wpcf7-form-control-wrap usermessage"><textarea name="usermessage" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea form-control-lg" aria-invalid="false" placeholder="Your Message"></textarea></span></p>
</div>
</div>
</div>
</div>
<div style="text-align:center;">
  <input type="submit" value="GO SOLAR" class="wpcf7-form-control wpcf7-submit btn btn-primary" id="sub_btn" />
</div>
<br><br>
<br><br>

I have tried putting the change event after the document.ready. That did not work either. Please help me

Answer 1

To set values in jQuery, you need to put the value inside .val(), so in your case .val(gallons) [ Just like @Paul. T said]

$(document).ready(function() {
var cproduct = $("#product").val();
var cprodid = $("#cprodid").val(); //this is element value I want to change
var _80gallon= 13448;
var _52gallon = 13444;
var _42gallon = 13441;
var _32gallon = 13435;

$("#product").on("change", 

function(){
    cproduct = $("#product").val();
  
if ( cproduct == "32 Gallon Solar Water Heater") {
  $("#cprodid").val(_32gallon)
};

if ( cproduct == "42 Gallon Solar Water Heater") {
$("#cprodid").val(_42gallon)
};

if ( cproduct == "52 Gallon Solar Water Heater")
{$("#cprodid").val(_52gallon)};

if ( cproduct == "80 Gallon Solar Water Heater")
{$("#cprodid").val(_80gallon);};

  });
    
});

Answer 2

I think The problem is related with unnessessary brackets () in .on(): Wrong:

$("#product").on(("change", function(){
         //your code
}));  

Should be:

$("#product").on("change", function(){
        //your code
});

Answer 3

you just need to add "else if" instead of only "if" and remove semicolon after "}".

if (cproduct == "32 Gallon Solar Water Heater") {
    $("#cprodid").val(_32gallon);
}
else if (cproduct == "42 Gallon Solar Water Heater") {
    $("#cprodid").val(_42gallon);
}
else if (cproduct == "52 Gallon Solar Water Heater") {
    $("#cprodid").val(_52gallon);
}
else if (cproduct == "80 Gallon Solar Water Heater") {
    $("#cprodid").val(_80gallon);
}