We Keep Coding

Add the value of the hidden input field of other option

I ended by this code after helping with many thanks of others here in this website. Now, in the following code of submitting the form, I want the value of the hidden input field to be instead of Other when shown the result.
<form action="" method="post">
<div class="row">
<div class="col-sm-8 col-sm-offs et-2">
<select class="form-control" name="country" id="country" required >
<option value="">Please select your country</option>
<option value="A">Country A</option>
<option value="B">Country B</option>
<option value="C">Country C</option>
<option value="Other">Other</option>
</select>
<input type ="text" id="country_other" style="display:none">
<button type="submit" class="btn btn-gpsingh">Next</a>
</div>
</div>
</form>
<script>
$("#country").change(function(){
var value = this.value;
if(value =='Other')
{
$("#country_other").show();
$("#country_other").attr('required', false);
}
else
{
$("#country_other").hide();
$("#country_other").val('');
$("#country_other").attr('required', false);
}
});
</script>

Something you could try, if I understood correctly, would be to remove the name attribute from the SELECT menu if the chosen value is other and assign the name attribute instead to the text input element - when the form is submitted the item in the POST array with the name of country would come from the text field and not the select menu...
$('#country').change(function(){
if( this.value == 'Other' ){
$('#country_other').show();
$('#country_other').attr('required', false);
/* remove name from select & add to text field */
$('#country_other').attr('name', $(this).attr('name') );
$(this).removeAttr('name');
} else {
$('#country_other').hide();
$('#country_other').val('');
$('#country_other').attr('required', false);
/* remove name attribute from text field and assign back to select menu */
$(this).attr('name', $('#country_other').attr('name') );
$('#country_other').removeAttr('name');
}
});

popup to display selected options using javascript or ajax

i have a HTML code in which user can select multiple options. As the user is selcting options, the selected options should be displayed in either a popup using ajax or a div...I have already tried using selectbox with checkbox but that doesn't work and it became difficult to fetch parameters for further usage in perl cgi script. There is no code available for this..What is the easy way to get the selected options in a popup? i want the options to be displayed in the popup as they are getting selected.
HTML code:
<td>Server Name <font color = red>*</font></td>
<td>
<span title="Press the 'ctrl' key to select multiple servers">
<select name="serverlist" id="slist" size="4" multiple>
<option value="" disabled selected>Select servers</option>
<option>Server 1</option>
<option>Server 2</option>
<option>Server 3</option>
<option>Server 4</option>
<option>Server 5</option>
</select>
</span>
</td>

You can easily get the selected options.
You need to add onchange event first, and loop the options and get the selected values. Something like this:
<td>Server Name
<font color = red>*</font>
</td>
<td>
<span title="Press the 'ctrl' key to select multiple servers">
<select name="serverlist" id="slist" onChange="getSelectedServers()" size="4" multiple>
<option value="" disabled selected>Select servers</option>
<option>Server 1</option>
<option>Server 2</option>
<option>Server 3</option>
<option>Server 4</option>
<option>Server 5</option>
</select>
</span>
</td>
<div id="displaySelectedServers">
</div>
<script>
function getSelectedServers() {
var e = document.getElementById("slist");
var serversList = '';
for(var i = 0; i < e.options.length; i++) {
if (e.options[i].selected) {
serversList += '| ' + e.options[i].value + ' |';
}
}
document.getElementById("displaySelectedServers").innerHTML = serversList;
}
</script>
I hope my answer was helpful :)

Additional html for pop up div:
<div id=popUp>
</div>
addition CSS for popUp div:
#popUp{
display: none; // required if div is to "pop up" on change.
border: 1px solid black; // optional, put it here to give an idea on how to approach working with this div.
border-radius:4px; // optional
width:200px; // optional
min-height: 100px; // optional
}
#popUp>p{
display: inline-block; // optional
margin: 5px; // optional
}
and the jQuery to listen to changes in the select element iterate through the options to review which are selected and display the text content of those also in the pop up div:
$("select#slist").change(function(){ // Listen to <select> changes
$("div#popUp").show().empty(); // Make sure popUp is shown and cleared of contents.
$(this).find("option").each(function(index, value){ // Find options, iterate through them
if($(value).prop("selected")){ // check if option is selected
$("div#popUp").append(`<p>${$(value).text()}</p>`) // append option text content to popUp
}
});
});

Generate text on a webpage which depends on dropdown box options

