The document.getElementById("something").value in my controller on HTML tag with is not working after Locker Service is enabled. I did console.log() and it's returning nothing.

Any idea how to overcome this issue?

Help is very much appreciated.

Thanks, Abhi

HTML markup :

                       <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
                            <select class="form-control picklist" onchange="{!c.filteredProducts}" name="Discount__c" id="discount">
                                <option value="">Discount</option>
                                <option value="10">10</option>
                                <option value="20">20</option>
                                <option value="30">30</option>
                                <option value="40">40</option>

And the javascript function:

filteredProducts: function(component,event,helper) 
    var discount =document.getElementById("discount").value;
  • 1
    Hi Abhiram, will you please share the relevant pieces of HTML markup? Aug 1, 2016 at 22:32
  • You just want to access the DOM element? Then try giving an aura id and then access the same by component.find('auraid').getElement()
    – SE_User
    Aug 2, 2016 at 6:51
  • Hi Trevor, I have added the HTML markup as well as the javascript snippet where I am trying to get the value. Aug 2, 2016 at 11:07
  • @AbhiramSheshadri To follow up, the original issue of 'value' property not being present on the select element is targeted to be fixed in an upcoming patch. Most likely in a week or two. Oct 10, 2016 at 23:45

2 Answers 2


The Lightning way to do this would be to have:


<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
    <ui:inputSelect aura:id="discount" change="{!c.filteredProducts}"  class="form-control picklist">
        <ui:inputSelectOption text="" label="Discount" />
        <ui:inputSelectOption text="10" label="10" />
        <ui:inputSelectOption text="20" label="20" />
        <ui:inputSelectOption text="30" label="30" />
        <ui:inputSelectOption text="40" label="40" />


filteredProducts: function(component, event, helper) {
    var discount = component.find("discount").get("v.value");

Do something like this it's may help you:

      <select id='SelectId' onchange='changeVal()'>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="opel">Opel</option>
          <option value="audi">Audi</option>

        function changeVal(){
  • 1
    The question is regarding lightning components and not VF Aug 1, 2016 at 11:40

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .