locked
Java Script code did not Add record in table body RRS feed

  • Question

  • User-2035378889 posted

    am new in asp.net mvc and js  I want to add record in detail table  her is my html code

    <div class="form-group m-b-0" style="margin-left:195px">
                                    <button type="submit" id="addToList" class="btn btn-info">
                                        Add To List
                                    </button>
                                </div>

                                <div class="form-group">
                                    <label for="Name"> Account Name: </label>
                                    <select id="Accounts" class="form-control">
                                        <option value="">Select Account</option>
                                    </select>
                                    <small id="error_Accounts" class="form-text error_msg">Select Account from list</small>
                                </div>
                                <div class="form-group" id="medicineDetails1">
                                    @*<p style="font-size:11px" id="medicineDetails"></p>*@
                                    @*buying price : <strong>12.99</strong>, Batch No: <strong>2255662</strong>*@

                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="Quantity"> Qty : </label>
                                        @Html.TextBox("Qty1", null, new { @class = "form-control", @type = "number", id = "Qty1" })
                                        <small id="error_Qty1" class="form-text error_msg"></small>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="Rate">  : Rate</label>

                                        @Html.TextBox("Rate", null, new { @class = "form-control", @Value = "0", @type = "number", id = "Rate" })
                                        <small id="error_Rate" class="form-text error_msg"></small>
                                    </div>
                                </div>
                                <br />
                                <br />


                                <div class="form-group" style="width:250px;float:left">
                                    <label for="B">Narration </label>
                                    @Html.TextBox("Narration", null, new { @class = "form-control", id = "Narration", @placeholder = "Enter some Narration" })
                                    <small id="error_Narration" class="form-text error_msg">Narration  required</small>

                                </div>
                                <div class="col-md-4" style="float:left;width:150px">
                                    <div class="form-group">
                                        <label for="B">Amount</label>
                                        @Html.TextBox("Amount1", null, new { @class = "form-control", @Value = "0", @type = "number", id = "Amount1" })
                                        <small id="error_Amount1" class="form-text error_msg"> Amount is Requrid</small>
                                    </div>
                                </div>

                                <div class="form-group col-md-4" style="margin-left:20px;width:100px">
                                    <label for="Drcr"> Dr/Cr: </label>
                                    @Html.DropDownList("Drcr", new List<SelectListItem>
                                        {
                                            new SelectListItem() {Text = "Dr", Value="Dr"},
                                            new SelectListItem() {Text = "Cr", Value="Cr"},
                                        },  new { @class = "form-control", onchange = "blankme(this.id)" })

                                    <small id="error_drcr" class="form-text error_msg"> Drcr is Requrid</small>
                                </div>
                                <br><br />
                                <div class="form-group m-b-0">
                                    <button type="submit" id="addToIe" class="btn btn-info">
                                        Add To Expenses or Income
                                    </button>
                                </div>

                            </form>
                        </div>

    <div class="col-md-offset-1 col-md-8" style="width:800px;float:left;margin-right:180px;margin-left:0px;padding-left:0px">
                                <br />
                                <div class="panel panel-color panel-primary">
                                    <div class="panel-heading">
                                        <h3 class="panel-title" style="text-align:center">Expenses/Income</h3>
                                    </div>
                                    <div class="panel-body">
                                        <table class="table table-hover table-responsive1" id="detailsTable1">
                                            <thead>
                                                <tr>
                                                    <th>Sr</th>
                                                    <th style="width:250px">Account Name</th>
                                                    <th>Qty</th>
                                                    <th>Rate</th>
                                                    <th style="width:250px">Narration</th>
                                                    <th>Amount</th>
                                                    <th>Dr/Cr</th>


                                                </tr>
                                            </thead>
                                            <tbody1></tbody1>
                                            <tfoot>
                                                <tr>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td> <strong> Total:</strong> </td>
                                                    <td> <strong id="SubTotal1">  </strong> </td>
                                                    <td></td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                                <small id="error_SubTotal1" class="form-text error_msg">Atleast add one item</small>
                                <br />
                                <br />
                            </div>

    and this is my 

    js code

     <script type="text/javascript">

     $("#addToIe").click(function (e) {
                e.preventDefault(); 
                var AccountId = $("#Accounts option:selected").val(), AccountsName = $("#Accounts option:selected").text(), qty = $("#Qty1").val(), rate = $("#Rate").val(), narration = $("#Narration").val(), drcr = $("#Drcr").val(), amountt = $("#Amount1").val(), detailsTableBody1 = $("#detailsTable1 tbody1"); var productItem1 = '<tr> <td> ' + AccountId + ' </td> + <td>' + AccountsName + '</td><td>' + qty + '</td><td>' + rate + '</td><td>' + amountt + '</td><td>' + narration + '</td><td> ' + drcr + '</td ><td><a data-itemId="0"  href="#" class="deleteItem"><i class="fa fa-trash"></i></a></td></tr>'; detailsTableBody1.append(productItem1);

                

            });

      </script>

    ]

    but when I click on addToIe

    it do nothing and not showing any error

    please help me

    thanks 

    Friday, January 22, 2021 2:41 PM

Answers

  • User-939850651 posted

    Hi ABDULLAH ANOTECH,

    Please use the correct element tag, in table, it should be <tbody> instead of <tbody1>.

    After I modified the code, it worked.

    <table class="table table-hover table-responsive1" id="detailsTable1">
                    <thead>
                        <tr>
                            <th>Sr</th>
                            <th style="width:250px">Account Name</th>
                            <th>Qty</th>
                            <th>Rate</th>
                            <th style="width:250px">Narration</th>
                            <th>Amount</th>
                            <th>Dr/Cr</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td> <strong> Total:</strong> </td>
                            <td> <strong id="SubTotal1">  </strong> </td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
    <script type="text/javascript">
        $("#addToIe").click(function (e) {
            e.preventDefault();
            var AccountId = $("#Accounts option:selected").val(),
                AccountsName = $("#Accounts option:selected").text(),
                qty = $("#Qty1").val(),
                rate = $("#Rate").val(),
                narration = $("#Narration").val(),
                drcr = $("#Drcr").val(),
                amountt = $("#Amount1").val(),
                detailsTableBody1 = $("#detailsTable1 tbody");
            var productItem1 ='<tr>'+
                                '<td> ' + AccountId + ' </td>' +
                                '<td>' + AccountsName + '</td>' +
                                '<td>' + qty + '</td>' +
                                '<td>' + rate + '</td>' +
                                '<td>' + amountt + '</td>' +
                                '<td>' + narration + '</td>' +
                                '<td> ' + drcr + '</td>' +
                                '<td><a data-itemId="0" href="#" class="deleteItem"><i class="fa fa-trash"></i></a></td>' +
                              '</tr > ';
            detailsTableBody1.append(productItem1);
        });
    </script>

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 25, 2021 6:02 AM