Setting a field value in Nextgen with Javascript

API & Custom Code Ask Developers
1

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.

What doesn’t work

Inside a view or scene render event:

document.querySelector('input#view_7-field_16').value = "TEST";

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?

2

Hey @BradStevens,

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.

1 Like
3

@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 }));
    });
  };