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

Question

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 in inspect element.

<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.

Is this possible to archive this using knockout js, if yes then how?

Any help would be Appreciated!

Answer 1

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();

• Eugen Bogdanovich: how did you know that? :)