如何使用jquery创建每个输入值的JSON

how to Creating JSON each input value using jquery

本文关键字：输入 JSON 何使用 jquery 创建      更新时间：2023-09-26

我想以JSON格式打印一些数据供其他应用程序使用。我应该如何构造Javascript对象来动态创建JSON格式。

这是我的HTML代码：

<div class="col-sm-6">
    <div class="form-group">
        <input type="text" class="form-control" name="frstname" data-conv="json">
        <input type="text" class="form-control" name="lastname" data-conv="json">
        <select name="gender" class="form-control" data-conv="json">
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select>
        <input type="date" class="form-control" name="dob" data-conv="json">
        <input type="text" class="form-control" name="email" data-conv="json">
    </div>
    <div class="form-group">
        <button type="button" class="btn-action" class="btn btn-default">Create</button>
    </div>
</div>

我尝试了以下Jquery代码：

$(document).ready(function(){
    $('.btn-action').on('click', function(){
        var jsonObj = [];
        $("input[data-conv=json]").each(function() {
            var firstname = $(input[name=frstname]).val();
            var lastname  = $(input[name=lastname]).val();
            var gender    = $(input[name=gender]).val();
            var dob       = $(input[name=dob]).val();
            var email     = $(input[name=email]).val();
            item = {}
            item ['firstname']  = firstname;
            item ['lastname']   = lastname;
            item ['gender']     = gender;
            item ['dob']        = dob;
            item ["email"]      = email;
            jsonObj.push(item);
        });
        var jsonString = JSON.stringify(jsonObj);
        console.log(jsonString);
    });
});

我收到错误：

未捕获引用错误：未定义输入

任何帮助都将不胜感激！

我得到错误：

未捕获引用错误：未定义输入

您需要用'或":包装选择器中的每个输入

var firstname = $('input[name=frstname]').val();
var lastname  = $('input[name=lastname]').val();
var gender    = $('input[name=gender]').val();
var dob       = $('input[name=dob]').val();
var email     = $('input[name=email]').val();

和你在这里做的一样：

$("input[data-conv=json]").each(function() {

尽管如果你有一个论坛与这些控制你不需要每个：-

$(document).ready(function(){
    $('.btn-action').on('click', function(){
        var jsonObj = [];
        var firstname = $('input[name=frstname]').val();
        var lastname  = $('input[name=lastname]').val();
        var gender    = $('input[name=gender]').val();
        var dob       = $('input[name=dob]').val();
        var email     = $('input[name=email]').val();
        item = {}
        item ['firstname']  = firstname;
        item ['lastname']   = lastname;
        item ['gender']     = gender;
        item ['dob']        = dob;
        item ["email"]      = email;
        jsonObj.push(item);
        var jsonString = JSON.stringify(jsonObj);
        console.log(jsonString);
    });
});

但如果你有倍数，你需要给元素周围的组一个类：-

<div class="form-group inputs-group">
        <input type="text" class="form-control" name="frstname" data-conv="json">
        <input type="text" class="form-control" name="lastname" data-conv="json">

则CCD_ 3比使用CCD_

$(document).ready(function(){
    $('.btn-action').on('click', function(){
        var jsonObj = [];
        $(".inputs-group").each(function() {
            var firstname = $(this).find('input[name=frstname]').val();
            var lastname  = $(this).find('input[name=lastname]').val();
            var gender    = $(this).find('input[name=gender]').val();
            var dob       = $(this).find('input[name=dob]').val();
            var email     = $(this).find('input[name=email]').val();
            item = {}
            item ['firstname']  = firstname;
            item ['lastname']   = lastname;
            item ['gender']     = gender;
            item ['dob']        = dob;
            item ["email"]      = email;
            jsonObj.push(item);
        });
        var jsonString = JSON.stringify(jsonObj);
        console.log(jsonString);
    });
});
相关文章：