IMG

BunnyJS Form component

Modern dynamic JavaScript form processing was never so easy

BunnyJS Form component:

Form 1

This form ID is form1
This input name is name
This input name is email
This input name is gender
This is file input. It includes blob, file size, file type, etc. This input name is photo
Set photo from URL
Open console in browser and try:
  • Type any text in inputs above and try Form.getAll(form_id)
  • Or Form.get(form_id, input_name) to get only one
  • Form.set(form_id, input_name, value) which also updates input value and mirrors (bindings)
  • You can also set new virtual inputs, try Form.set('form1', 'custom', 'Hello, World!')
  • And now Form.getAll('form1') again
  • This data will be sent via ajax using Form.submit(form_id)
  • Ever wanted to set your input type="file" ... to any file by URL from JavaScript and keep back-end file processing without changes?
  • Images can be previewed instantly
  • Works perfect with BunnyJS Validation

Form 1 mirrors (two-way data bindings)

Update fields in Form 1 to change contents also of mirrored (bound) elements automatically. Mirrors updated on focus out.

Or update field from JS with Form.set(form_id, input_name, value);

All elements with attribute data-mirror="form_id.input_name" are updated when input value changed by user or from JS.

Name:
E-mail:
E-mail within text:

Invoice information was sent to