I am populating a text box with data from a select, it works, but

Question

My select consists of two fields and the text field only picks up one of them. Here is my code:

 <script>
        function ProdValue(data) {
           document.getElementById("ProdName").value = data.value;
       }
 </script>

 <select name="ProdName" id="ProdName" onchange ="ProdValue(this)"> 
     <?php
             $sql = "Select * from tblProduct";
             if ($result = mysqli_query($conn, $sql));   
              while ($row = mysqli_fetch_assoc($result)) 
             { 
            echo "<option value='". $row['Brand']."', '".$row['ProductName']."'>".$row['Brand']." ".$row['ProductName']. '</option>';
            }
    ?>
</select>

How can I get ProductName too?

Answer 1

Since your option value contains brand and productname separated by comma, you could do:

function ProdValue(data) {
   var optval = data,
   prod_name = optval.split(",")[1];
   console.log( prod_name ); //here is your product name
   document.getElementById("ProdName").value = optval;
}

Answer 2

use this instead. If both columns are actually defined as NOT NULL, CONCAT() will be quite enough:

 <?php
         $sql = "Select CONCAT(Brand, ProductName) as CombineColumn from tblProduct";
         if ($result = mysqli_query($conn, $sql))
         { 
               while ($row = mysqli_fetch_assoc($result)) 
               { 
               echo "<option value='". $row['CombineColumn']."'>".$row['CombineColumn']."</option>";
               }
          }
?>