The "updateField" method can update the value for every type of field.
The "updateState" method can do that, plus control every property of the form (show / hide fields, inject new fields, alter drop down options options, set a field to be valid / invalid, etc.)
These methods can be run on:
initial load (on: 'load')
after a change to a field (on: 'change')
form submit event (on: 'submit')
form submit successfully processed (on: 'success')
Example showing two plugins using "updateField", updating their respective fields with values from the URL. (Note that the "formFieldId" properties will have to be updated to match the desired fields when implementing this on a new form).
/* Update the email field from URL parameter */
window._nvkForm = window._nvkForm || [];
var nvkUrlParameters = function () {
var query_string = { };
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if ( pair[0] ) {
pair[0] = decodeURIComponent(pair[0]).replace('[]', '');
if ( pair[1] ) {
pair[1] = decodeURIComponent(pair[1]);
}
// If first entry with this name
if (typeof query_string[pair[0]] === "undefined") {
query_string[pair[0]] = pair[1];
// If second entry with this name
} else if (typeof query_string[pair[0]] === "string") {
var arr = [ query_string[pair[0]],pair[1] ];
query_string[pair[0]] = arr;
// If third or later entry with this name
} else {
query_string[pair[0]].push(pair[1]);
}
}
}
return query_string;
}();
if ( nvkUrlParameters.email ) {
window._nvkForm.push({
on: 'load',
updateField: function(fieldData) {
return { formFieldId: 'emailField', newValue: nvkUrlParameters.email };
}
});
}
if ( nvkUrlParameters.fname ) {
window._nvkForm.push({
on: 'load',
updateField: function(fieldData) {
return { formFieldId: 'fnameField', newValue: nvkUrlParameters.fname };
}
});
}
Form callback example on success with specific formId to make sure it only processes for the form in question an not all forms on the page.
window._nvkForm.push({
on: "success",
// Optional; leave blank to apply to all forms
formId: "5cb029a799772861e0f98fe6fda830d3",
callback: function(response) {
// Example response object
/*
{
successurl: "https://envoke.com",
secondStep: {
// This object contains new state information for use internal to the form. New fields, layout, submission logic, etc.
},
contact: {
id: "123456"
}
}
*/
// An example external function passing the contact id from the form submission
window.processEnvokeSubmission(response.contact.id);
}
});
On submit example, checking the format of a phone number
window._nvkForm = window._nvkForm || [];
window._nvkForm.push({
on: 'submit',
updateState: function(currentState) {
var phoneFormId = "e225eb805b5ebdd9a8ced29f02c1cd94";
var phoneValue = currentState['fieldData'][phoneFormId]['value'];
var phonePattern = /^1-\d{3}-\d{3}-\d{4}$/;
if ( !phonePattern.test(phoneValue) ) {
alert("Please enter a valid phone number in the format '1-###-###-####'.");
return true;
}
}
});