Develop Reference

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>

Select-List displays Keys instead of values

I have a stange phenomenon where I'm stuck at the moment as I don't know where the error comes from.
My code is like this:
<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
<option value="DUMMY1">0</option>
<option value="s">24</option>
<option value="d">25</option>
</datalist>
My problem is with displaying the datalist. If I click on the arrow I'm getting only the numbers like here:
After selecting for example '25' I'm getting the value 'd'. That is correct BUT I don't want to display the numbers. Instead I want to display the value of this datalist in this drop-down field.
If I do something like this:
<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
<option value="DUMMY1">DUMMY1</option>
<option value="s">s</option>
<option value="d">d</option>
</datalist>
I'd naturally get the correct display, but I would like to add the ID, so that I can bind the click event with the ID of the selection and not the label.

You can make use of data attribute to find the id of option clicked from the list and keep value as labels,
see below code
$(function(){
$('#selectClassInput').on('change', function(e){
var val = $(this).val();
var id = $('#selectClass').find('option[value="' + val + '"]').data('id');
console.log(id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
<option value="DUMMY1" data-id="0">DUMMY1</option>
<option value="s" data-id="24">s</option>
<option value="d" data-id="25">d</option>
</datalist>

how create autocomplete with datalist

i'm try to create a autocomplete with datalist html this is my code:
<input type="text" id="options" name="options" list="list_option">
<datalist id="list_option">
<option value="1">Op1</option>
<option value="2">Op2</option>
</datalist>
<input type="button" onclick="data($('#options').val());" value="getId">
<script>
function data(term){
alert(term);
}
</script>
the list show correct the problem is if i select a item from my datalist on the input show the value, dont the name...
and how i can get this value(id).. please any suggest..thanks

"...dont the name... and how i can get this value(id)."
I have no idea what you mean...or how it relates to autocomplete.
The following Demo will run callback function getData() when the change event is fired on #options. The console (not alarm because it's irritating) will log two items:
Text Box Value
Run callback function getID() when the click event is fired on :button. The console will log:
Text Box ID
Data List ID
As for autocomplete behavior, you just add the autocomplete attribute to the text box tag or not, because it's on by default. To test it, just type in a letter.
.autocomplete() is not a built-in method of JavaScript or jQuery. You need to load jQuery UI as Mr. Noyon commented or a plugin.
BTW, never use an onclick attribute event handler when you have jQuery loaded. That's like pushing a car instead of driving it.
Demo
$('#options').on('change', getData);
$(':button').on('click', getID);
function getID(event) {
var textID = $('#options')[0].id;
var listID = $('#list')[0].id;
console.log('Text Box ID: #' + textID);
console.log('List ID: #' + listID);
}
function getData(event) {
var val = this.value;
console.log('Text Box Value: ' + val);
}
<input type="text" id="options" name="options" list="list" autocomplete>
<datalist id="list">
<option value='wallet'>wallet</option>
<option value='hair'>hair</option>
<option value='coasters'>coasters</option>
<option value='book'>book</option>
<option value='clay pot'>clay pot</option>
<option value='twezzers'>twezzers</option>
</datalist>
<input type='button' value='getID'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to retrieve values in select tag within the radio button using jquery?

I have the following html radio tags. Basiclly, it has 3 radio button and the user can only pick one and I want the jquery code to pick up the value from the checked radio.
There is 3 radio button, one for all day, one for N/A and one for time. And once user click time, it can selected the time between 12:00 to 20:00 in the tag.
I know that using .val() for extract the value for the other two options, but I am figuring out how to extract the values on the times when the time radio button is selected.
I am using Meteor framework for this project, but i guess this is a jQuery question.
html
<tr>
<td>Monday</td>
<td><input type="radio" name="mon" value="all">all day</td>
<td>
<input type="radio" name="mon" value="time">between
<select name="firstTime">
<option>Time</option>
<option value="12">12:00</option>
<option value="13">13:00</option>
<option value="14">14:00</option>
<option value="15">15:00</option>
<option value="16">16:00</option>
<option value="17">17:00</option>
<option value="18">18:00</option>
<option value="19">19:00</option>
<option value="20">20:00</option>
</select>
to
<select name="secondTime">
<option>Time</option>
<option value="12">12:00</option>
<option value="13">13:00</option>
<option value="14">14:00</option>
<option value="15">15:00</option>
<option value="16">16:00</option>
<option value="17">17:00</option>
<option value="18">18:00</option>
<option value="19">19:00</option>
<option value="20">20:00</option>
</select>
</td>
<td><input type="radio" name="mon" value="n/a">N/A</td>
</tr>

You can do as below:
DEMO
$("input[name=mon]").on("change", function(){
if(this.value=="time"){
alert("First Time : " + $('select[name="firstTime"] option:selected').text());
alert("Second Time : "+$('select[name="secondTime"] option:selected').text());
}
});
UPDATE
For this demo I am trying to get values on button click:
$('.getVal').on('click',function(){
var selectedoption=$("input[name=mon]:checked").val().trim();
if(selectedoption=="time"){
var dispValue="First Time : " + $('select[name="firstTime"] option:selected').text()+ " and Second Time : "+$('select[name="secondTime"] option:selected').text();
$('.dispSelected').text(dispValue);
}
else
{
$('.dispSelected').text(selectedoption + " has been selected");
}
});

You can get their value when they change, for example:
jQuery("input[type=radio]").on("change", function(){
alert(this.value); //Will show the value of the selected radio
});
For getting the select values, you can get them, for example, when the selects change or when the radios change. Check this fiddle.

If you want to get the values when the form is submitted use the following code:
$('form').on('submit', function( e ) {
e.preventDefault();
var formData = $(this).serialize();//this holds all the form data
......
});
But to ensure that times are only included when the time radio button is selected you need the following code:
$('input[name=mon]').on('change', function() {
$('select[name=firstTime], select[name=secondTime]').prop('disabled', this.value != 'time');
});

Write text to textbox after dropdown menu has been changed

I am looking to add text to a textbox with the selected text from the dropdown menu and place a ',' after.().
<select>
<option value="1">This</option>
<option value="2">is</option>
<option value="3">test</option>
</select>
Now when you select the option 'is' the textbox gets updated with 'is,'. Now still on the same page you select 'This' the textbox gets updated with 'is, This,'. Reload the page and do it the other way around and you get 'This, is,'.
Hope you understand what I am trying to do here, the will contains values from the database so I cannot know what the values are exactly.
Thanks in advance.

I think something like this should work:
<select id="dropdownId">
<option value="1">This</option>
<option value="2">is</option>
<option value="3">test</option>
</select>
<input id="textboxId" type="text" />
<script type="text/javascript">
$('#dropdownId').on('change', function () {
$('#textboxId').val($('#textboxId').val() + $('#dropdownId option:selected').text() + ', ');
});
</script>
Fiddle