How do you pass a value to a hidden form field when a certain option is selected?

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 the select dropdown.

I know that there are if/else statements but I'm not sure if that would be used in this situation.

For example: I have a select dropdown of a list of states.

        <select name="HomeState" required>
            <option value="1">Alabama</option>
            <option value="1">Alaska</option>
            <option value="1">Arizona</option>
            <option value="1">Arkansas</option>
            <option value="5">California</option>
            <option value="1">Colorado</option>
            <option value="1">Connecticut</option>
            <option value="1">Delaware</option>
       </select>

As you can see, any option other than California will be rated at a value of 1.

I would like it to where if the user selects the option of California, then the value of $300 will get passed to a hidden form field.

<input name="AmountNeeded" type="hidden" value="300" />

If they select anything other than California, the hidden field would get passed $100

<input name="AmountNeeded" type="hidden" value="100" />

How would I implement this logic? Would it be using if/else statement? I am new and don't exactly know how to set that up.

Answer 1

You can do this as follows:

<select name="HomeState" required onChange=myFunction(this)>
     <option value="1">Alabama</option>
     <option value="1">Alaska</option>
     <option value="1">Arizona</option>
     <option value="1">Arkansas</option>
     <option value="5">California</option>
     <option value="1">Colorado</option>
     <option value="1">Connecticut</option>
     <option value="1">Delaware</option>
</select>

Javascript code is:

<script>
function myFunction(x) {

  val =  x.options[x.selectedIndex].text;

  if(val == 'California')
    document.getElementsByName("AmountNeeded")[0].value = 300
 else
    document.getElementsByName("AmountNeeded")[0].value = 100
}
</script>

If else statement is good for you if you are sure that All other states have value 1 except California . If all states may have different values like some states may have 1 or some may have 2 or some may have 3, then there may be other alternatives to solve this like you can pass give one more attribute data-src-amount to options and give amount to data-src-amount . You can create options like <option value="1" data-src-amount="100">Alabama</option> and in script, you can fetch data-src-amount on select change event instead of if-else statement.

Answer 2

To keep this simple you could assign ids to the <select> and hidden <input> and listen to the change event via onchange() on the <select> with a function call.

And based on the selected item, change the value of hidden input.

NOTE: To test the snippet out I have removed the type="hidden" . Do place it back.

 function homeSelected(){ const home = document.getElementById("homeSelector").value; if(home == 5){ document.getElementById("amountNeeded").value = 300; }else{ document.getElementById("amountNeeded").value = 100; } } 

 <select id="homeSelector" name="HomeState" onchange="homeSelected()" required> <option value="1">Alabama</option> <option value="1">Alaska</option> <option value="1">Arizona</option> <option value="1">Arkansas</option> <option value="5">California</option> <option value="1">Colorado</option> <option value="1">Connecticut</option> <option value="1">Delaware</option> </select> <input id="amountNeeded" name="AmountNeeded" value="100" />