Playing with Nextgen apps and as pointed out by @StephenChapman setting field values in Javascript is a different beast than in classic apps. this is a cornerstone of the complex apps we’ve been running for nearly 10 years in Knack and I’m certain is crucial for other builders here.
If this field doesn’t receive focus at all and the form is submitted the field remains blank. Trial and error showed a different story if the field ever received user focus, so…
What does work
let field = document.querySelector('input#view_7-field_16');
field.value = "TEST";
field.focus();
Why and what’s next - help from coders
I’m assuming setting the focus changes the field or form state somewhere that is different to setting the value in the DOM (which was enough in Classic apps). I’m not formally IT trained so I don’t know enough, and AI suggests weird workarounds including using dispatchEvents for Input and Change but for every field likely to be impacted.
And I’m certain we don’t want to run .focus() for every field set with less than ideal UI impacts.
Perhaps some sort of Form method is available that bubbles DOM changes up to set the state?
I believe it relates to the issue we discussed in this thread. I’ve just logged a ticket, so hopefully we’ll get answers as to whether it’s a bug or intentional, and whether there is a hidden method we can use.
Hi Team,
I’m trying to update an input value using JS using something like: document.querySelector('input#view_11-field_38_street').value = '123 TEST ST';
This value does not persist when switching to another input on the form or submitting the form.
I can see using this new method Knack.page.getForm('view_11').getValues() that the value is not being updated after setting it via JS.
Here is a video I recorded recently from this forum thread to show you the behaviour. 2025-12-03, Knack, Next-Gen Input Change Via JS.mp4
I’m curious to know if it will still be possible to update input values using JS, or if there is another method that should be used. Thanks.
@StephenChapman trialed ways to dispatchEvents without success FYI:
// Function to sync all fields in a specific Knack view
const syncKnackForm = (viewId) => {
const viewElement = document.getElementById(viewId);
if (!viewElement) return;
// Select all common input types
const inputs = viewElement.querySelectorAll('input, textarea, select');
inputs.forEach(input => {
// Trigger both 'input' and 'change' to cover all React listener variations
input.dispatchEvent(new Event('input', { bubbles: true }));
input.dispatchEvent(new Event('change', { bubbles: true }));
});
};
Not just yet. @Kara?
There were some exciting developments for some new Next-Gen functions that will populate form fields without needing to target the element.
There’s still a few glitches though, as the set values are not being updated live on the form, and setting some field types isn’t working as expected.
Here’s an example:
Knack.ready().then(async () => {
Knack.on('page:render', () => {
const form = Knack.page.getForm('view_38');
if (!form) return;
form.setValue('field_1', 'Project A'); // Text
form.setValue('field_2', 25); // Number
form.setValue('field_3', { first: 'Stephen', last: 'Chapman' };
form.onFormChange = ({ changedFieldKey, changedValue }) => {
if (changedFieldKey === 'field_1') {
// Do something when field_1 changes
}
};
form.onBeforeSubmit = ({ values, errors }) => {
if (values['field_55']) {
return true; // Allow form to be submitted
} else {
form.setError('field_55', {
message: 'This value is required!'
});
return false; // Prevent form being submitted
}
};
});
});
