jquery将表单数据转化为JSON格式插件

演示  website 下载

插件介绍

这是一款轻量级的jquery表单插件，在提交时将表单字段及其值转换为JSON对象。您可以通过发送HTML表单的数据直接保存JSON数据。

使用方法

1. 在html页面中加载插件文件。

<script src="jquery.min.js"></script>
<script src="form-to-json.js"></script>

2. 将表单域添加到网页，如下所示。支持的表单数据：

• id
• firstname
• lastname
• email
• phone
• subject
• comments
• createdDate

<form id="myForm">
  <div class="form-row">
    <label for="firstname">First Name: *</label><br />
    <input type="text" name="firstname" id="firstname" placeholder="First Name" required>
  </div>
  <div class="form-row">
    <label for="lastname">Last Name: *</label><br />
    <input type="text" name="lastname" id="lastname" placeholder="Last Name" required>
  </div>
  <div class="form-row">
    <label for="email">Email: *</label><br />
    <input type="email" name="email" id="email" placeholder="Email" required>
  </div>
  <div class="form-row">
    <label for="phone">Phone: *</label><br />
    <input type="phone" name="phone" id="phone" placeholder="Phone" required>
  </div>
  <div class="form-row">
    <label form="subject">Subject: *</label><br />
    <input type="text" name="subject" id="subject" placeholder="Subject" required>
  </div>
  <div class="form-row">
    <label for="comments">Comments:</label><br />
    <textarea name="comments" id="comments" rows="6"></textarea>
  </div>
  <div class="form-row">
    <input type="submit" name="submit" value="Submit">
  </div>
</form>

3. 创建一个容器来保存结果（JSON对象）。

<p class="result-json-output"></p>

4. 初始化插件并在表单提交时输出结果。

$('#myForm').formToJson('.result-json-output');