ADD MoreTextbox in Jquery and MVC
Step 1:
<script type="text/javascript">
$(document).ready(function () {
// ADD MORE Jquery
var counter = 2;
$("#addmore").click(function () {
if (counter > 5) {
alert("Only Allow 5 Awards and Achievement to Register");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label class="lblstg3"> Awards and Achievements ' + counter + '</label>' +
'<input type="text" class="txtprofile" name="AwardsandAchievements' + counter + '" id="txtAward' + counter + '" value="" placeholder="Awards and Achievements" style="margin-bottom: 10px;margin-left: 17px;" , maxlength = 50 >' +
'<label class="lblstg3"> in the Year of </label>' + '<input type="text" name="AwardYear' + counter + '" id="txtYear' + counter + '" class="txtprofileyear" value="" placeholder="Year" , onkeypress = "return isNumberKey(event);", maxlength = 4 >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
});
</script>
Step 2:
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<p>
<div class="lblprofileExpdiv">
<span class="lblprofileExp lblstg3">Awards and Achievements</span>
</div>
@Html.TextBoxFor(m => m.AwardsandAchievements, new { @class = "txtprofile", @id = "txtAwards", placeholder = "Awards and Achievements", @maxlength = 50 }) <span class="lblstg3">in the Year of </span>@Html.TextBoxFor(m => m.AwardYear, new { @class = "txtprofileyear", placeholder = "Year", @onkeypress = "return isNumberKey(event);", @maxlength = 4 }) <span id="addmore" class="addmore">+</span>
</p>
</div>
</div>
Step 1:
<script type="text/javascript">
$(document).ready(function () {
// ADD MORE Jquery
var counter = 2;
$("#addmore").click(function () {
if (counter > 5) {
alert("Only Allow 5 Awards and Achievement to Register");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label class="lblstg3"> Awards and Achievements ' + counter + '</label>' +
'<input type="text" class="txtprofile" name="AwardsandAchievements' + counter + '" id="txtAward' + counter + '" value="" placeholder="Awards and Achievements" style="margin-bottom: 10px;margin-left: 17px;" , maxlength = 50 >' +
'<label class="lblstg3"> in the Year of </label>' + '<input type="text" name="AwardYear' + counter + '" id="txtYear' + counter + '" class="txtprofileyear" value="" placeholder="Year" , onkeypress = "return isNumberKey(event);", maxlength = 4 >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
});
</script>
Step 2:
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<p>
<div class="lblprofileExpdiv">
<span class="lblprofileExp lblstg3">Awards and Achievements</span>
</div>
@Html.TextBoxFor(m => m.AwardsandAchievements, new { @class = "txtprofile", @id = "txtAwards", placeholder = "Awards and Achievements", @maxlength = 50 }) <span class="lblstg3">in the Year of </span>@Html.TextBoxFor(m => m.AwardYear, new { @class = "txtprofileyear", placeholder = "Year", @onkeypress = "return isNumberKey(event);", @maxlength = 4 }) <span id="addmore" class="addmore">+</span>
</p>
</div>
</div>
No comments:
Post a Comment