Develop Reference

How can i put an option value in a input text after clicking a button?

I'm not familiar with javascript and jQuery and I'm asking you.
I would like the code of a product to be selected, once I have selected it from the select dropdown, I click the button and it should add the value in an input box text, that I have created, so that I can also accumulate more codes of more products.
Keep in mind that once the button is clicked, the same value is no longer added indefinitely but that it is possible to choose another code and add it next to the one already present in the input text.
I don't know if it is more practical to use the <input type = "submit"> tag instead of the button tag to send or in this case transfer the selected text from the select to a text form.
You would save my life if you could please complete this action for me with javascript or jQuery :)
<select class="select" id="select-code">
<option value="">Select a code</option>
<option value="value1">Code 1</option>
<option value="value2">Code 2</option>
<option value="value3">Code 3</option>
<option value="value4">Code 4</option>
</select>
<button id="code-btn">submit to form</button>
<input name="my-quote" type="text" placeholder="code1,code2...">

First of all, it seems that you are complete beginner. so you should learn DOM api to learn how to manipulate the window.
Anyway here is the code to do so which you want;
document.getElementById('code-btn').onclick = () => {
let e = document.getElementById('select-code');
document.getElementById('input').value = e.options[e.selectedIndex].text;
}
<select class="select" id="select-code">
<option value="">Select a code</option>
<option value="value1">Code 1</option>
<option value="value2">Code 2</option>
<option value="value3">Code 3</option>
<option value="value4">Code 4</option>
</select>
<button id="code-btn">submit to form</button>
<input id='input' name="my-quote" type="text" placeholder="code1,code2...">
document.getElementById('code-btn') gets the element with id 'code-btn'. As that is a button, we can use onclick property which will will take a function and that function will be called when it is clicked.
Inside that function, i am simply getting the input field and setting its value to the text of the selected option from dropdown.
I think the code here is self-documented.

This isn't a direct answer to your question, but an alternative solution. If possible for your situation, I would consider using <select multiple>: the select tag with the "multiple" attribute. It's a native HTML feature that allows the user to select multiple options from the list. I don't know how you're submitting the form data, but if using a <form> tag then the form's data will include which values have been selected.
Tutorial about select multiple
<label for="select-code">Select a code</label>
<select class="select" id="select-code" multiple>
<option value="value1">Code 1</option>
<option value="value2">Code 2</option>
<option value="value3">Code 3</option>
<option value="value4">Code 4</option>
</select>
<button id="code-btn">submit to form</button>
<input id='input' name="my-quote" type="text" placeholder="code1,code2...">

This is actually very simple and might be used as beginers excercise, so I'm gonna give you a brief walkthrough of how I would solve it:
register button onClick event
read selected value
add it to the placeholder attribute
so something like this (not tested at all)
//button click event
$("#code-btn").click(function (event) {
//in element #select-code
var textToAdd = $('#select-code')
//find element with pseudo selector :selected
.find(":selected")
//get its inner text
.text();
//check if input already contains the text here, if not
if (!$("input").attr("placeholder").includes(textToAdd)) {
//into input element
$("input")
//into attribute placehoder
.attr("placeholder",
//insert original text //insert colon //insert new text
$("input").attr("placeholder") + ", " + textToAdd)
}
});

function myFunction() {
var newText = document.getElementById('select-code').value
var input = document.getElementById('my-quote')
if (input.value == '') input.value = newText
else input.value = input.value + ', ' + newText
}
<select class="select" id="select-code" onchange='myFunction()'>
<option value="">Select a code</option>
<option value="Code 1">Code 1</option>
<option value="Code 2">Code 2</option>
<option value="Code 3">Code 3</option>
<option value="Code 4">Code 4</option>
</select>
<button id="code-btn">submit to form</button>
<input id="my-quote" type="text" placeholder="code1,code2...">

How to load data in text fields dynamically when selecting an option from drop down which is populated from database? Laravel Ajax

