javascript - ajax post 不工作 php mysql

标签 javascript php jquery mysql ajax

我有一个表格,我可以在其中使用 javascript 添加行。我在每一行中都有一个选择框。我正在为选择框调用 onchange。它仅适用于第一行,不适用于通过 javascript 添加的行。请帮忙。

这是带有添加和删除行按钮的 html 表格:

<INPUT type="button" class="btn btn-primary" value="Add Row" onclick="addRow('payment_table')" />
<INPUT class="btn btn-primary" type="button" value="Delete Row" onclick="deleteRow('payment_table')" />

<TABLE  class="table table-hover dataTable table-striped width-full" data-plugin="dataTable" id="payment_table">
    <TR>
        <TD><INPUT type="checkbox" name="chk"/></TD>
        <TD>
            <SELECT name="product" class="form-control product" id="product" >
                <option value="">Select Product</option>
                <?php
                $sql="select products_name,products_amount,products_tmp_id from slv_products where products_status <> '0'";
                $results = $connect->runQuery($sql);
                foreach($results as $result) {
                ?>
                <option value="<?php echo $result['products_tmp_id']; ?>"><?php echo $result['products_name']; ?></option>
                <?php } ?>
            </SELECT>
        </TD>
        <TD><input class="form-control col-sm-2" type="text" name="quantity" id="quantity" placeholder="Quantity"></TD>
        <TD><input class="form-control" type="text" name="amount" id="amount" placeholder="Amount" readonly></TD>
    </TR>

</TABLE>

这是添加和删除行和 ajax 的脚本:

    function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;

        for(var i=0; i<colCount; i++) {

            var newcell = row.insertCell(i);

            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = "";
                        break;
                case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        break;
            }
        }
    }

    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                if(rowCount <= 1) {
                    alert("Cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }


        }
        }catch(e) {
            alert(e);
        }
    }

   $(document).ready(function() {

  $('.product').change(function() {    
var id = $(this).val();

$.ajax({
    type: "POST",
    url: "ajax.php",
    data: {
        id : id
    },
    success: function(data) {
     if(data){

   $("#amount").val(data);
    $("#quantity").val("1");   
    } 
    },
     error : function(data){
  alert("Error occured !!");
  }
});    
}); 

  });

这是 ajax.php :

<?php
include('/opt/lampp/htdocs/slv/includes/config.php');
$id = $_POST['id'];
$query = "SELECT products_amount FROM slv_products WHERE products_tmp_id='$id'"; //expecting one row
$results = $connect->runQuery($query);
foreach($results as $result){
    echo $result['products_amount'];
}
?>

最佳答案

你的 ajax 代码应该是这样的:

    $('body').on('change', '.product', function() { 
      var _that = $(this);   
      var id = _that.val();

      $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
           id : id
        },
        success: function(data) {
          if(data){
            _that.parents("tr").find(".amount").val(data);
            _that.parents("tr").find(".quantity").val("1");   
          } 
       },
       error : function(data){
         alert("Error occured !!");
       }
     });    
   }); 

是因为html元素的绑定(bind)。如果 html 是动态添加的,则不能直接将其与 jQuery 绑定(bind)。

关于javascript - ajax post 不工作 php mysql,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40132624/

相关文章:

javascript - ASP.NET MVC 中的 Kendo Treemap 工具提示

javascript - Moment.js ZH_CN 语言环境的格式时间

javascript - 关于 Angularjs OrderBy 与数字的想法? 10 被视为小于 2

php - 在 PHP 上使用 CURL 接受 cookie

javascript - Bootstrap nav-tabs 'show' 不起作用?

javascript - 幻灯片图像在页面加载时爆炸

javascript - Angular : google autocomplete works on pc, 但在移动设备上点击不会加载建议

php - WordPress 和 mysql 程序

javascript - 使用 jQuery 按关键字搜索 JSON

javascript - 使用变量与获取输入值时 substr() 的不同结果