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? – TrevorBliss 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. – Abhiram Sheshadri 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. – TrevorBliss 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");
| improve this answer | |

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(){
| improve this answer | |
  • 1
    The question is regarding lightning components and not VF – Mohith Shrivastava 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.