Pass Province or State value to hidden field with Javascript

Question

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>

Answer 1

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>