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 '16 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 '16 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 '16 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 '16 at 23:45

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 '16 at 11:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.