如何在asp.net母版页中添加和删除输入文本框

Question

*trying to add and remove input textbox for a form cv but it does not work. by using asp.net in master page. when I click in icon doesn't work. it will be a textbox and icon "+" to add .. when click in the icon it give the same textbox input in. and other icon to remove the other textbox..

I'm not use MVC.. if there is other way to code? I will appreciate this.

this is my code: enter code here this is my code (java script+css+html)

 $(document).ready(function () { var counter = 2; $("#addButton").click(function () { if (counter > 10) { alert("Only 10 textboxes allow"); return false; } var newTextBoxDiv = $(document.createElement('span')) .attr("id", 'TextBoxDiv' + counter); newTextBoxDiv.after().aspx('Textbox' + counter + '<input type="text" name="courseName' + counter + '" id="courseId' + counter + '" value="" >'); newTextBoxDiv.appendTo("#course"); counter++; }); $("#removeButton").click(function () { if (counter == 1) { alert("No more textbox to remove"); return false; } counter--; $("#TextBoxDiv" + counter).remove(); }); $("#sumbitcvId").click(function () { var msg = ''; for (i = 1; i < counter; i++) { msg += "\\n Textbox #" + i + " : " + $('#textbox' + i).val(); } alert(msg); }); });

 .coursecv,.mosdcv { font-family: 'Assistant', sans-serif; padding: 10px; margin: 10px; width: 27.5%; position: relative; font-size: 14px; color: #555; background-color: #fff; border: 1px solid #ccc; display: inline-block; }

 <div id="course"> <div> <h1>course</h1> </div> <span id="TextBoxDiv"> <asp:TextBox ID="courseId" runat="server" name="courseName" type="Text" placeholder="course name" CssClass="coursecv" value="" required="required"></asp:TextBox> </span> <span> <asp:TextBox ID="mosdId" runat="server" name="mosdName" type="Text" placeholder="Corporation" CssClass="mosdcv" required="required"></asp:TextBox> </span> </div> <div Id="ADD" style="margin-left:87%;color: #3c6bf4;font-family: 'Assistant', sans-serif;font-size: 17px;"> <a href="javascript:void(0);" class="addButton" title="Add field"><i class="fas fa-plus-circle"></i></a> <a href="javascript:void(0);" class="removeButton" title="Remove field"><i class="fas fa-minus-circle"></i></a> </div>

Answer 1

Since you're using class names to identify the fields in JQuery - you should use the dot(.) as the identifier than hash (#). Hash is used to identifying elements using Id.

$(".addButton").click(function () {

    if (counter > 10) {
        alert("Only 10 textboxes allow");
        return false;
    }

    var newTextBoxDiv = $(document.createElement('span'))
        .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after().append('Textbox' + counter +
        '<input type="text" name="courseName' + counter +
        '" id="courseId' + counter + '" value="" >');

    newTextBoxDiv.appendTo("#course");


    counter++;
});

The above code will trigger the click action and will add text boxes.