Q:

how to use a javascript variable inside html tag

I have a form in this There are two field One is Search and other is Option When i select any value from Search field the value of Option field will change.Value of Second field are different datalist defines as datalist1,datalist2,datalist3.....I want the value given in List attribute of Second filed to be same as the variable value in java script.i Tried the following code this code is not giving any output.

  

  function random() {
      var a = document.getElementById('search').value;
      if (a === "sampleid") {
        var datalist = datalist1;
      } else if (a === "facility") {
        var datalist = datalist1;
      } else if (a === "user") {
        var datalist = datalist3;
      } else if (a === "affiliation") {
        var datalist = datalist4;
      } else if (a === "status") {
        var datalist = datalist5;
      } else if (a === "btr") {
        var datalist = datalist6;
      } else if (a === "type") {
        var datalist = datalist7;
      }

      document.getElementById('option').innerHTML = datalist;

    }
    <form class="form-inline" method="post" action="search-sample.php">
      <div class="col-md-5" align="center">
        <label class="search">SEARCH BY-</label>
        <select type="text" name="SEARCH" id="search" class="form-control" onchange="random()">
          <option value="SELECT TYPE">SELECT TYPE</option>
          <option value="sampleid">SAMPLE-ID</option>
          <option value="facility">FACILITY</option>
          <option value="user">USER NAME</option>
          <option value="affiliation">AFFILIATION</option>
          <option value="status">STATUS</option>
          <option value="btr">BTR</option>
          <option value="type">SAMPLE TYPE</option>
          <option value="date">DATE</option>

        </select>
      </div>
      <div class="col-md-5" align="center">
        <label class="search">OPTION</label>
        <input type="text" class="form-control" id="option" name="facility" list=< ?php echo "datalist" ?> />
      </div>
    <datalist id="datalist1"> 
 
 <option value=""> </option>
 <?php 
 $sql = "SELECT * from  tblfacility order by sampleid asc";
 $query = $dbh -> prepare($sql);
 $query->execute();
 $results=$query->fetchAll(PDO::FETCH_OBJ);
 $cnt=1;
 if($query->rowCount() > 0)
 {
 foreach($results as $result)
 {               ?> 
     <option value="<?php echo htmlentities($result->sampleid);?>"><?php echo htmlentities($result->sampleid);?></option>
  <?php }} ?>
 </datalist>

A:

Here is what you need to do.

Use quotes around the IDs of the datalists
Use setAttribute of the list attribute of the input

function random() {
  var a = document.getElementById('search').value,
    datalist = "datalist1";
  if (a === "sampleid") {
    datalist = "datalist1";
  } else if (a === "facility") {
    datalist = "datalist1";
  } else if (a === "user") {
    datalist = "datalist2";
  } else if (a === "affiliation") {
    datalist = "datalist3";
  } else if (a === "status") {
    datalist = "datalist1";
  } else if (a === "btr") {
    datalist = "datalist2";
  } else if (a === "type") {
    datalist = "datalist3";
  }
  
  const inp = document.getElementById('option');
  inp.value="";
  inp.setAttribute("list", datalist)

}
<form class="form-inline" method="post" action="search-sample.php">
  <div class="col-md-5" align="center">
    <label class="search">SEARCH BY-</label>
    <select type="text" name="SEARCH" id="search" class="form-control" onchange="random()">
      <option value="SELECT TYPE">SELECT TYPE</option>
      <option value="sampleid">SAMPLE-ID</option>
      <option value="facility">FACILITY</option>
      <option value="user">USER NAME</option>
      <option value="affiliation">AFFILIATION</option>
      <option value="status">STATUS</option>
      <option value="btr">BTR</option>
      <option value="type">SAMPLE TYPE</option>
      <option value="date">DATE</option>
    </select>
  </div>
  <div class="col-md-5" align="center">
    <label class="search">OPTION</label>
    <input type="text" class="form-control" id="option" name="facility" list="" />
  </div>
  <datalist id="datalist1">
    <option value="A"> </option>
    <option value="B"> </option>
    <option value="C"> </option>
    <option value="D"> </option>
  </datalist>
  <datalist id="datalist2">
    <option value="AA"> </option>
    <option value="BB"> </option>
    <option value="CC"> </option>
    <option value="DD"> </option>
  </datalist>
  <datalist id="datalist3">
    <option value="AAA"> </option>
    <option value="BBB"> </option>
    <option value="CCC"> </option>
    <option value="DDD"> </option>
  </datalist>
</form>

