Javascript, pass values to new added table row/cell

Question

basically the objective of this request is to have a modal table that adds new table row/cells and pass the value of "var OBGyneID = $(this).attr("id"); " to first cell and value of "var billing_id = newID;" to second cell whenever new rows/cells is/are added. Seeking your help, thanks!

* MY MODAL*

    <div id="myModal" class="modal fade card new-contact myModal" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="card profile">
                    <div class="profile__img">
                        <img src="img/profile2.jpg" alt="">
                        <a href="#" class="zmdi zmdi-camera profile__img__edit"></a>
                    </div>
                    <div class="profile__info">                                         
                        <h3 style="text-transform:capitalize;" id="pxname" name="pxname"></h3>
                        <ul class="icon-list">
                            <li>LAST <p name="consdates" id="consdates"></p></li>
                            <li>Last visit: </li>
                            <li><i class="zmdi zmdi-twitter"></i> @mallinda-hollaway</li>
                        </ul>
                    </div>
                </div>              
                <div>
                    <div class="table-responsive">
                        <table id="billingTable" class="table table-inverse table-sm table-hover table-condensed" style="font-size:120%">
                            <thead> 
                                <th>OBDYID</th>
                                <th>CK</th>
                                <th>PROCEEDURE</th>
                                <th>AMOUNT</th>
                            </thead>
                            <tbody id="billing_body" style="text-transform:capitalize;">    
                                <form method="get" id="insert_form">                
                                    <tr>
                                        <td width="10%"><input type="text" style="width:100%;" id="OBGyneID" name="OBGyneID"></td>
                                        <td width="10%"><input type="text" style="width:100%;" id="AssessMentEntryID" name="AssessMentEntryID"></td>
                                        <td width="60%"><input type="text" style="width:100%;" class="ExamDesc" type="text" id="ExamDesc" name="ExamDesc"></td>
                                        <td width="20%"><input type="text" style="width:100%;" class="Price" type="text" id="Price" name="Price"></td>                              
                                    </tr>
                                </form>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
                    <input type="submit" id="addRow" value="add" name="add" class="btn btn-info" />             
                    <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

* MY JS to add new rows/cells*

        $(document).ready(function () {
            $("#addRow").click(function () {
                $("#billingTable").append('<tr><td width="10%"><input type="text" style="width:100%;" id="OBGyneID" name="OBGyneID" ></td>'+
                            '<td width="10%"><input type="text" style="width:100%;" id="AssessMentEntryID" name="AssessMentEntryID"></td>'+
                            '<td width="60%"><input type="text" style="width:100%;" class="ExamDesc" type="text" id="ExamDesc" name="ExamDesc"></td>'+
                            '<td width="20%"><input type="text" style="width:100%;" class="Price" type="text" id="Price" name="Price"></td></tr>');

                jQuery(".ExamDesc").autocomplete({
                    source: 'php/billingentry.php'
                }); 
            });
        });

* Pass values to Modal * this will only pass value when modal pops-up but cant pass value whenever new rows/cells are added.

            $(document).on('click', '.billing_data', function(){  
            var OBGyneID = $(this).attr("id");  
            var newID = new Date().getUTCMilliseconds();
            var billing_id = newID;
            $.ajax({  
                    url:"php/billing_fetch.php",  
                    method:"GET",  
                    data:{OBGyneID: OBGyneID},  
                    dataType:"json",  
                    success:function(data){
                        $('#AssessMentEntryID').val(data.AssessMentEntryID); 
                        $('#ExamDesc').val(data.ExamDesc);  
                        $('#Price').val(data.Price);  

                        $('#pxservice').val(data.pxservice);
                        $('#companyname').val(data.companyname);
                        $('#chiefcomplain').val(data.chiefcomplain);

                        document.getElementById("OBGyneID").value = OBGyneID;
                        document.getElementById("AssessMentEntryID").value = billing_id;
                        document.getElementById("pxname").innerHTML = (data.fname)+" "+(data.mi)+" "+(data.lname);
                        document.getElementById("consdates").innerHTML = (data.obgyneDate);
                        $('#myModal').modal('show');
                    }  
            });  
        });

Rohit Mittal Rohit Mittal · Accepted Answer · 2019-02-12T06:21:44

whenever you are adding a new row HTML in billing table, you are using the same id for OBGyneID, AssessMentEntryID,ExamDesc and Price. And if you added two rows, DOM will not be able to work properly as there are multiple same ids out there. So I will suggest you to replace that with class and use class name to set values. Check below code:

$(document).ready(function () {
    $("#addRow").click(function () {
        $("#billingTable").append('<tr><td width="10%"><input type="text" style="width:100%;" class="OBGyneID" name="OBGyneID" ></td>'+
                    '<td width="10%"><input type="text" style="width:100%;" class="AssessMentEntryID" name="AssessMentEntryID"></td>'+
                    '<td width="60%"><input type="text" style="width:100%;" class="ExamDesc" type="text" name="ExamDesc"></td>'+
                    '<td width="20%"><input type="text" style="width:100%;" class="Price" type="text" name="Price"></td></tr>');

        jQuery(".ExamDesc").autocomplete({
            source: 'php/billingentry.php'
        }); 
    });
});

One you have added HTML code, then you can find out last row of billingTable and can set vales in that. Check below code:

$(document).on('click', '.billing_data', function(){  
    var OBGyneID = $(this).attr("id");  
    var newID = new Date().getUTCMilliseconds();
    var billing_id = newID;
    $.ajax({  
        url:"php/billing_fetch.php",  
        method:"GET",  
        data:{OBGyneID: OBGyneID},  
        dataType:"json",  
        success:function(data){

            $("#billingTable").find(".AssessMentEntryID:last").val(data.AssessMentEntryID);
            $("#billingTable").find(".ExamDesc:last").val(data.ExamDesc);
            $("#Price").find(".Price:last").val(data.Price);
            $("#billingTable").find(".consdates:last").html(data.obgyneDate);
            //and so on
            $('#myModal').modal('show');
        }  
    });  
});

Also, I would suggest you to use HTMl template tag for making clone for row. Appending HTML in JS is not a recommended way. Hope it helps you.

Javascript, pass values to new added table row/cell

1 Answers