Question

我必须在使用Bootstrap提交表单后创建视图申请表。我用两个'div'创建了它。如何在按钮单击时动态创建div？

<i> Section I: Insured Information</h4>
<div class="form-group dynamicDiv">
    <!--Wrap labels and form controls needed for optimum spacing !-->
    <div class="row top-buffer">
        <label class="col-md-5 labelAlignment">
        Name<span class="red">*</span></label>
        <div class="text-box-height col-md-7">
        <!-- Form controls automatically receive some global styling with              Bootstrap: !-->
             <input type="text" class="form-control" id="txtInsuredName"   placeholder="Enter Name"
              required oninvalid="setCustomValidity('Enter UserName')"      oninput="setCustomValidity('')" />
        <!-- To insert plain text next to label within a horizontal form, .form-control-static class is used  !-->
        <div class="col-md-10 form-control-static lblInsuredName">
        </div>
    </div>
</div>
<div class="row top-buffer">
    <label class="col-md-5 labelAlignment">
        Mailing Address Line 1<span class="red">*</span></label>
    <div class="text-box-height col-md-7 ">
        <input type="text" class="form-control" id="txtInsuredAddress1" placeholder="Enter Address"
            required oninvalid="setCustomValidity('Enter Mailing Address1')" oninput="setCustomValidity('')" />
        <div class="col-md-10 form-control-static lblInsuredAddress1">
        </div>
    </div>
    <footer>
        <div class="col-md-12" align="center">
            <div class="row top-buffer"> </div>
            <div class="row top-buffer"> </div>
            <button type="submit" class="btn btn-success" id="btnSubmit">
                Submit</button>
            <button type="submit"  class="btn btn-info"  id="btnView">
                ViewData</button>
            <input runat="server" type="hidden" id="hdnKey" value=""  />
            <div class="row top-buffer"> </div>
        </div>
    </footer>
<i>

我将值以JSON格式存储为.json文件，并将值存储到隐藏字段中。但我必须在表单中的每个文本框字段中动态创建第二个div。我的jQuery函数是：

/*****************Function for showing view page using Query String******************/


$("#btnView").click(function() {
    var strUrlView = new String(window.location.href);
    strUrlView = strUrlView + "?key=" + $("#hdnKey").val();
    window.location.href = strUrlView;
});
var strUrl = new String(window.location.href);
if (strUrl.indexOf("key") != -1) {
    /*****************Hiding form-control div's ******************/
    //to decrypt the uniqueID
    var strKey = strUrl.split("key=")[1].replace("#", '');
    //Reading json and get data from json file to create the view
    var strFile = 'Data/JsonData/' + strKey + '.json';
    $.getJSON(strFile, function(data) {
        $.each(data, function(Key, Value) {
            //to convert control to span
            var ctrl = $("#" + Key);
            for (var k in Value) {
                //for replaceing textbox to label
                if (typeof Value[k] !== 'function') {
                    var strlblname = "div." + k.replace("txt", "lbl").replace("ddl", "lbl");
                    $(strlblname).text(Value[k]);
                }
            }
        });
    });
}
});

我试图像这样追加：

for (var k in Value) {
    $(".dynamicDiv").append(" <div class="form-group dynamicDiv"></div>")
    //for replaceing textbox to label
    if (typeof Value[k] !== 'function') {
        var strlblname = "div." + k.replace("txt", "lbl").replace("ddl", "lbl");
        $(strlblname).text(Value[k]);
    }
}

但它显示语法错误。我做错了什么？

Answer 1

$.each(data, function(Key, Value) {
            //to convert control to span
            var ctrl = $("#" + Key);
            for (var k in Value) {
                $('.viewDiv' + j++).text(Value[k]);
            }
});

我已经使用'form-static-control'删除了div，并在div中添加了类'viewDiv'，其中包含'text-box-height'类。

Answer 2

map.setCenter(new google.maps.LatLng(newLat, newLng));

编辑：

1）缺少分号

2）当字符串包含带双引号的字符串时，用单引号括起字符串。

for (var k in Value) {
        $(".dynamicDiv").append('<div class="form-group"></div>');
            //for replaceing textbox to label
                if (typeof Value[k] !== 'function') {
                    var strlblname = "div." + k.replace("txt", "lbl").replace("ddl", "lbl");
                    $(strlblname).text(Value[k]);
        }
 }

使用jquery动态创建div会导致语法错误

2 个答案: