I am in the process of creating a view application form using Bootstrap after submitting a form. Initially, I created it utilizing two 'div' elements. Now, I am exploring how to dynamically generate a div upon clicking a button:
<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>
I have stored the values in JSON format as a .json file and saved them into a hidden field. However, my challenge now is dynamically creating a second div for each textbox field in the form. Below is the jQuery function I attempted:
/*****************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]);
}
}
});
});
}
});
In an attempt to append dynamically, I wrote this line of code:
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]);
}
}
However, this resulted in a syntax error. Can someone help me identify my mistake?