how to call javascript variable in HTML form textfield

Question

I have this script, the idea is to select from the drop down list and then display the selected value in a text field (HTML Form). When i make the selection, I do not get the value displayed in the text field, please help.

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction()">
    <option value="Audi">Audi
    <option value="BMW">BMW
    <option value="Mercedes">Mercedes
    <option value="Volvo">Volvo
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>

<input type="text" id="demo" onload="myFunction()" >



<script>
    function myFunction() {
        var x = document.getElementById("mySelect").value;
        document.getElementById("demo").innerHTML = x;
    }

</script>

I had commented it out to call the variable in the <input element — Harold Chintembo
– Harold Chintembo, Commented Feb 2, 2019 at 7:57

Brad · Accepted Answer · 2019-02-01 14:55:00Z

2

Uncomment  and it works fine.

  function myFunction() {
        var x = document.getElementById("mySelect").value;
        document.getElementById("demo").innerHTML = x;
    }

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction()">
    <option value="Audi">Audi
    <option value="BMW">BMW
    <option value="Mercedes">Mercedes
    <option value="Volvo">Volvo
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>

<p id="demo"></p>

answered Feb 1, 2019 at 14:55

Brad

8,80811 gold badges48 silver badges54 bronze badges

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

1 Comment

Harold Chintembo Over a year ago

I had commented it out to call the variable in the <input element. I have edited my question to show exactly what i wanted.

Aroop Nanda · Accepted Answer · 2019-02-01 14:57:07Z

0

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction()">
    <option value="Audi">Audi
    <option value="BMW">BMW
    <option value="Mercedes">Mercedes
    <option value="Volvo">Volvo
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>


<p id="demo"></p>
<!--<p id="demo"></p>-->



<script>
    function myFunction() {
        var x = document.getElementById("mySelect").value;
        document.getElementById("demo").innerHTML = x;
    }

</script>

You had not created a text field or any other element with the id "demo".

answered Feb 1, 2019 at 14:57

Aroop Nanda

134 bronze badges

1 Comment

Harold Chintembo Over a year ago

I have this line right after the closing tag of script, <input type="text" id="demo" value="">

Hussnain Ali Hamza · Accepted Answer · 2019-02-02 13:08:58Z

0

you can use, the following script that is in jquery to do this job,,

    $(function(){
    var select_value = $('#mySelect').find(":selected").val();
     $("#demo").text(select_value);
     });

//in javascript, this might work

function myFunction() {

    var x = document.getElementById("mySelect").find(":selected").value;
    document.getElementById("demo").innerHTML = x;
    document.getElementById("id_of_text_field_input").value = x;

}

edited Feb 2, 2019 at 13:08

answered Feb 1, 2019 at 14:56

Hussnain Ali Hamza

163 bronze badges

2 Comments

Harold Chintembo Over a year ago

This works, but in a paragraph element, but i want it to be displayed in a textfield

Hussnain Ali Hamza Over a year ago

you can use following code for this job, function myFunction() { var x = document.getElementById("mySelect").find(":selected").value; document.getElementById("id_of_text_field_input").value = x; }

Collectives™ on Stack Overflow

how to call javascript variable in HTML form textfield

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related