插件 jQuery.form serializer 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.form serializer 中文API文档 https://github.com/jillix/jquery-form-serializer

jQuery-form-serializer

Serialize forms to JSON objects in a friendly way.

Example

<form class="form-horizontal demo-form">
    <fieldset>
        <div class="form-group">
            <label class="col-md-4 control-label" for="first-name">First name</label>
            <div class="col-md-5">
                <input id="first-name" data-field="name.first" type="text" placeholder="" class="form-control input-md" required="">
                <span class="help-block">Enter your first name.</span>
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-4 control-label" for="last-name">Last name</label>
            <div class="col-md-5">
                <input id="last-name" data-field="name.last" type="text" placeholder="" class="form-control input-md" required="">
                <span class="help-block">Enter your first name.</span>
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-4 control-label" for="age">Age</label>
            <div class="col-md-5">
                <input id="age" data-convert-to="number" data-field="age" type="number" placeholder="" class="form-control input-md" data-delete-if="0" required="">
                <span class="help-block">How old are you? If you provide <code>0</code>, the <code>age</code> field will be deleted.</span>
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-4 control-label" for="developer">Developer</label>
            <div class="col-md-5">
                <input id="developer" data-field="developer" type="checkbox" data-value="prop" data-params="checked">
                <span class="help-block">How old are you? If you provide <code>0</code>, the <code>age</code> field will be deleted.</span>
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-4 control-label" for="bio">Bio</label>
            <div class="col-md-5">
                <textarea class="form-control" data-field="bio" id="bio" placeholder="Write something cool...">I'm a web developer and pianist from Romania.</textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-4 control-label" for="readonly">Readonly</label>
            <div class="col-md-5">
                <span data-field="readonly" id="readonly" data-value="html">I'm readonly content and my value is taken with <code>data-value="html"</code>.</span>
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-4 control-label" for="submit"></label>
            <div class="col-md-5">
                <button id="submit" class="btn btn-success">Submit</button>
            </div>
        </div>

    </fieldset>
</form>
<script src="path/to/jQuery.js"></script>
<script src="path/to/jQuery-serializer.js"></script>
<script>
    $("form")
        .serializer();
        .on("serializer:data", function (e, formData) {
            alert(JSON.stringify(formData));
        })
        ;
</script>

Documentation

serializer()

Create the form serializer.

Return

  • jQuery The selected elements.

Events

serializer:data :arrow_left:

This event is used to listen for form data.

$("form").on("serializer:data", function (e, formData) {
    /* do something with formData */
});

serializer:submit :arrow_right:

When serializer:submit is triggered, then the form is serializer and the data comes in the serializer:data callback.

$("form").trigger("serializer:submit");

serializer:fill :arrow_right:

By triggering serializer:fill the form is filled with data that is sent.

var formData = { name: { first: "Alice" } };
$("form").trigger("serializer:fill", [formData]);

Attributes

Value Description Default value Required Example
data-field Name of the key from object. No default value. Yes data-field="author"
data-value It's the name of the function how the value will be taken. val No (will take the default value) data-value="text"
data-params Params of jQuery function set as data-value. No default value Not required. data-params="checked"
data-convert-to The data type. Can be one of the following values:
  • string
  • number
  • boolean
  • json
No default value Not required. data-convert-to="boolean"
data-delete-if If provided, the field will be deleted if it's equal with the attribute value. No default value Not required. data-delete-if=""

How to contribute

  1. File an issue in the repository, using the bug tracker, describing the contribution you’d like to make. This will help us to get you started on the right foot.
  2. Fork the project in your account and create a new branch: your-great-feature.
  3. Commit your changes in that branch.
  4. Open a pull request, and reference the initial issue in the pull request message.

License

See the LICENSE file.


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>