Here is the code snippet I utilized:
<script>
var count = 1;
var limitValue = 3;
function addNewInput(sectionName) {
if (count == limitValue) {
alert("You have reached the limit of adding " + count + " inputs");
}
else {
var newSection = document.createElement('div');
newSection.innerHTML = "Experiment Date" + (count + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(sectionName).appendChild(newSection);
count++;
}
}
</script>
Below is the HTML markup:
<body>
<form name="form1" runat="server">
<div id="dynamicInput">
Experiment Date 1 <br/> <input id="demo2" type="text" readonly="true" name="myInputs[]" runat="server"/>
</div>
<asp:Button ID="Button8" runat="server" Text="Add more Experiments" onclientclick="addNewInput('dynamicInput')"/>
</form>
I've also implemented a date picker for calendar entries. However, upon running the page, I encountered an issue where the added division disappears shortly after being generated. It seems to be related to a problem with page loading. Can you suggest a solution to this? Additionally, as my original form requires multiple entries, can this method be applied there as well? Are there any alternative solutions available? Thank you for your attention.