Get and Set Formyoula Field Values Using the Javascript Elements
In this guide, we will explain how to get and set values of Formyoula form fields. You can access all form fields using the Javascript element to get the values, listen to changes and set new values for the form fields.
Get Field Values
The following example demonstrates how to get your form field values based on the Formyoula field ID or Label.
//Get text field value based on the field label
window.formyoula.form_fields['Text Field'].get('value');
//Get text field value based on the field id
window.formyoula.form_fields['882e-4ba5-c599'].get('value');
The following example demonstrates how to get your form field value using jQuery.
//Get text field value based on the field ID using jQuery
$('#component-06eb-47af-a919 input').val();
Set Field Values
The following example demonstrates how to set field values using the Formyoula field functions.
//Set text field value based on the field label
window.formyoula.form_fields['Text Field'].set({value:'My Text'});
//Set text field value based on the field id
window.formyoula.form_fields['882e-4ba5-c599'].set({value:'My Text'});
The following example demonstrates how to set field values using jQuery.
//Set text field value based on the field ID using jQuery
$('#component-06eb-47af-a919 input').val('My Text').trigger("change");
Listen to Field Value Changes
The following example demonstrates how to listen to form field changes using the Formyoula field functions.
//Listen to changes on the text field
window.formyoula.form_fields['Text Field'].on('all', function(){
//Set the number field value to 0 when the text field value is changed
window.formyoula.form_fields['Number Field'].set( { value: 0 } );
});
The following Javascript example logic listens to changes on a Select list field using jQuery and updates a value on a hidden Formyoula field.
//Listen to Select List changes
$('select').change(function() {
//Set Select List option as value of hidden field
window.formyoula.form_fields['Hidden Field'].set( { value: $( this ).val() } );
});
For any questions, please contact us - support@formyoula.com