Set form values with javascript: not saved

Question

in my admin edit form I set an input field value with a javascript function. The function works and the value is displayed in my input field.

My problem is, that when I save the edit page, Magento ignore the setted value. How can I tell Magento to save my javascript value.

Thats my javascript code inside:

document.addEventListener('readystatechange', event => {

if (event.target.readyState === "complete") {
 setTimeout(function(){
 if(document.getElementsByName("material_id")[0].value == "0"){
 var materialId = "<?php echo $parentId; ?>"
 var a = document.getElementsByName("material_id");
 a[0].value = materialId;
 }
 }, 3000);
}

});

As below described, the value is setted, but magento does not save the value.

Thanks for help.

Christian

• Sukumar Gorai: Can you update your form and controller action code to your question?
• Zankar: You should post some code specifically how you set the values using JS
• AnkitK: Is the value you are setting being sent to the server in edit request?
• Dr. Christian Kusche: I have updated my question, see above. Thanks

Answer 1

Older question, but maybe the answer helps someone who stumbles upon this question.

The Magento 2 admin forms are build using Knockout JS. The input fields of the form are bound to a view model via Observables. Changing the value of an input field will not change the view model of the admin form. In order to get the view model updated, you can trigger a "change" event on the respective input field.

The following code example should show the principle:

define(['jquery'], function ($) {
 'use strict';
 let $input = $('#input_id');
 $input.val('new value');
 $input.trigger('change'); // this will update the Observable
};

Triggering the change event manually on the input field will reflect the change in the view model and it will be persisted when submitting the form.

Answer 2

I have the same issue when editing the control with JavaScript the value is not saved, and I could solve it by invoke the change event on the text field.

var DiscountControl_text = $('#someId');
DiscountControl_text.val(0);
DiscountControl_text.change();

This change method Update the Observable so the value is saved