We Keep Coding

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

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.

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" />

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.

How to Set the Default Value of a Dropdown List with Javascript

<select class="form-control sprites-arrow-down" id="TaskFitToWork" name="TaskFitToWork" onchange="getInstructions();" >
<option selected disabled value="">Select Fit To Work</option>
{{range $key, $val := .vm.FitToWorkArray}}
<option id="{{index $.vm.FitToWorkKey $key}}" value="{{$val}}" >{{$val}} </option>
{{end}}
</select>
This is my HTML code to fill a dropdown list using golang.
var fitToWorkName = vm.FitToWorkName
document.getElementById("TaskFitToWork").value = fitToWorkName;
This is the JavaScript code . Note, that here vm.FitToWorkName contains value to be filled in the drop down list. I tried to set the default fill for the dropdown list but it is not working. Please help me solve this issue.

One may set the default value of a dropdown list with either HTML or JavaScript, as this example illustrates. Initially, the code sets the default option using HTML and later at the user's discretion the default can be reset with JavaScript. At the outset the critical part of the code involves applying "selected" to the desired default option. If the user chooses a different option, then clicking the button that restores the default option activates some JavaScript. A simple, one-liner function uses the select element's selectedIndex property and sets it to indicate the second option. Since the array of options use zero-based indexing that index has a value of one.
var d = document;
d.g = d.getElementById;
var btn = d.g("btn");
var mySelect = d.g("mySelect");
function getInstructions(){
return true;
}
function restoreDefault(){
mySelect.selectedIndex = 1;
}
btn.onclick = restoreDefault;
option:first {
background: #fff;
color:#009;
}
select {
background:#fff;
color:#009;
}
<select id="mySelect" class="form-control sprites-arrow-down" id="TaskFitToWork" name="TaskFitToWork" onchange="getInstructions();" value>
<option id="val" value="" disabled>Select Fit To Work</option>
<option id="val" value="somevalue" selected>Some Value </option>
<option id="val" value="anothervalue" >Another Value </option>
<option id="val" value="morevalue" >More Value </option>
</select>
<button id="btn">Restore Default</button>

Toggle element when value is selected without know any information about value

I've a problem here and don't know the right path to get this working. I have a table where I store some values and of course I can do CRUD operations on any records. Those values are used to build a SELECT element dynamically. All this works perfectly but I need to toggle one element visibility when specific value is picked. For example:
<select class="change">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
<input type="text" class="show" style="display:none" />
Taking this as input, by default .show is hide, lets said that any time I choose "Value 2" it will be displayed otherwise should be hidden again. I know how to do this at jQuery with this code:
$(".change").on('change', function() {
option = $('.change :selected').val();
if (option == "Value 2") {
$(".show").show();
} else {
$(".show").hide();
}
});
But what's happen if any edit "Value 2" and change it to "VAlue 2" or "VALue 2" or "Value2"? The code will stop working. In this case what did yours do to avoid this?
I can attach to "ID" but again what's happen if any deletes the record with ID=2 and recreate later with ID=10? Then code will stop working again.
I don't know how to get this done, any advice? Ideas? Workarounds?

I guess you are building your dropdown list using data from DB. What I suggest is to add a new column in your table. This column will be a simple bool to determine if your input needs to be hidden or no.
Then you have this HTML code (here new col is "showInput"):
<select class="js-dropdown">
<option value="foo" data-showInput="1">Foo</option>
<option value="bar" data-showInput="0">Bar</option>
<option value="foobar" data-showInput="1">Foobar</option>
</select>
<input type="text" class="js-input" />
And this JS code:
var input = $(body).find('.js-input');
$('.js-dropdown').on('change', function() {
var option = $(this).find(':selected');
var showInput = parseInt(option.attr('data-showInput'));
if (showInput === 1) {
input.show();
} else {
input.hide();
}
});

Changing the background to a picture based on an <option> value selection [duplicate]

