Populate Form With Data Object - jQuery formHelper

A form helper jQuery plugin that allows you to dynamically populate a form with given data object or JSON string for AJAX submit.

More features:

• Check all checkboxes with one click.
• Handle checkbox values.
• Submit all data attributes from any clickable element.

Basic usage:

1. Load the jquery.formHelper.js script after you've loaded the latest jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.formHelper.js"></script>

2. Populate your HTML form with given data object or JSON string

var values = {
    username: "aaaa", //simple text
    email: "david@email", //simple text
    check1: "1", //simple checkbox
    check: ["1", 3], //multiple checkbox
    select1: "c", //simple select
    select2: ['a', 'c'] //multiple select
};

$('#myForm').populateForm(values);

3. Make a master checkbox to check all related checkbox inputs.

$('#myForm').checkAll('nameCheckbox', $('#masterCheckbox'));

4. Check checkbox inputs manually.

$('#myForm').checkInput('myCheckbox', ["1", "3"]);

5. Submit all data attributes from a clickable element.

<a href="#" data-id="1121" class="send">Send</a>
<a href="#" data-id="1122" class="send">Send</a>
<a href="#" data-id="1123" class="send">Send</a>

$('.send').clickSubmit();

// ajax submit
var sendAjax = $('.send').clickAjax();
sendAjax.done(function(r){
  console.log('Response: '+r);
});

Changelog:

2020-03-23

• Bugfix

2018-02-08

• use var instead let (browser compatibility)

2017-12-04

• added 'saveAjax' function.

---

This awesome jQuery plugin is developed by davicotico. For more Advanced Usages, please check the demo page or visit the official website.