Question

hierarchy of my form 我想以这种格式在json字符串中插入数据（参考图像）这是json格式。如何将输入字段值存储在json中并使用javascript

将其存储在字符串中

HTML

<form action="" method="post">
<div><span class="opensans size13">Going To</span>

</div>
<div>
    <input list="hotelplacelist" id="hoteltypetext" class="form-control" name="city" placeholder="Place, State, Country">
    <datalist id="hotelplacelist" class="datal"></datalist>
</div>
<div class="w50percent">
    <div class="wh90percent textleft">  <span class="opensans size13"><b>Check in date</b></span>

        <input type="text" class="form-control mySelectCalendar" id="datepicker" name="checkindate" placeholder="dd/mm/yyyy" />
    </div>
</div>
<div class="w50percentlast">
    <div class="wh90percent textleft right">    <span class="opensans size13"><b>Check out date</b></span>

        <input type="text" class="form-control mySelectCalendar" id="datepicker2" placeholder="dd/mm/yyyy" name="checkoutdate" />
    </div>
</div>
<div class="clearfix"></div>
<div class="clearfix"></div>
<div class="clearfix"></div>
</br>
<div id="addroom">
    <div class="room1">
        <div class="row">
            <div class="col-md-3">  <span class="opensans size13"><br><b>Room 1</b></span>

            </div>
            <div class="col-md-4">
                <div class="wh90percent textleft left"> <span class="opensans size13"><b>Adult</b></span>

                    <select class="form-control mySelectBoxClass" name="noofadults[]">
                        <option selected>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </div>
            </div>
            <div class="col-md-4">
                <div class="wh90percent textleft left"> <span class="opensans size13"><b>Child</b></span>

                    <div class="input-group">   <span class="input-group-btn">
                                                            <button type="button" class="btn-default btn-number minus" disabled="disabled" data-type="minus" data-field="quant1">
                                                                 <span class="glyphicon glyphicon-minus"></span>

                        </button>
                        </span>
                        <input type="text" name="quant1" class="form-control input-number" value="0" min="0" max="5" style="text-align:center" disabled="disabled"> <span class="input-group-btn">
                                                            <button type="button" class="btn-default btn-number plus" data-type="plus" data-field="quant1">
                                                                <span class="glyphicon glyphicon-plus"></span>

                        </button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="addchildage"></div>
        <div class="addroom2 block grey" id="add1">
            <div class="w50percent3 left">
                <div class="child2"><a id='addButton1'>ADD</a>

                </div>
            </div>
        </div>
    </div>

必需的JSON格式

{
"noofrooms": "4",
"guests": [
    {
        "adultcount": "1",
        "childcount": "0",
        "chidage": []
    },
    {
        "adultcount": "1",
        "childcount": "1",
        "chidage": [
            "6"
        ]
    },
    {
        "adultcount": "1",
        "childcount": "2",
        "chidage": [
            "6",
            "8"
        ]
    },
    {
        "adultcount": "1",
        "childcount": "2",
        "chidage": [
            "6",
            "8"
        ]
    }
]
}

的Javascript

$('.btn-number').click(function (e) {
e.preventDefault();

fieldName = $(this).attr('data-field');
type = $(this).attr('data-type');
var input = $("input[name='" + fieldName + "']");
var currentVal = parseInt(input.val());
if (!isNaN(currentVal)) {
    if (type == 'minus') {

        if (currentVal > input.attr('min')) {
            input.val(currentVal - 1).change();
        }
        if (parseInt(input.val()) == input.attr('min')) {
            $(this).attr('disabled', true);


        }

    } else if (type == 'plus') {

        if (currentVal < input.attr('max')) {
            input.val(currentVal + 1).change();
        }
        if (parseInt(input.val()) == input.attr('max')) {
            $(this).attr('disabled', true);
        }

    }
} else {
    input.val(0);

}
});
$('.input-number').focusin(function () {
$(this).data('oldValue', $(this).val());
});
$('.input-number').change(function () {

minValue = parseInt($(this).attr('min'));
maxValue = parseInt($(this).attr('max'));
valueCurrent = parseInt($(this).val());

name = $(this).attr('name');
if (valueCurrent >= minValue) {
    $(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
} else {
    alert('Sorry, the minimum value was reached');
    $(this).val($(this).data('oldValue'));
}
if (valueCurrent <= maxValue) {
    $(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
} else {
    alert('Sorry, the maximum value was reached');
    $(this).val($(this).data('oldValue'));
}


});

$(function () {
$('.plus').click(function (e) {
    e.preventDefault();
    $('.addchildage').append('<select class="form-control" name="childage[]"><option></option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option></select>');
});
$('.minus').click(function (e) {
    e.preventDefault();
    if ($('.addchildage select').length > 0) {
        $('.addchildage').children().last().remove();
    }
});

})

Answer 1

您指定的JSON无效。请参阅下面的示例

<html>
    <head>
        <script>
            var sprint = [
                {
                    sprintId:1,
                    noOfProj:[]
                },
                {
                    sprintId:2,
                    noOfProj:[]
                }
                ,
                {
                    sprintId:3,
                    noOfProj:[] 
                }
            ];

            console.log(sprint);

            sprint[0].noOfProj.push({"name":"abc"});
            sprint[0].noOfProj.push({"name":"def"});

            console.log(sprint);

            sprint.forEach(function(entry){
                entry.noOfProj.forEach(function(sprints){
                    console.log(sprints.name);
                })
            });

        </script>
    </head>
    <body>

    </body>
</html>

在上面的场景中。我试图将新价值推向冲刺。按f12并转到控制台选项卡以在浏览器中详细查看结果

Answer 2

var form = $(document.myform);
var stringData = JSON.stringify(from.serializeArray());

请参阅此reference

将输入字段值存储在json中，并使用javascript将其存储在字符串中

2 个答案: