Thursday, 17 March 2016

ADD MoreTextbox in Jquery and MVC

 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 &nbsp; </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: