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

Question

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.

Nebster · Accepted Answer · 2019-07-25 12:00:27Z

1

<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

answered Jul 25, 2019 at 12:00

Nebster

9142 gold badges11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kryptur · Accepted Answer · 2019-07-25 11:56:28Z

0

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>

answered Jul 25, 2019 at 11:56

Kryptur

7557 silver badges17 bronze badges

Comments

Sachin Vishwakarma · Accepted Answer · 2019-07-25 12:05:02Z

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.

Vinod Bokde · Accepted Answer · 2019-07-25 12:10:07Z

0

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.

answered Jul 25, 2019 at 12:10

Vinod Bokde

3382 silver badges14 bronze badges

Comments

Aimal Khan · Accepted Answer · 2019-07-25 12:11:12Z

0

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;

}

answered Jul 25, 2019 at 12:11

Aimal Khan

4492 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related