Pass Province or State value to hidden field with Javascript-CodePudding

I am new to javascript and cannot find an easy-to-understand answer. I would like a certain value to get passed to a hidden field when a user selects a certain option from 2 different select dropdown options. They can only select one or the other on the actual form.

For example if a user selects a US state or a Canadian province, I want to pass that value to hidden text field using javascript.

<form>
 <p class="form-field state pd-select required">
  <label class="field-label" for="usstatevalue">State</label>
  <select name="usstatevalue" id="usstatevalue" class="select" onchange="">
   <option value="" selected="selected"></option>
   <option value="47815">AL</option>
   <option value="47817">AK</option>
   <option value="47819">AZ</option>
   <option value="47821">AR</option>
   <option value="47823">CA</option>
   <option value="47825">CO</option>
   <option value="47827">CT</option>
   <option value="47829">DE</option>
   <option value="47831">DC</option>
   <option value="47833">FL</option>
   <option value="47835">GA</option>
   <option value="47837">HI</option>       
  </select>
 </p>
 <p class="form-field Province_Canada pd-select required">
  <label class="field-label" for="provcanvalue">Province – Canada</label>
  <select name="provcanvalue" id="provcanvalue" class="select" onchange="">
   <option value="" selected="selected"></option>
   <option value="47791">Alberta</option>
   <option value="47793">British Columbia</option>
   <option value="47795">Manitoba</option>
   <option value="47797">New Brunswick</option>
   <option value="47799">Newfoundland and Labrador</option>
   <option value="47801">Nova Scotia</option>
   <option value="47803">Nunavut</option>
   <option value="47805">Ontario</option>
   <option value="47807">Prince Edward Island</option>
   <option value="47809">Quebec</option>
   <option value="47811">Saskatchewan</option>
   <option value="47813">Yukon</option>
  </select>
 </p>
 <p class="form-field  State_Province">
 <label for="stateprovnew">hidden field</label>
  <input type="text" name="stateprovnew" value="">
 </p>
</form>

CodePudding user response：

Following code will insert the selected state and country into the text field. You can make the field hidden it will work.

var stateSelector = document.getElementById('usstatevalue');
var countrySelector = document.getElementById('provcanvalue');
var hiddenSelector = document.getElementById('stateprovnew');

stateSelector.addEventListener('change', function() {
  hiddenSelector.value = stateSelector.value;
});

countrySelector.addEventListener('change', function() {
  hiddenSelector.value  = ' '   stateSelector.value;
});

<form>
 <p class="form-field state pd-select required">
  <label class="field-label" for="usstatevalue">State</label>
  <select name="usstatevalue" id="usstatevalue" class="select" onchange="">
   <option value="" selected="selected"></option>
   <option value="47815">AL</option>
   <option value="47817">AK</option>
   <option value="47819">AZ</option>
   <option value="47821">AR</option>
   <option value="47823">CA</option>
   <option value="47825">CO</option>
   <option value="47827">CT</option>
   <option value="47829">DE</option>
   <option value="47831">DC</option>
   <option value="47833">FL</option>
   <option value="47835">GA</option>
   <option value="47837">HI</option>       
  </select>
 </p>
 <p class="form-field Province_Canada pd-select required">
  <label class="field-label" for="provcanvalue">Province – Canada</label>
  <select name="provcanvalue" id="provcanvalue" class="select" onchange="">
   <option value="" selected="selected"></option>
   <option value="47791">Alberta</option>
   <option value="47793">British Columbia</option>
   <option value="47795">Manitoba</option>
   <option value="47797">New Brunswick</option>
   <option value="47799">Newfoundland and Labrador</option>
   <option value="47801">Nova Scotia</option>
   <option value="47803">Nunavut</option>
   <option value="47805">Ontario</option>
   <option value="47807">Prince Edward Island</option>
   <option value="47809">Quebec</option>
   <option value="47811">Saskatchewan</option>
   <option value="47813">Yukon</option>
  </select>
 </p>
 <p class="form-field  State_Province">
 <label for="stateprovnew">hidden field</label>
  <input type="text" name="stateprovnew" id="stateprovnew" value="">
 </p>
</form>