1

I need to set a value of the textbox using a JAVASCRIPT function after the page has been rendered. I tried by getting an ID of the textbox, but it keeps on changing on every load. Is there any possible way to set the value of text box? It's likely I'm creating like an extension which I need to set the value of input and select field.

I tried Queryselctor. example :

getElementsByTagName('input')1.value = "testRecord";

It sets the value of last name in contact form and feels like it worked. When I click on save, it just empty it and showing as mandatory! But when i type some thing in textbox and then i use my function to set value, it worked.

This is the code generated by sales force. 

 <div data-aura-rendered-by="14996:0" class="uiInput uiInputText uiInput--default uiInput--input" data-aura-class="uiInput uiInputText uiInput--default uiInput--input">
        <label class="uiLabel-top form-element__label uiLabel" for="14981:0" data-aura-rendered-by="14991:0" data-aura-class="uiLabel">
            <span class="" data-aura-rendered-by="14992:0">Last Name</span>
            <!--render facet: 14994:0-->
            <span class="required " data-aura-rendered-by="14982:0">*</span>
        </label>
        <input class="compoundBLRadius compoundBRRadius form-element__row input" maxlength="80" type="text" aria-describedby="" placeholder="Last Name" required="" id="14981:0" data-aura-rendered-by="14985:0" data-interactive-lib-uid="242" aria-required="true">
 </div>

I have attached Images for your reference.

Setting value of textbox from console

Value Updated in form

Value successfuly set in text box.

seting value from console

After clicking save button, the textbox fild become empty and shows mandratory error!

after clicking save showing error

Thanks in advance.

ganesh
  • 859
  • 6
  • 13
  • 29

2 Answers2

0

You can use querySelector to get the item via CSS selectors (class name for example) then you can update the value of the text input. Make sure the document DOM is loaded before you call this function

Edit: Seems some pepole faced the same issue, a solution suggestes to do:

document.getElementById('{!$Component.formName.pInput1}').value = "test";
Community
  • 1
  • 1
Tareq
  • 5,283
  • 2
  • 15
  • 18
  • I tried this already. for example : It sets the value of last name in contact form and feels like it worked. When I click on save, it just empty it and showing as mandatory! :-( – ganesh Nov 14 '16 at 13:45
  • Can you paste the HTML to jsfiddle or so ? – Tareq Nov 14 '16 at 23:38
  • here the problm is, when we call *{!$Component.formName.pInput1}* in apex, it works. When we call this after render it didnt worked. – ganesh Nov 15 '16 at 10:13
0

Using InspectElement in the browser console you can check the position of the textbox you're trying to get hold of and create a CSS selector that can be used in JavaScript's document.querySelector() function. Opt for the consistent parent that doesn't change everytime. For example if your textbox appears inside a div with class xyz like this:

<div class="xyz">
    <input name="changingname" />
</div>

You can make the selector like this:

var ele = document.querySelector('.xyz>input');

And then you can set whatever value you want like this:

ele.value = "your value";
owaisafaq
  • 523
  • 4
  • 7