How To Fill-Up a particular field of HTML form Based On dropdown selection made-CodePudding

Any way of making this code work with a select dropdown instead of a button? I am trying to use this to fill in a address from a dropdown and allow the user to modify as needs are needed.

<HEAD>
    <TITLE>Test</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
      function testResults (form) {
      var TestVar1 = form.input[0].checked;
      var TestVar2 = form.input[1].checked;
        if (TestVar1 == true) {
          form.textbox.value = "Full Home Automation Package";
        } else if (TestVar2 == true){
          form.textbox.value = "Some Other Package";
        } else if (TestVar1 == false && TestVar2 == false) {
          form.textbox.value = "";
        }
      }
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="POST">Choose a Service: <BR>
  <INPUT TYPE="radio" NAME="input" VALUE="red" onChange="testResults(this.form)">Service 1<P>
  <INPUT TYPE="radio" NAME="input" VALUE="blue" onChange="testResults(this.form)">Service 2<P>
  <P>Service Package Selected:</P> <INPUT TYPE="text" ID="textbox" NAME="selected" VALUE=""></div><p>

</FORM>
</BODY>

thanks for any help

CodePudding user response：

You can use onchange on select and then if the value matches change the text of the input.

    <!DOCTYPE html>
<html>




<HEAD>
    <TITLE>Test</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
        function testResults(value) {
            let textbox = document.getElementById("textbox");

            if (value === '') {
                textbox.value === '';
            } else if (value === 'service1') {
                textbox.value = 'Full Home Automation Package';
            } else if (value === 'service2') {
                textbox.value = "Some Other Package";
            }
        }
    </SCRIPT>
</HEAD>

<BODY>
    <FORM NAME="myform" ACTION="" METHOD="POST">Choose a Service: <BR>
        <select onchange="testResults(value)" name="service">
            <option disabled selected>Choose one</option>
            <option value="service1">service1</option>
            <option value="service2">service2</option>
        </select>
        <P>Service Package Selected:</P> <INPUT TYPE="text" ID="textbox" NAME="selected" VALUE=""></div>
        <p>

    </FORM>
</BODY>

</html>