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">

JavaScript to set datalist by <input list="value"> for HTML5 on input/selection of value in another form

I am creating my first Web Form and I'm looking for a little help getting this JavaScript Function to work for me.
I am trying to use a JavaScript function to specify which datalist to use for a form input list=" " based on the selected value of a separate form. As you can see below I have supplied the first form (which I intend to 'fire' the JavaScript and input the variable) and the second form which should have the input list=" " value set by the script. In the first form I have used two different events simply to figure out which is the appropriate: onselect= and onchange=.
I greatly appreciate any help or comments.
Here is my code, I have approached this quite a few different ways and at this point it exists as:
<form>
Tendon Type: <input list="tendontype">
<datalist id="tendontype">
<option value="Cantilever" onselect="locationScript('ct')">
<option value="Drape" onchange="locationScript('ut')">
<option value="Span">
</datalist>
</form>
<form name="location">
Location: <input id="loc229" list="need js to insert here"><br />
<datalist id="pier">
<option value="Pier EN-1">
<option value="Pier EN-2">
</datalist>
<datalist id="unit">
<option value="Unit EN-2">
<option value="Unit EN-3">
</datalist>
<datalist id="span">
<option value="Span EN-1">
<option value="Span EN-2">
</datalist>
</form>
<script>
function locationScript(x) {
var locationlist;
if (x == 'ct') {
locationlist = setAttribute("list","pier")
} else {
if (x == 'ut') {
locationlist = setAttribute("list","unit")
} else {
locationlist = setAttribute("list","span")
}
}
document.getElementById("loc229").locationlist;
}
</script>

concatenating select menus into a single form input

I have a text input as follows:
<input class="input-large" form="form" type="text" name="product_data[product]" id="product_description_product" value="{$product_data.product}" />
Unfortunately I want the information entered into this field to be very specific. The best solution I can think for this, is to provide 3 drop down menus with a range of options.
I can edit the HTML and add JavaScript as necessary, but can't edit the form processing script or the database, so the value I need to get back from the 3 select menus needs to be concatenated into a single form field value.
What do you reckon?
I think I almost have it but it isn't working. I would copy the whole form but it is very long and hopefully this bit is the only bit needed
<form>
<input form="form" type="hidden" name="product_data[product]" id="product_description_product" value="{$product_data.product}" />
<script type="text/javascript">
$(all_three_select_tags).change(function(){
concatenated_string = $(#product_description_product_1).val() + $(#product_description_product_2).val() + $(#product_description_product_3).val();
$("#product_description_product").val(concatenated_string);
})
</script>
<select id="product_description_product_1">
<optgroup label="Box size">
<option value="Extra small">Extra small</option>
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="Extra Large">Extra Large</option>
</optgroup>
</select>
<select id="product_description_product_2">
<optgroup label="Speciality">
<option value="organic">organic</option>
<option value="seasonal">seasonal</option>
<option value="locally grown">locally grown</option>
<option value="exotic">exotic</option>
<option value="gourmet">gourmet</option>
</optgroup>
</select>
<select id="product_description_product_3">
<optgroup label="Type of box">
<option value="veg box">veg box</option>
<option value="fruit box">fruit box</option>
<option value="fruit & veg box">fruit & veg box</option>
</optgroup>
</select>
</form>

I'm going to try to update this based on the code you provided. Your script tag contents should be this:
<script type='text/javascript'>
$("#product_description_product_1, #product_description_product_2, #product_description_product_3").change(function(){
concatenated_string = $("#product_description_product_1").val() + $("#product_description_product_2").val() + $("#product_description_product_3").val();
$("#product_description_product").val(concatenated_string);
})
</script>
Also your hidden field tag should look something like this (I'm assuming the top line, of the second block of code, was intended to be the hidden field):
<input type='hidden' value='' id="product_description_product">
Here is a jsfiddle with this an example as well http://jsfiddle.net/eNNZX/
Please keep in mind the div with id "temp_display" is not required, its only so you can see the value after each change.
This way anytime any of the selects are changed the hidden input is updated with the concatenated version of all 3. Then when you submit the page, just look at the parameter referencing the hidden input for your desired value.
Hope this helps!

HTML Reset form including select element with selected='selected'

I have a table page with html filters in a form at the top. When the form is submitted, the selected filters are applied to the SQL query, and the filters all gain selected='selected' on the value that was selected. I want a reset button that resets these to the first value of the selection, not that specified in the incoming code.
Does that make sense?
For example, if the HTML was :
<select name='minTV'>
<option value=0>Min TV 0</option>
<option value=1000>Min TV 1000</option>
<option value=1100>Min TV 1100</option>
<option value=1200>Min TV 1200</option>
<option value=1300 selected='selected'>Min TV 1300</option>
<option value=1400>Min TV 1400</option>
<option value=1500>Min TV 1500</option>
<option value=1600>Min TV 1600</option>
<option value=1700>Min TV 1700</option>
</select>
Now, when I hit the reset button, I want the first value, value=0, to be the selected one, not value=1300, as happens by default. I need to do this over several select boxes.
Any ideas? As simple as possible please.
No jQuery, but Prototype is fine.
EDIT, in response to answer #1:
I can't seem to get this one to work; my select is :
<select name='div' id='divSelect'>
<option value=0>All Divisions</option>
<option value=1 >Premiership East</option>
</select>
My reset button is:
<button type="reset" value="Reset" onclick="return resetAll();">Reset</button>
And my javascript function is:
function resetAll() {
document.getElementById('divSelect').selectedIndex = 0;
}
Any ideas?

You can give an id to your select tag for example id="selectbox" Then you can change the selected value with the following Javascript code:
document.getElementById('selectbox').selectedIndex = 0;
Note that you have to enter the number of the option, so for example for value=1000 you would enter selectedIndex = 1;
function resetAll() {
document.getElementById('divSelect').selectedIndex = 0;
};
<select name='div' id='divSelect'>
<option value=0>All Divisions</option>
<option value=1 selected>Premiership East</option>
</select>
<button type="reset" value="Reset" onclick="return resetAll();">Reset</button>
see on JSFiddle.net

document.getElementById('divSelect').selectedIndex = -1;