Develop Reference

If the option is selected, fills in the input

How, using only HTML and CSS, to make it so that when I select an option in <select>, my input is filled in?
Here is my code
<select class="cod_art" name="cod_art" id="cod_art_01">
<option value="Default1">Default1</option>
<option value="Default2">Default2</option>
</select>
<input type="text" id="descrizione_01" name="descrizione" readonly>
So, if I select Default1 option, in input will fill a text, for example "example1". Just to make text in input different from the option value
How can I do it in JS?

window.onload = function(){
document.getElementById("descrizione_01").value = document.getElementById("cod_art_01").options[0].dataset.text;
};
document.getElementById("cod_art_01").addEventListener("change", function(e){
document.getElementById("descrizione_01").value = e.target.options[e.target.selectedIndex].dataset.text;
});
<select class="cod_art" name="cod_art" id="cod_art_01">
<option value="Default1" data-text="Example1">Default1</option>
<option value="Default2" data-text="Example2">Default2</option>
</select>
<input type="text" id="descrizione_01" name="descrizione" readonly>

Put select value to input field and then submit using JS or jQuery

I have a form in the CMS which has only one input (text type) and I cannot add additional fields to it (I don't have access to the DB), so what I want is to create select options near the field and add selected options values to the input field.
Let say I have this code:
<input type="text" placeholder="Your name" />
<select id="yourAge">
<option disabled>your age</option>
<option value="18">18</option>
<option value="19">19</option>
</select>
<select id="yourHeight">
<option disabled>height</option>
<option value="180 cm">180 cm</option>
<option value="190 cm">190 cm</option>
</select>
And this is how it must display after submition. The form submits the posts and works fine. This select tags should not touch any DB part or anything else. It only needs to get the values, insert to that inout text field and then show it.
And is it possible to show the values in special order like this?:
Name: Bla Bla
Age: 18
Height: 180 cm
Or at least like this:
Bla Bla, age 18 years old, height 180 cm
How can I do this using JavaScript or jQuery?
By the way my APP works based on nodeJS and MongoDB.
Thanks in advance.

Are you trying to get all of the fields to get added to the name field? It would be a good idea to create another input for the name and give it a unique identifier to distinguish it from the other input where you will be adding all of the information to.
I would create a function that handles transfering the values from your input and select fields to the input field provided. I would call this function on submit, adding the values to the provided input before the form submission.
Here it is on Codepen:
https://codepen.io/MattStillwater/pen/pogVeRp
This is the setField() function that I created for adding the values to the provided field:
function setField() {
var nameVal = jQuery('#yourName').val() +', ';
var ageSelectVal = jQuery('#yourAge').val() +', ';
var heightSelectVal = jQuery('#yourHeight').val();
var inputField = jQuery('input[type=text]').not(document.getElementById('yourName'));
inputField.val(nameVal + ageSelectVal + heightSelectVal);
}
This is the HTML that I am using:
<div class="section" id="yourField">
<input type="text" placeholder="Your name" id="yourName" />
<select id="yourAge">
<option>your age</option>
<option value="18">18</option>
<option value="19">19</option>
</select>
<select id="yourHeight">
<option>height</option>
<option value="180 cm">180 cm</option>
<option value="190 cm">190 cm</option>
</select>
</div>
<form action="#" class="section" id="formFields">
<input type="text" /> <!-- The endpoint -->
<input type="submit" value="Submit" />
</form>
The function is being called on submit event:
jQuery('input[type=submit]').submit(function() {
setField();
});

Welcome to SO, this is not a writing service website, so please next time do your own research first and ask when you get stuck. Combination of this things I wrote is all over this website with examples.
You could have searched for exactly what you need:
-How to get values of HTML elements.
-How to add values to elements.
-How to do this on some event.
var input = document.getElementById("in");
var sel1 = document.getElementById("yourAge");
var sel2 = document.getElementById("yourHeight");
sel1.onclick = function(){
sel1 = document.getElementById("yourAge");
var selected = sel1.options[sel1.selectedIndex].value;
input = document.getElementById("in");
input.value="Name: "+input.value+", Age: "+selected;
};
sel2.onclick = function(){
sel2 = document.getElementById("yourHeight");
var selected = sel2.options[sel2.selectedIndex].value;
input = document.getElementById("in");
input.value=input.value+", Height: "+selected;
};
<input type="text" id="in" placeholder="Your name" size="35"/>
<select id="yourAge">
<option disabled>your age</option>
<option value="18">18</option>
<option value="19">19</option>
</select>
<select id="yourHeight">
<option disabled>height</option>
<option value="180 cm">180 cm</option>
<option value="190 cm">190 cm</option>
</select>

Text box not changes for default drop down value in javascript

I have a txtSubTotal text box, a discount drop down and a txtGrossTotal text box. txtSubTotal text box is updating when the ADD button is clicked. txtGrossTotal text box is updating when the drop down value is selected. But, when updating the txtSubTotal text box, at the same time txtGrossTotal text box should be updated for the default drop down value, which is "0". Here, txtGrossTotal should be the value of txtSubTotal.
Below is my code, it doesn't display the txtGrossTotal when the drop down has it's default value. (But, after selecting another option, and again select the default value, it updates the txtGrossTotal.)
function discountedGrossTotal(dropdownVal){
var discountOption = document.getElementById("discount"),
subTotal = document.getElementById("txtSubTotal"),
grossTotal = document.getElementById("txtGrossTotal").value;
grossTotal.value = subTotal.value - (subTotal.value * dropdownVal/100);}
discount drop down
<select class="select" id="discount" name="discount" onchange="discountedGrossTotal(this.value);">
<option selected>0</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
txtGrossTotal HTML
<div id="gross_total_div">
<input name="txtGrossTotal" type="text" id="txtGrossTotal" size="15" readonly/>
</div>

Basically you want to take the same action by changing the "discount" dropdown value as well as the "subtotal" textbox value. So, you will have to call the same function on both.
You can achieve this by doing below modifications in your code:
Remove the parameters from "discountedGrossTotal" function
Add a new variable inside your function like dropdownVal = document.getElementById("discount").value
Call the same function on change event of your "txtSubTotal" textbox
Now, this function will be called if any of these (textbox or dropdown) value is changed and hence the "Gross Total" value will be updated accordingly.

Please Try this, it should work for you...
function discountedGrossTotal() {
var dropdownVal= document.getElementById("discount").options[document.getElementById("discount").selectedIndex].innerHTML;
subTotal = document.getElementById("txtSubTotal");
grossTotal = document.getElementById("txtGrossTotal").value;
document.getElementById("txtGrossTotal").value = subTotal.value - (subTotal.value * dropdownVal / 100);
}
sub total: <input type="text" id="txtSubTotal" onblur="discountedGrossTotal()" />
<br />
discount: <select class="select" id="discount" name="discount" onchange="discountedGrossTotal();">
<option selected>0</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br />
<div id="gross_total_div">
<input name="txtGrossTotal" type="text" id="txtGrossTotal" size="15" readonly />
</div>

How to submit textbox value instead of "Other" to database

The following html code is part of a form, which sends the information to a java servlet and updates sql database. It is a dropdown menu. When the user selects "Other", javascript makes a textbox appear so that the user can specify more detail. However, when user presses submit button, in the database, it simply says "Other" instead of what the user entered in the text box. Help is appreciated, thanks!
<script type="text/javascript">
function showfield(name){
if (name == 'Other')
document.getElementById('div1').innerHTML = 'Please Specify: <input type="text" name="other" />';
else
document.getElementById('div1').innerHTML = '';
}
</script>
<select id="description" name="description" onchange="showfield(this.options[this.selectedIndex].value)" required>
<option disabled selected value> ---Select--- </option>
<option value="Accommodation">Accommodation</option>
<option value="Travel">Travel</option>
<option value="Meal Allowanced">Meal Allowances</option>
<option value="Flat Rate">Flat Rate Expenses</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>

I think the field you're checking on the server is "description" which is the name of your select. Which is indeed set to "Other" (this is the value of the selected option).
I would have written it a bit differently but with the current code you need to name the input with some other name and check that one on your server, or change the selected option value.
Example change for client code:
<select id="description" name="description" required>
<option disabled selected value> ---Select--- </option>
<option value="Accommodation">Accommodation</option>
<option value="Travel">Travel</option>
<option value="Meal Allowanced">Meal Allowances</option>
<option value="Flat Rate">Flat Rate Expenses</option>
<option value="Other">Other</option>
</select>
<div id="div1">
Please Specify: <input type="text" name="otherDescription" />
</div>
<script>
document.querySelector('#description').addEventListener('change', function (evt) {
var inputWrapper = document.getElementById('div1'),
input = inputWrapper.querySelector('input);
if (evt.target.value == 'Other') {
document.getElementById('div1').style.display = '';
} else {
document.getElementById('div1').style.display = 'none';
input.value = '';
}
});
</script>
The you need to check 'otherDescription' on the server.
Hope it helps

Assuming that all of this markup is contained within a <form> element that will be submitted to the server, you should be able to simply check to see if the value posted for description is "Other" and then read the posted value for other.
The code will vary depending on your server-side implementation.

Drop updating a hiddenfield with an unrelated value

If you wanted to change the value of the hidden field to something not in the value of the dropdown like so
<form>
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="foo">One - 42</option>
<option value="bar">Two - 40</option>
<option value="wig">Three - 38</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
</form>
And i want to pass (if two selected) dropdown="bar" and hiddenInput="40"
The value has to be passed but needs to effect the hiddenfield.
What do you think? Would you need to If then? or could you have it something like
<form>
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="foo" onchange="set hiddenInput - 42">One - 42</option>
<option value="bar" onchange="set hiddenInput - 40">Two - 40</option>
<option value="wig" onchange="set hiddenInput - 38">Three - 38</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
</form>

You have the right idea with the onchange attribute. Your function could look like:
function changeHiddenInput(mySelect) {
var map = {foo: "42", bar: "40", wig: "38"};
var index = mySelect.selectedIndex;
var value = mySelect.options[index].value;
var hiddenInput = document.getElementById("hiddenInput");
hiddenInput.value = map[value];
}
The map variable there maps each option's value on to what the hidden attribute should be set to.

I'd keep the mapping on the server rather then trying to handle it client side.
Forget the hidden input. Just look up the value based on the value of the dropdown after the data reaches the server.

Unfortunately, you'd need the IF statement. You can use the onclick event for the option tags in Firefox and probably other browsers, but in IE you can't set any events on the option elements, only on the select element.