how I can get the value from datalist

Question

I'm having a problem on getting the customer's name. I have this code on php

<label>Select Customer :</label>
<input list="customer_list" id = "s_cust" name = "s_cust" type="text" onblur ="setCustName();">
<label id="cust_name" name = "cust_name"></label>
<datalist id="customer_list">
<?php
    $result= $mysqli->query("SELECT * FROM tbl_customers");
    while ($row = $result->fetch_assoc()) {
        echo "<option value = 
".$row['CustomerID'].">".$row['FirstName']." ".$row['MiddleName']." 
".$row['LastName']."</option>";
    }
?>
</datalist>

and I have a javascript

function setCustName() {
  document.getElementById('cust_name').innerText = document.getElementById('customer_list').value;
}

I want to do is get the selected value based on the datalist. I tried this code but giving me undefined data. Help me Guys.

Have a look [here](https://stackoverflow.com/questions/610336/retrieving-the-text-of-the-selected-option-in-select-element) — Jeffrey, Sep 02 '17 at 13:12
document.getElementById('cust_name').innerText = document.getElementById('customer_list').value; here sir — jay r bayog, Sep 02 '17 at 13:13
@Jeffrey I did have a look, and it didn't solve my problem, the text on my is the id of the customer. I need to get the Name. — jay r bayog, Sep 02 '17 at 13:16
yes, the value will be on the `s_cust` that is right. but what i did on my code is ; I need to get the name — jay r bayog, Sep 02 '17 at 13:32

Niklesh Raut · Accepted Answer · 2017-09-02T13:38:21.727

Use s_cust instead of customer_list, Actually you are putting value to the element whose id is s_cust

function setCustName()
{
  var val = document.getElementById('s_cust').value;
  if(val.trim() != ""){
      var opts = document.getElementById('customer_list').childNodes;
      for (var i = 0; i < opts.length; i++) {
        if(opts[i].value !== undefined){
          if (opts[i].value === val) {
              document.getElementById('cust_name').innerText = opts[i].innerText;
            break;
          }
        }
      }
    }else{
        document.getElementById('cust_name').innerText = "";
    }
}

<label>Select Customer :</label>
         <input list="customer_list" id = "s_cust" name = "s_cust" 
type="text" onblur ="setCustName();">
        <label id="cust_name" name = "cust_name"></label>
        <!-- <input list="browsers"> -->

<datalist id="customer_list">
  <option value = "11" onclick="alert('test')"> Internet Explorer </option>
  <option value = "12"> Firefox </option>
  <option value = "13"> Chrome </option>
</datalist>

but that just give me the text of `s_cust`, I need to get the `innerText` of the selected value on customer_list — jay r bayog, Sep 02 '17 at 13:24

how I can get the value from datalist

1 Answers1