How to set value to UI component hidden field using Jquery or Javascript

[Patel_Chirag]

I want to fill value in to ui component hidden field using Jquery or Javascript.

Below is my code.

Namespace/Modulename/view/adminhtml/ui_component/sampleimageuploader_image_form.xml

<field name="image_data">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">number</item>
                    <item name="label" xsi:type="string" translate="true">Image Data</item>
                    <item name="formElement" xsi:type="string">hidden</item>
                    <item name="source" xsi:type="string">image</item>
                    <item name="dataScope" xsi:type="string">image_data</item>
                </item>
            </argument>
        </field>

I have included custom JS in my module and it's working fine.

I have tried using this $('input[name="image_data"]').val(Data);  and it is set value to hidden field. and value will be showing like below.

<input class="admin__control-text" type="hidden" data-bind="
        value: value,
        hasFocus: focused,
        attr: {
            name: inputName,
            placeholder: placeholder,
            'aria-describedby': noticeId,
            id: uid
    }" name="image_data" aria-describedby="notice-IDBKWA1" id="IDBKWA1" value="39.375,51,169.625,169.625">

Value is fill complate (You can check above my value is like this 

value="39.375,51,169.625,169.625"

) but when i submit form value is not store in to database because when i print post data value is getting blank, i don't understand why this value is getting blank? does anything i am missing or something is wrong in my code. please help to solve out my problem. Thanks!

[Rakesh Jesadiya · Accepted solution]

When you use ui_components for a Create Form in backend, Your form will be render using knockout template,

Now when you updates any field using jQuery and set value using jquery val() function, at that time they will not work without using change()  at end of your line,

When you update value using jquery in knockout template you need to set your value like below way,

$('input[name="image_data"]').val(Data).change();

Hope using above way, Its works for you.

[Theodor Hanu]

I assume you are using requirejs. 

So, a better "magento way" is to use uiRegistry to get the javascript component and set it's value: 

require('uiRegistry').get('index  = image_data').value('your value');

or

require('uiRegistry').get('sampleimageuploader_image_form.sampleimageuploader_image_form.my_fieldset.image_data').value('[custom value here]')

But be aware that the component must be initialized before using the above code

[snahtaseve39d4]

Hi,

You need to use change() function after val() called. When you used val() of jquery in knockout context at that time you need to use below syntax,

$('input[name="image_data"]').val(Data).change();

[vijayasanaf1da]

Hello,

I think you need to just change() function after val() called. When you used val() of jquery in knockout context at that time you need to use below syntax,

$('input[name="image_data"]').val(Data).change();

Full Stack Developer Course with placement