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


Feedback and Knowledge Base