# `userData` action The UserData option aims to enable formRender to both capture the form data before posting to the server and as well as inject the data into the controls. ## Usage 1. Setup formRender with base definition as normal

var formRenderOptions = {
  formData: '[{"type":"text","label":"Text Field","name":"text-1526099104236","subtype":"text"}]';
}
var formRenderInstance = $('#render-container').formRender(formRenderOptions);

1. After the user has entered data into the rendered form, their data is accessible from `formRenderInstance.userData` or `$('#render-container').formRender('userData')`

console.log(formRenderInstance.userData);
// "[{"type":"text","label":"Full Name","name":"text-1526099104236","subtype":"text","userData":["John Smith"]}]"

UserData works for autocomplete, select, checkbox-group, radio-group, text, email, color, tel, number, hidden, date, textarea, textarea-tinymce. For fields that have an "other" option, a value that is not in the pre-defined values is assumed to be the "other" value.

var formData = '[{"type":"checkbox-group","label":"Checkbox Group","name":"checkbox-group-1526095813035","other":true,"values":[{"label":"Option 1","value":"option-1"},{"label":"2","value":"2"}],"userData":["option-1","Bilbo \\\"baggins\\\""]}]';

var formRenderOptions = {formData};
var frInstance = $('#renderMe').formRender(formRenderOptions);

A common use case for userData would be to create a form, save the input data from the form into a database, and then refresh the page with the saved data. Simply stringify userData when posting. 1. Capture form data


    $.ajax({
    type: "POST",
    url: url,
    data: JSON.stringify(frInstance.userData)
    });

2. Send the saved JSON data back into formRender to display data


  var fbOptions.formData = {SavedJsonFromDatabase};
  var frInstance = $('#renderMe').formRender(fbOptions);

## Demo

See the Pen