We Keep Coding

Javascript concatenate select and input values in a text box

I'd like to concatenate several values from selects and input fields on a final input field that contain all the values.
What I have until now is this:
$('#chosen_a').change(function() {
$('#ddlNames').val($('#chosen_a option:selected').data('id'));
console.log($('#chosen_a option:selected').data('id'));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="criteria_title" id="chosen_a" data-placeholder="Select Category" class="chzn_z span3 dropDownId chzn-done" style="display: block;">
<option value="" disabled="" selected="">- First select -</option>
<option value="AAA" data-id="AAA">AAA</option>
<option value="BBB" data-id="BBB">BBB</option>
<option value="CCC" data-id="CCC">CCC</option>
<option value="DDD" data-id="DDD">DDD</option>
<option value="EEE" data-id="EEE">EEE</option>
</select>
<input id="Something1" placeholder="Write something"></input><br/>
<select name="criteria_title" id="chosen_b" data-placeholder="Select Category" class="chzn_z span3 dropDownId chzn-done" style="display: block;">
<option value="" disabled="" selected="">- Second select -</option>
<option value="FFF" data-id="FFF">FFF</option>
<option value="GGG" data-id="GGG">GGG</option>
<option value="HHH" data-id="HHH">HHH</option>
<option value="III" data-id="III">III</option>
<option value="JJJ" data-id="JJJ">JJJ</option>
</select>
<input id="Something2" placeholder="Write something else"></input><br/>
<br><br>
<input maxlength="2600" name="ddlNames" id="ddlNames" onKeyUp="countChar(this)" placeholder="Blocco Note"></input><br/>
In effect, I can get the first select option to the input field, but I do not know how to add the rest.

If I understand you well ...
Add a class 'getValues' to all inputs & selects that you want to get the values and create an event on JQuery onChange so when something will change it will auto-join it in that #ddlNames input.
$('.getValues').change(function() {
var values = [];
$('.getValues').each(function() {
values.push($(this).val());
});
$('#ddlNames').val(values.join(', '));
})

Try this:
const onChange = () => {
const value = $('#chosen_a option:selected').val() + ' '
+ $('#Something1').val() + ' '
+ $('#chosen_b option:selected').val() + ' '
+ $('#Something2').val();
$('#ddlNames').val(value);
}
$('select').change(onChange);
$('input').keydown(onChange);

Can not set value dynamically in drop down using javascript/jquery

I have one issue.I want to set value in drop down by onchange event using javascript/Jquery. I am explaining my code below.
<h1>drop down</h1>
<p>
<select id="leaveCode" name="leaveCode" onChange="SetValue();">
<option value="10">Annual Leave</option>
<option value="11">Medical Leave</option>
<option value="14">Long Service</option>
<option value="17">Leave Without Pay</option>
</select>
</p>
<p>
<select id="leaveCode1" name="leaveCode">
<option value="">select value</option>
<option value="21">xyz</option>
<option value="21">abc</option>
</select>
</p>
function SetValue(){
var value=document.getElementById('leaveCode').value;
var name=document.getElementById('leaveCode').name;
document.getElementById('leaveCode1').value=value;
document.getElementById('leaveCode1').name=name;
}
Here my requirement is when user will select any value from 1st drop down list it will display also in second dropdown list in disable mode.Please help me.

You can use following statement that will append and make select in leavecode1 dropdown.Use following statements in your js file
jQuery('#leaveCode').change(function(){
//get selected text from #leaveCode list
text = jQuery("#leaveCode option:selected").text();
//get selected value for selected text
value = jQuery("#leaveCode option:selected").val();
//append new in #leavecode1 and make this option as selected option.
jQuery("#leaveCode1").append("<option value=" + value + " selected>" + text + "</option>");
});
You can check this using following link(updated)-http://jsfiddle.net/aecrcvt2/2/

The best way is to Append the new value in your dropdownlist on change the leaveCode dropdownlist
$("#leaveCode").change(function(){
$("#leaveCode1").append("<option value=" + $("#leaveCode").val() + ">" + $("#leaveCode option:selected").text() + "</option>")
});

I believe this is the answer you need:
$("#leaveCode").change(function(){
var selectedOptionValue = $(this).find(":selected").val();
var selectedOptionText = $(this).find(":selected").text();
var newOption = '<option value='+selectedOptionValue+' disabled>'+selectedOptionText+'</option>';
$("#leaveCode1 option").last().after(newOption);
});
JSFIDDLE

function SetValue(obj) {
var $this = $(obj);
var val = $this.val();
var txt = $('option:selected', $this).text();
$('#leaveCode1').append($('<option></option>').val(val).html(txt));
$('#leaveCode1').val(val).prop('disabled', 'disabled');
}
SetValue('#leaveCode');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>drop down</h1>
<p>
<select id="leaveCode" name="leaveCode" onChange="SetValue(this);">
<option value="10">Annual Leave</option>
<option value="11">Medical Leave</option>
<option value="14">Long Service</option>
<option value="17">Leave Without Pay</option>
</select>
</p>
<p>
<select id="leaveCode1" name="leaveCode">
<option value="">select value</option>
<option value="21">xyz</option>
<option value="21">abc</option>
</select>
</p>

Multiselect options with each option selecting multiple times using jquery

Select numbers (you can select each number any number of times):
<select name="number_selection" method="post" id="number_selection" >
<option value="0">0</option>
<option value="1">1 </option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" value="Select" id="select_button"/>
<div id="feedback"> </div>
what I've tried in jquery is this....
$('#select_button').click(function(){
var gs= $('#number_selection').val();
$('#feedback').html(gs);
});
Now, What i am trying to do is, if i select a number from the options, it should display in the 'div' and if i select another number or the same number again, it should display beside the first number, but i am only able to select only a single number, not multiple numbers. I want the do this using jquery
If you don't understand my problem, i can explain you further. Please help.
And also if I want to deselect each element from the list appended?
I've tried this... but isn't working.
$('#select_button').click(function(){
var gs= $('#number_selection').val();
$('#feedback').append(gs + ' ' + '<input type="button" value="Remove" id="gs_remove" />' + '<br>');
});
$('#gs_remove').click(function(){
(this).hide();
});
but with this i am not able to remove each selected option.

Replace
$('#fcb_pt_gs').html(gs);
by
$('#fcb_pt_gs').append(gs);

$('#select_button').click(function() {
var _val = $('#fcb_pt_gs').text();
var gs= $('#number_selection').val();
if( _val == "" ) {
var _collection = [];
}
else {
// Add in collection
var _collection = [_val];
}
_collection.push( gs );
$('#fcb_pt_gs').html( _collection.join(',') );
});

Automatic form fill using javascript

here is my code:
function setActualDate()
{
var d1 = new Date();
var y = d1.getFullYear();
var d = d1.getDate();
var m1 = d1.getMonth() + 1;
var m2 = d1.getMonth();
document.getElementById('entryDate').value = (y+"-"+m1+"-"+d);
document.getElementById('selectedYear').value = y;
document.getElementById('selectedMonth').value = ("0"+m2);
}
</script>
</head>
<body onload="setActualDate()">
<div id="page">
<h3> Welcome to Money Logger!</h3>
<form name="enter" action="enter.php" method="post">
Enter
<select name="mode">
<option selected="selected" value=""></option>
<option value="1">the money withdraw</option>
<option value="2">the money income</option>
</select>
<input id ="entryDate" type="date" name="entryDate">
<input type="text" name="entryName">
<input type="text" name="entryValue">
<input type="submit" value="Enter">
<input type="reset" value="Clear">
</form>
<form name="getEntry" action="getEntry.php" method="post">
Choose month and year for monthly overview:
<select name="month">
<option id = "selectedMonth" selected="selected" value=""></option>
</select>
<select name="year">
<option id = "selectedYear" selected="selected" value=""></option>
</select>
<input type="submit" value="Display">
</form>
</div>
</body>
I used simple javascript to automatically fill the form inputs "entryDate, selectedYear, selectedMonth" by actual date and some other dates used by the further scripts.
My problem is, that when the site is loaded, only first input is automatically filled - the input with id = entryDate.
The next 2 inputs are empty. But, when I press F5 and the site is reloaded again, the 2 inputs are filled correctly.
Could you please help me fix it to have all 3 forms filled when the site is loaded for the first time...
Thank you

You are not using <select> and <option> correctly. <select> represents a dropdown, which can contain multiple <option> elements.
An <option> element represents an option in the dropdown. You close an <option> with </option>. Whatever is BETWEEN the tags will appear in the dropdown:
<option>Hello</option> <!--user sees "Hello" as an option in the dropdown-->
On the other hand, an <option>'s value attribute contains the string that will be sent to the server, if the option is selected, when the form is submitted. You can think of this as the "real" value of the <option>: the user won't see it, but it's the one that matters. Whatever is between <option> and </option> is visible by the user, but doesn't actually DO anything.
Any one of a dropdown's options can be "selected" (that is, visible as the chosen option in the dropdown) by giving it a selected attribute set to selected (selected="selected"). When a user chooses an option, this attribute gets set automatically (and the selected attribute on the other options gets cleared).
So first of all, let's get your selectedYear dropdown looking right. You'll need to manually provide some years as options:
<select id="selectedYear" name="year">
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>
Note that you need to specify the year both between the tags AND in each <option>'s value attribute, as explained above. Also note that I moved the id to the <select>. There's rarely a reason to select an individual <option> of a <select>; typically to modify a dropdown's options, you should select the <select> tag itself.
So, let's try that. I'll re-create the dropdown above, but I'll add its options using JavaScript:
<select id="selectedYear" name="year"></select>
<script type="text/javascript">
var dropdown = document.getElementById('selectedYear');
var start_year = 2011;
var end_year = 2013;
for (var i = start_year; i <= end_year; i++) {
dropdown.innerHTML += '<option value="' + i + '">' + i + '</option>';
}
</script>
The innerHTML function lets you set the HTML content between an element's opening tag (in this case <select id="selectedYear" name="year"> and closing tag (</select>).
Knowing this, it's pretty easy to select the option you want using JavaScript. Remember you can do this by setting the selected attribute of the <option> to "selected". Here's a portion of your setActualDate function, showing how to set the default year for just the selectedYear dropdown:
<script type="text/javascript>
function setActualDate() {
var d1 = new Date();
var year = d1.getFullYear();
var dropdown = document.getElementById('selectedYear');
//loop through the dropdown's options
for (var i = 0; i < dropdown.options.length; i++) {
var option = dropdown.options[i];
//check if this is the option we want to set
if (option.value == year) {
option.selected = true;
} else {
//ensure all other options are NOT selected
option.selected = false;
}
//NOTE: you can simplify the above if-else to just:
//option.selected = (option.value == year);
}
}
</script>
That should be enough to get you started. I hope it all makes sense.

Use the following HTML for month -
<!-- HTML for month -->
<select id = "selectedMonth" name="month">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<!-- HTML for year -->
<select id="selectedYear" name="year">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
and script
//script for setting month
var monthEl = document.getElementById('selectedMonth');
monthEl.options[m2].selected = "selected"
//for year
var yearEl = document.getElementById('selectedYear');
yearEl.options[y].selected = "selected"

You are getting the elements by their ID so the first time the script runs only fills out the first elements it finds (probably the ones in the first form).
Since you have several elements to fill out automatically, you should be setting classes to on them and use these classes to select the ones you are interested in. For example:
<form id="form1">
<input class="entryDate" type="text"> <!-- note the class=..." -->
</form>
<form id="form2">
<input class="entryDate" type="text">
<select name="mode" class="selectedMonth"> <!-- note the class=..." -->
<option selected="selected" value=""></option>
<option value="1">the money withdraw</option>
<option value="2">the money income</option>
</select>
</form>
Now your code should be something like this:
window.onload = function setActualDate() {
var d1 = new Date();
var y = d1.getFullYear();
var d = d1.getDate();
var m1 = d1.getMonth() + 1;
var m2 = d1.getMonth();
var entryDates = document.getElementsByClassName('entryDate');
var years = document.getElementsByClassName('selectedYear');
var months = document.getElementsByClassName('selectedMonth');
var i, j;
for (i in entryDates)
entryDates[i].value = (y + "-" + m1 + "-" + d);
for (i in months) {
for (j in months[i].options)
if (months[i].options[j].value == m1) {
months[i].options[j].selected = true;
break;
}
}
//similarly for years...
};
Here's a fiddle demonstrating it: http://jsfiddle.net/QDdAp/2/

How to get values from conditional drop down list?

I am seeking assistance again for my problem. This is just a continuation of my conditional dropdownlist.
<select name="dropdownmain" id="" title="">
<option value="dropdownmain1">dropdownmain1</option>
<option value="dropdownmain2">dropdownmain2</option>
<option value="dropdownmain3">dropdownmain3</option>
<option value="dropdownmain4">dropdownmain4</option>
</select>
//if selected dropdownmain1 this dropdown will display
<select name="dropdownmain1" id="" title="">
<option value="dropdownmain1-submenu1">dropdownmain1-submenu1</option>
<option value="dropdownmain1-submenu2">dropdownmain1-submenu2</option>
<option value="dropdownmain1-submenu3">dropdownmain1-submenu3</option>
<option value="dropdownmain1-submenu4">dropdownmain1-submenu4</option>
</select>
//if selected dropdownmain2 this dropdown will display
<select name="dropdownmain2" id="" title="">
<option value="dropdownmain2-submenu1">dropdownmain2-submenu1</option>
<option value="dropdownmain2-submenu2">dropdownmain2-submenu2</option>
<option value="dropdownmain2-submenu3">dropdownmain2-submenu3</option>
<option value="dropdownmain2-submenu4">dropdownmain2-submenu4</option>
</select>
//if selected dropdownmain3 this dropdown will display
<select name="dropdownmain3" id="" title="">
<option value="dropdownmain3-submenu1">dropdownmain3-submenu1</option>
<option value="dropdownmain3-submenu2">dropdownmain3-submenu2</option>
<option value="dropdownmain3-submenu3">dropdownmain3-submenu3</option>
<option value="dropdownmain3-submenu4">dropdownmain3-submenu4</option>
</select>
//if selected dropdownmain4 this dropdown will display
<select name="dropdownmain4" id="" title="">
<option value="dropdownmain4-submenu1">dropdownmain4-submenu1</option>
<option value="dropdownmain4-submenu2">dropdownmain4-submenu2</option>
<option value="dropdownmain4-submenu3">dropdownmain4-submenu3</option>
<option value="dropdownmain4-submenu4">dropdownmain4-submenu4</option>
</select>
**im using this js code**
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('select[name!="dropdownmain"]').hide();
$('select[name="' + $('select[name="dropdownmain"]').val() + '"]').show();
$('select[name="dropdownmain"]').change(function(){
$('select[name!="dropdownmain"]').hide();
$('select[name="' + $(this).val() + '"]').show();
});
});//]]>
</script>
How will I get the value of the selected dropdownlist when a button is clicked?

Give the submenus a common class name!, and give the main select an ID as well!
jQuery code can be reduced to:
$('#dropdownmain').change(function() {
$('.submenu').hide();
$('.submenu[name="' + $(this).val() + '"]').show();
});
http://jsfiddle.net/samliew/jKUBb/
Then to get the value of selected submenu item:
$('.submenu').change(function() {
alert($(this).val());
});

Something like this maybe (if I understood what you want):
$("#button").click(function() {
var selected = $('select[name="dropdownmain"]').val();
alert($('select[name="' + selected + '"]').val());
});

$('select[name="' + $('select[name="dropdownmain"]').val() + '"]').val()

Use:
var e = document.getElementsByName("dropdownmain")[0];
var strUser = e.options[e.selectedIndex].value;

If you want to get all values from currently displayed select :
$("select:visible").each(function() {
console.log( $(this).attr('name') + " have value : " + $(this).val() );
});
Here is a working example : http://jsfiddle.net/GAe7D/1/