I have created a dropdown box with 3 options on my website.
I want to change some text on the webpage, depending on the drop-down item selected. For example:
If dropdown option 1 is chosen, I would like some text on the page that says "You have chosen option 1".
I don't know any JavaScript and so I haven't tried anything apart from trying to search for a similar solution.
<select name="os0" style="background: #315d80; color: #fff; border-color: white; border: 0px;">
<option value="op1">Option 1</option>
<option value="op2">Option 2</option>
<option value="op3">Option 3</option>
</select>

Full sultion with jQuery (I started typing it before you added the HTML to your question so the options are italian car brands).
https://jsfiddle.net/mL2c2xb6/
HTML:
<select id="carSelect">
<option></option>
<option value="Audi">Audi</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
</select>
<p id="choiceDisplay">
Selection Display
</p>
Javascript:
$('select').change(function(){ // Listen to changes to <select> element
const options = $("option"); // Get all the <option> elements.
let selectedOption = ""; // Var to store selected option value.
options.each(function(index){ // Iterate through option elements.
let option = options[index];
if($(option).prop("selected")) { // Find the seletced one.
selectedOption = $(option).val(); // Get the value and store it
};
});
$("#choiceDisplay")
.empty()
.append(selectedOption); // Display the result.
});

var e = document.querySelector('[name="os0"]');
var strUser = "";
e.addEventListener("change", function(){
strUser = e.options[e.selectedIndex].innerHTML;
alert("You have chosen " + strUser);
});

Button to add selected="selected" from outside form

I am using laravel, and trying to integrate some jquery, which I am not very good at.
I have a multiple select box with potentially lots of options, based on database values.
<div class="toolselect">
<select multiple>
<option value="1">Tool 1</option>
<option value="2">Tool 2</option>
<option value="3">Tool 3</option>
</select>
</div>
The user can select tools directly from the select box, but this can be a huge list and therefore I am also displaying a search field below the select box to
search the database of tools so the user can see more info about the tool, and then decide if he wants to include it.
Currently the user has to first search, then find the entry in the select box and select it.
I want a faster solution with a button next to the info about the tool, that automatically adds selected="selected" to the correct option in the select box above.
I tried
<input type="button" value="Mer" onclick="addselect('{{$tool->id}}')"/>
<script type="text/javascript">
addselect = function (id){
$("div.toolselect select").val(id);
}
But that erased all the other other selected fields.
Any ideas would be appreciated.

Try using jQuery's prop function:
<input type="button" value="Mer" onclick="addselect('{{$tool->id}}')"/>
<script type="text/javascript">
addselect = function (id){
$('.toolselect select option[value="'+ id +'"]').prop('selected');
}
</script>

For a multi-select, the value is an array of all the selected items. You're just setting the value to a single item, which is treated as an array of one element, so all the other selections get discarded.
So you should get the old value, add the new ID to it, and then set that as the new value.
function addselect(id) {
$('.toolselect select').val(function(i, oldval) {
oldval = oldval || []; // oldval = null when nothing is selected
oldval.push(id);
return oldval;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="toolselect">
<select multiple>
<option value="1">Tool 1</option>
<option value="2">Tool 2</option>
<option value="3">Tool 3</option>
</select>
</div>
<input type="button" value="Select 1" onclick="addselect('1')"/>
<input type="button" value="Select 2" onclick="addselect('2')"/>
<input type="button" value="Select 3" onclick="addselect('3')"/>

Instead of using this :
addselect = function (id){
$("div.toolselect select").val(id);
}
Try this :
addselect = function(id) {
var temp = [];
var arr = $('select').val();
for(i=0;i<arr.length;i++){
temp.push(arr[i]);
}
temp.push(id);
$("div.toolselect select").val(temp);
}
This way your previous selection is preserved, and the new selection is appended to the previous selection.
Hope this helps.

Save input text while switching between <option> tag

I have a text input, alongside I have option tag with two options.
Basically I want to save the text that the user enters while switching between options, but if the user choose an option that he already enterd a text the text should appear in the input field as the default value.
And of course it's part of the submit form.
Many thanks in advance!
<div>
<p>please enter your description for each of the languages</p>
<input id="description" type="text">
<select id="language-select">
<option value="EN">EN</option>
<option value="FR">FR</option>
</select>
</div>

You can use local storage for this if you want to persist what is saved, otherwise a variable would be good enough.
Example with variable
var previous;
var state = {};
$("#language").on('focus', function() {
previous = $(this).val()
}).change(function() {
state[previous] = $("#test").val();
$("#test").val('');
if (typeof(state[$(this).val()]) != 'undefined') {
$("#test").val(state[$(this).val()]);
}
$("#test").focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input name="test" id="test" />
<select id="language">
<option val="en">EN</option>
<option val="fr">FR</option>
</select>
</form>