Simply speaking I have Added a drop down in my form which has loaded values from the database.The Form consists of input fields. Some fields already have values in database which I want to load using drop down so that user may not enter them again.
Here is the HTML view for drop down:
<select sku="" id="sku_drop" class="selectpicker" data-size="7" data-style="btn btn-success btn-round" name="sku_drop" title="Select SKU">
<option value="0" disabled>Select SKU</option>
#foreach ($sku as $item)
<option value="{{$item->sku}}">{{$item->sku}}</option>
#endforeach
</select>
This drop down has some values, when user selects a certain value, the form must be auto filled from the database.
I have not made any function in my controller or any route for this procedure.

To load some other fields based on selection of select box you will need javascript for that (or jQuery).
something like this:
const selectBox = document.getElementById('select-box');
const textField = document.getElementById('text_field');
selectBox.addEventListener('change', updateValue);
function updateValue(e) {
textField.value = e.target.value;
}
<select id="select-box">
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
<option value="Volvo">Volvo</option>
</select>
<label for="text_field">Text Field:</label>
<input id="text_field" type="text" name="text_field">

How to send a value from a select to an input text in html using javascript?

I am trying to send a value to an based on a selection from a dropdown list such as . I want to fetch the value of possiblePhone.id and send it to .
<script>
function copyTextValue() {
var text1 = document.getElementById("source").value;
document.getElementById("destination").value = text1;
}
</script>
<div>
<select th:field="${possiblePhones}">
<option value="0">select phone</option>
<option id="source" onselect="copyTextValue()"
th:each="possiblePhone : ${possiblePhones}"
th:value="${possiblePhone.id}"
th:text="${possiblePhone.model}"></option>
</select>
</div>
<td><input type="text" id="destination"> </td>
For example, if "Samsung" is selected then "1" should be send to the input field and so on. Actually, i do not get any output.

<select id="source" onchange="copyTextValue()">
<option value="0">select phone</option>
<option value="1">samsung</option>
<option value="2">something</option>
</select>
The id="source" attribute should be in <select> element, also change onselect to onchange and move it to <select> element too.
Codepen: https://codepen.io/anon/pen/WVxLpz

You can achieve this by setting the listener to the select element and then query the selected option value.
I made a minimal example with two brands:
<script>
function copyTextValue() {
var e = document.getElementById("select");
var val = e.options[e.selectedIndex].value;
document.getElementById("destination").value = val;
}
</script>
<div>
<select onchange="copyTextValue()" id="select">
<option value="0">select phone</option>
<option value="1">Brand 1</option>
<option value="2">Brand 2</option>
</select>
</div>
<td><input type="text" id="destination"> </td>

one of the simple thing you have to observe here is that you have to capture the event when the dropdown is selected, and pass the current dropdown reference to your method.
<script>
function copyTextValue(selectedOption) {
if(selectedOption.selectedIndex <= 0){
document.getElementById("destination").value = '';
return;
}
var selectedOptionValue = selectedOption.value;
document.getElementById("destination").value = selectedOptionValue;
}
</script>
<div>
<select onChange="copyTextValue(this);">
<option value="0">select phone</option>
<option value="1">select first phone</option>
<option value="2">select second phone</option>
<option value="3">select third phone</option>
<option value="4">select fourth phone</option>
</select>
</div>
<td><input type="text" id="destination"> </td>
here you are also trying to avoid to pass any value to the textbox when the first element is selected. #kryptur's answer is also correct, but this is simpler.

You're using Thymeleaf. For these you to create a form to send you data to the server.
Follow this link for documentation for your exact problems.
https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#creating-a-form
As Frameworks like Thymeleaf usually store state on the server which means you update server first - and then your UI gets updated.

what value return is the value of the select field what you need to do is get the text of selected option i.e
function copyTextValue() {
var selectNode = document.getElementById("source");
enter code here
document.getElementById("destination").value =
selectNode .options[selectNode .selectedIndex].textContent;
}

How can I keep the same position on my drop down menu once a user selects it on the drop-down menu [duplicate]

