How to get set form values?

[jqwidgetsdevParticipant]

Hi,

How do I set the jqxForm values dynamically from a button onclick event?

myFormAccount.value = response;
$(myFormAccount).jqxForm('refresh');

Any suggestions?

Thanks.

[ivanpeevskiParticipant]

Hi,

Please, have a look at the demo here: codesandbox
You can use the getComponentByName method to get or set the value of form elements.
In the demo, the button will first output the original value of the input box and then replace it with “Default”

Best regards,
Ivan Peevski
jQWidgets Team
https://www.jqwidgets.com/

[jqwidgetsdevParticipant]

Ok, thanks Ivan.

However I prefer to set the values directly from JSON. What is the way to do this, is there an example, other than one-by-one through getComponentByName?

Thank you.

[jqwidgetsdevParticipant]

Hi Ivan,

Perhaps some more details. I am using quite a lot of JqxForms (one for each JqxTabs), each JqxForm having its own template. All widgets elements in the templates are named uniquely.

I would like to preload all the values of all the templates in a single shot, using JSON. Possible?

Thanks.

[svetoslav_borislavovParticipant]

Hi,

In the following demo the data to the text input is being loaded via JSON file: codesandbox
To access any input in the form you should use getComponentByName as Ivan suggests. So you can take a look at the example and you can select the values one-by-one because the form encapsulates its components.

Best regards,
Svetoslav Borislavov
jQWidgets Team
https://www.jqwidgets.com/

[jqwidgetsdevParticipant]

Hi Svetoslav,

As said, I prefer to load all the JSON in a single shot and not one-by-one getComponentByName.

There is no way of using something similar to this example, but then using *Vue*?

https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxform/index.htm#demos/jqxform/form_submit.htm?

            var sampleValue = {
                'textBoxValue': 'text box value',
                'passwordBoxValue': 'password box',
                'nubmberBoxValue': 67.44,
                'dropdownValue': 'value3',
                'radiobuttonValue': 'value2',
                'checkboxValue1': false,
                'checkboxValue2': false,
                'checkboxValue3': true,
            };
            var sampleForm = $('#sampleForm');
            sampleForm.jqxForm({
                template: template,
                value: sampleValue,
                padding: { left: 10, top: 10, right: 0, bottom: 10 }
            });

Thanks

[svetoslav_borislavovParticipant]

Hi,

The form’s reference contains the template. In it, you can access the names of the components and store all components in an array. After that, by foreach-ing them you can set the values, so you don`t need to set the values manually. Here is an example of setting the value of every component in the form with a text from a JSON file: https://codesandbox.io/s/white-pine-yjsjz8

Best regards,
Svetoslav Borislavov
jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts