Function domForm

Listens for data changes from elements within a HTML form element. Input elements must have a 'name' attribute.

Simple usage:

const rx = Rx.From.domForm(`#my-form`);
rx.onValue(value => {
 // Object containing values from form
});

rx.last(); // Read current values of form
Copy

UI can be updated

// Set using an object of key-value pairs
rx.set({
 size: 'large'
});

// Or set a single name-value pair
rx.setNamedValue(`size`, `large`);
Copy

If an 'upstream' reactive is provided, this is used to set initial values of the UI, overriding whatever may be in the HTML. Upstream changes modify UI elements, but UI changes do not modify the upstream source.

// Create a reactive object
const obj = Rx.From.object({
 when: `2024-10-03`,
 size: 12,
 checked: true
});

// Use this as initial values for a HTML form
// (assuming appropriate INPUT/SELECT elements exist)
const rx = Rx.From.domForm(`form`, { 
 upstreamSource: obj
});

// Listen for changes in the UI
rx.onValue(value => {
 
});
Copy