This question already has answers here:
Stay on selected item on drop down menu using Javascript
(2 answers)
Closed 6 years ago.
I have a drop down field on my form. When I select a value from the drop down it immediately resets the focus to the top of the form.
To be clearer I have a drop down menu at the top of the screen and several input fields. The user would have to scroll down to the actual drop down field in order to select it. Once they select the value the page scrolls back to the top.
How can I keep the position the user selected on the form once a user selects a value from the drop down? I've tried nearly everything and I just need some help to get this finished.
Here is ALL my code
JSFiddle
document.addEventListener("DOMContentLoaded", function(event) {
// creates the page dynamically
function GetSelectedItem(){
var option = document.getElementById("locale").value;
}
document.getElementById("locale").addEventListener('change', function(event) {
var selected = event.target.options[ event.target.selectedIndex ].value
console.log(selected);
window.location.hash = selected;
});
});
<div id="country-select">
<form action="" method="get">
<select id="locale" name="locale">
<option value="en_US" title='0'>English(US)</option>
<option value="en_GB" title='1'>English(UK)</option>
<option value="bg_BG" title='2'>Bulgarian</option>
<option value="cs_CS" title='3'>Czech</option>
<option value="da_DK" title='4'>Danish</option>
<option value="de_DE" title='5'>German</option>
<option value="ek_GR" title='6'>Greek</option>
<option value="es_ES" title='7'>Spanish</option>
<option value="et_ET" title='8'>Estonian</option>
<option value="fi_FI" title='9'>Finnish</option>
<option value="fr_FR" title='10'>French</option>
<option value="hu_HU" title='11'>Hungarian</option>
<option value="it_IT" title='12'>Italian</option>
<option value="lt_LT" title='13'>Lithuanian</option>
<option value="lv_LV" title='14'>Latvian</option>
<option value="nl_NL" title='15'>Dutch</option>
<option value="no_NO" title='16'>Norwegian</option>
<option value="pl_PL" title='17'>Polish</option>
<option value="pt_PT" title='18'>Portugese</option>
<option value="ro_RO" title='19'>Romanian</option>
<option value="sk_SK" title='20'>Slovak</option>
<option value="sl_SL" title='21'>Slovenian</option>
<option value="sv_SE" title='22'>Swedish</option>
</select>
<input value="Select" type="submit"/>
</form>
</div>
I know it would have to do with specifically the javascript part of my code.

I think this should work for you, I am just taking the focus away on change.
See fiddle https://jsfiddle.net/jjswhccd/1/
$("select#locale").change(function() {
$("#locale").blur();
});

Fetching HTML input from text and drop down menu in Javascript?

I want to provide users two input mechanisms - text entry and drop down menu by using element. The input value is fetched in javascript. (no php used).
I can make each method work, but not simultaneously.
This is probably fundamental question, but could someone explain how I need to set up event-handlers as well as value for each input to make this work?
<form name="myform" onsubmit="return userInput()">
<select id="myVal" onchange="userInput()" onsubmit="return userInput()">
<option>Select a country</option>
<option value="All Countries">All Countries </option>
<option value="Austrailia">Austrailia</option>
<option value="Korea">Korea </option>
<option value="Austria">Austria </option>
<option value="United States of America">United States of America
</option>
<option value="Japan">Japan</option>
<option value="Canada">Canada </option>
<option value="India">India</option>
</select>
<!-- <input name="Submit" type="submit" value="Add to list" > -->
<input type="text" id="myVal" placeholder="Add some text…">
</form>
// Javascript code where I fetch user input.
function userInput(event){
userinput = document.getElementById("myVal").value
// console.log(userinput)
// console.log(document.getElementById("myVal").value)
//draw(document.getElementById("myVal").value)
d3.select('svg').remove();
main();
console.log("Main has been called")
// draw(document.getElementById("myVal").value)
return false;
}

Both your select element and your text input element have the same ID. Make them unique and make one call for each element in your JS. Also, get rid of the onsubmit event handler attribute in your select element.