This question already has answers here:
How to change the background image through the tag "selected"
(2 answers)
Closed 8 years ago.
So I know this question was, very similarly asked before, however I did not find the answer in that feed as the answer did not work with my other JavaScript.
Here's my problem. I am trying to add in a menu to change the background on a form I am working on. I cannot figure out how to make the background change to an image when an <option> is selected from the <select> field. I would like to accomplish this with just JavaScript, but I will use JQuery if need be.
<label for="pictype">Select a New Background</label>
<select id="pictype" name="pictype" onclick="picchange()">
<option value="p1">pic1</option>
<option value="p2">pic2</option>
<option value="p3">pic3</option>
<option value="p4">pic4</option>
<option value="p5">pic5</option>
<option value="p6">pic6</option>
</select>

You can use a .change event, and smart file naming to achieve this result. Using jQuery is by far the easiest solution.
If you name your images the same as the option values, you can then reference images based off of the current option selected. So for the first option you could name the picture, p1.jpg.
<label for="pictype">Select a New Background</label>
<select id="pictype" name="pictype">
<option value="p1">pic1</option>
<option value="p2">pic2</option>
<option value="p3">pic3</option>
<option value="p4">pic4</option>
<option value="p5">pic5</option>
<option value="p6">pic6</option>
</select>
jQuery
$("#pictype").change(function(){
var imageFileName = $(this).val();
$("body").css("background-image", "url(../Images/"+imageFileName+".jpg)");
});
So if you selected option #1, it would set the background image url to url("../Images/p1.jpg");
Here is the jsfiddle: http://jsfiddle.net/mtruty/3L2uP/
Hope this helps!

here is the code:
$( "#pictype" ).change(function(){
if( this.value == "p1" ) //here goes code to change picture
if( this.value == "p2" ) //here goes code to change picture
......
});

Demo: http://jsfiddle.net/Qwnm6/
<label for="pictype">Select a New Background</label>
<select id="pictype" name="pictype" onchange="document.body.style.background = this.value">
<option value="red">pic1</option>
<option value="green">pic2</option>
<option value="blue">pic3</option>
<option value="yellow">pic4</option>
<option value="lime">pic5</option>
<option value="gray">pic6</option>
</select>

Try this. NOTE: I deleted your onclick function calling pictype
HTML
<select id="pictype" name="pictype">
<option value="p1">pic1</option>
<option value="p2">pic2</option>
<option value="p3">pic3</option>
<option value="p4">pic4</option>
<option value="p5">pic5</option>
<option value="p6">pic6</option>
</select>
JavaScript
var selectEl = document.getElementById("pictype");
selectEl.onclick = function () {
if (this.value == "p1") {
document.body.style.backgroundColor = "Black";
}
else {
document.body.style.backgroundColor = "White";
}
}

Set value of a select box

I have the following select-box:
<select name="country">
<option value="us">America</option>
<option value="jp">Japan</option>
<option value="cn">China</option>
<option value="vi">Vietnam</option>
</select>
By default, the value of this select-box is "us" and the displayed text is "America".
What I want to do is set the value of this select box to "jp" and set the text displayed on this select-box to "Japan" using javascript.
I can set the value to "jp" easily by setting the "selected" attribute to "true", but I can't change the text display on the select-box (It still display "America" instead of "Japan").
Are there anyone know how to do that?

You need to set the value of the select itself rather than set the options selected to true.
var element = document.getElementsByName('country')[0];
element.value = 'jp';

Can you try this, add selected="selected" based on your preference in HTML, Javascript document.getElementsByName('country')[0].value.
Using HTML:
<select name="country">
<option value="us">America</option>
<option value="jp" selected="selected" >Japan</option>
<option value="cn">China</option>
<option value="vi">Vietnam</option>
</select>
Using javascript:
document.getElementsByName('country')[0].value = 'jp';

To use JavaScript, you could use...
selectElement.value = "jp";
jsFiddle.