如何在单击html按钮上调用php ajax / function

时间:2017-07-29 13:40:31

标签: javascript php jquery html

我尝试在我的页面中包含一个脚本来添加动态行,每次点击添加时,都会将数据保存在数据库中。

问题是当我插入数据并单击添加行时,不起作用。 如何正确写出这个元素?

    <div class="mainTitle">Write a customer question  : Intent</div>
  <div class="adminformTitle">
    <div class="form-group form-group-options col-md-12">
 ';

        $content .= '

   <table id="myTable" class="table table-sm table-hover order-list">
    <thead>
        <tr>
            <td>User Question</td>
            <td>Language</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col-md-9">
            ' . HTML::inputField('user_question', null,  'placeholder="Write a short answer"'). '
            </td>
            <td class="col-md-2">
               ' . HTML::inputField('language', null,  'placeholder="Language"'). '
            </td>
            <td class="col-sm-1"><a id="delete_row" class="deleteRow"></a>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5">
                <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
            </td>
        </tr>
        <tr>
        </tr>
    </tfoot>
</table>
';

脚本:: 单击时,它会添加一个新行并在函数中保存/删除数据

    <script>
    $(document).ready(function () {
        var counter = 0;

        $("#addrow").on("click", function () {
            var newRow = $("<tr>");
            var cols = "";

            cols += '<td><input type="text" class="form-control" name="user_question' + counter + '"/></td>';
            cols += '<td><input type="text" class="form-control" name="language' + counter + '"/></td>';

            cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
            newRow.append(cols);
            $("table.order-list").append(newRow);
            counter++;

// call files            
             $.ajax({
                    type: 'POST',
                    url: 'ajax.php',
                    success: function(data) {
                        alert(data);
                        $("p").text(data);

                    }
                });
        });



        $("table.order-list").on("click", ".ibtnDel", function (event) {
            $(this).closest("tr").remove();       
            counter -= 1
        });



    function calculateRow(row) {
        var price = +row.find('input[name^="price"]').val();

    }

    function calculateGrandTotal() {
        var grandTotal = 0;
        $("table.order-list").find('input[name^="price"]').each(function () {
            grandTotal += +$(this).val();
        });
        $("#grandtotal").text(grandTotal.toFixed(2));
    }

    });


    </script>

0 个答案:

没有答案