帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

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

帝国模板之家 2020-11-28 网页特效 评论

插件介绍

这是一款轻量级的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');
只要可以深入到所处的环境,相信美好一定会从那里产生。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言