Dynamically add and remove TextBoxes using js asp.net core

In this article, you will learn what is Dynamically add and remove TextBoxes and get value of dynamic TextBox using jQuery in asp.net core

 

<div class="col-xl-12">
        <div class="card-box">
            <h4 class="header-title mb-4">Documents</h4>
            <div class="row">
                <div class="col-12 mb-3">
                    <div class="table table-responsive">
                        <table class="table-brodered">
                            <thead>
                                <tr>
                                    <td>S.No.</td>
                                    <td>Document Name</td>
                                    <td>Upload</td>

                                </tr>
                            </thead>
                            <tbody id="tblBody_document">
                                <tr>
                                    <td>1</td>
                                    <td><input type="text" class="form-control" name="txt_documentName" id="txt_documentName_0" value="" /></td>
                                    <td><input type="file" class="form-control" name="file_document" id="file_document_0" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div> 
            </div>          
          
    </div>

 

 <div class="col-12">
     <button type="button" id="btn_addRows" class="btn btn-success" name="btn_addRows">Add Rows</button>
     <button type="button" id="btn_deleteRows" class="btn btn-danger" name="btn_deleteRows">Detete Rows</button>
 </div>

 

<div class="row text-center">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <button type="button" id="btn_Submit" name="btn_Submit" class="btn btn-success">Submit</button>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
                    <div id="Message" style="color:red;"></div>
                </div>
            </div>

 

<script>
    $(document).ready(function () {
       
    var QualID = 0;
    $('#btn_addRows').click(function () {
        QualID++;
        var tds = '<tr>'
            + '<td><input type="text" class="form-control" name="txt_Diploma_grad1" id="txt_Diploma_grad_' + QualID + '" value="Diploma/Graduation" /></td> '
            + '<td><input type="text" class="form-control" name="txt_Diploma_grad_subjects1" id="txt_Diploma_grad_subjects_' + QualID + '" value="" /></td>'
            + '<td><input type="text" class="form-control" name="txt_Diploma_grad_college1" id="txt_Diploma_grad_college_' + QualID + '" /></td>'
            + '<td><input type="text" class="form-control" name="txt_Diploma_grad_board_univ1" id="txt_Diploma_grad_board_univ_' + QualID + '" /></td>'
            + '<td><input type="text" class="form-control" name="txt_Diploma_grad_percent_grade1" id="txt_Diploma_grad_percent_grade_' + QualID + '" /></td>'
            + '<td><input type="text" class="form-control" name="txt_Diploma_grad_rollNo1" id="txt_Diploma_grad_rollNo_' + QualID + '" /></td>'
            + '<td><input type="text" class="form-control" name="txt_Diploma_grad_PassingYear1" id="txt_Diploma_grad_PassingYear_' + QualID + '" /></td>'
            + '</tr>';
        
        $('#tblBody_qualification tr:last').after(tds);

        //For Documents
        var td_doc = '<tr>'
            + '<td>' + Number(QualID+1) + '</td>'
            + '<td><input type="text" class="form-control" name="txt_documentName" id="txt_documentName_' + QualID + '" /></td>'
            + '<td><input type="file" class="form-control" name="file_document" id="file_document_' + QualID + '" /></td>'
            + '</tr>';

        $('#tblBody_document tr:last').after(td_doc);

    });

    //For Deleting
    $('#btn_deleteRows').click(function () {
        var count = $('#tblBody_qualification tr').length;
        if (count == 1) {
            alert("Not Allowed !!!")
            return;
        } else {
            $('#tblBody_qualification tr:last').remove();
            $('#tblBody_document tr:last').remove();
            ///--a;
            --QualID;
        }
    });


</script>

 

<script type="text/javascript">
    $("#btn_Submit").on('click', function (e) {
        $("#btn_Submit").val('Wait...');
        var fd = new FormData();
        fd.append("txt_firstname", $("#txt_firstname").val());       
        
        var QualificationLength = $('#tblBody_qualification tr').length;
       
        if (QualificationLength > 0) {
            for (var i = 0; i < QualificationLength; i++) {
                fd.append("txt_Diploma_grad", $("#txt_Diploma_grad_"+i+"").val());

                //File
                fd.append('file_Docment', document.getElementById('file_document_'+i).files[0]);
            }
        }
        
        $.ajax({
            url: '/user/actionmethodname',
            type: "POST",
            dataType: "JSON",
            data: fd,
            contentType: false,
            processData: false,
            success: function (result) {
                $('#Message').html(result.msg);                
               
            }
        })
    });
</script>

 

Get value on action

 

         [HttpPost]
        public IActionResult addqualification(IFormCollection frm, IFormFile[] file_Docment)
         {

        {

            return View();
        }
    }

Tag

Dynamically add and remove TextBoxes and get value of dynamic TextBox using jQuery in asp.net core
minify code