Question

我正在尝试在 product 中创建一个发票，我已使用自动完成功能从数据库中获取产品名称和价格。

第一行很容易实现，但第二行却根本无法正常工作。

的index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js" type="text/livescript"></script>
<link rel="stylesheet" href="syle/style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"   type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="js/main.js"></script>
<title>Untitled Document</title>
  <script>
  $(document).ready(function(){
var ac_config = {
    source: "autosuggest.php",
    select: function(event, ui){
        $(".menu_name").val(ui.item.menu_name);
        $(".menu_code").val(ui.item.menu_code);
        $(".menu_price").val(ui.item.menu_price);

        },
        minLength:1
        };
        $(".street").autocomplete(ac_config);
});

</script>
</head>

<body>
<form action="action.php" method="POST">

<table>
<tr>
<td>Invoice Number</td>
<td><input type="text" name="inv_no" id="inv_no" /></td>
</tr>
<tr>
<td>Invoice Date </td>
<td><input type="date" name="inv_date" id="inv_date" /></td>
</tr>
</table>

<table border="1" style="border-collapse:collapse">
<thead>
<tr>
<th>No</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="inv_detail">
<tr>
<th><b class="no">1</b></th>
<td><input type="text" class="street" class="menu_name"  name="p_name[]"  /></td>
<td><input type="text" name="qty[]" class="qty" /></td>
<td><input type="text" name="price[]" class="menu_price"  /></td>
<td align="right"><b class="amt"> </b></td>

</tr>
</tbody>
<tfoot>
<th colspan="6"><b class="total" value="add">0</b></th>
</tfoot>

</table>

</form>
<input type="button" id="click"  value="add"/>
</body>
</html>
<script type="text/javascript">
$.datepicker.setDefaults({
    changeMonth:true,
    changeYear:true,
    dateFormat:'yy/mm//dd'

    });
    $(function(){

    $('#click').click(function(){
       addnewrow();

    });

    $('#inv_detail').delegate('.p_name','change',function(){
        var p_name = $('.p_name:last').val();
        if(p_name !='')
        {
            addnewrow();
            }
            if($(this).val()== '' && $('.p_name').length > 1 && p_name == '')
            {
                $('.p_name:last').parent().parent().remove();   
                total();
            }

        });

        $('#inv_detail').delegate('.qty,.menu_price',function(){
            var tr = $(this).parent().parent();
            var qty = tr.find('.qty').val()-0;
            var menu_price = tr.find('.menu_price').val()-0;
            var amt = qty * menu_price;
            tr.find('.amt').html(amt);
            total();
            });

    $('input[type=date]').datepicker(); 
    $('body').delegate('input[type=date]',click,function(e)
    {
        $(this).datepicker();

        });



        function addnewrow()
        {
            var n = ($('#inv_detail tr').length-0)+1;
            var row ='<tr>'+
            '<th><b class="no">'+ n +'</b></th>'+   
            '<td><input type="text" name="p_name[]" class="menu_name"/></td>'+  
            '<td><input type="text" name="qty[]" class="qty"/></td>'+
            '<td><input type="text" name="price[]" class="menu_price"/></td>'+
            '<td allign="right"><b class="amt"></b></td>'+
            '</tr>';
            $('#inv_detail').append(row);
            }


    });
    function total(){

             var gg=0;
             $('.amt').each(function(i,el){
                 var amt = $(this).html()-0;
                 gg += amt;

            });
        $('.total').html(gg);
        }
</script>

action.php的

<?php

$cn = mysql_connect('localhost','root','');
mysql_select_db('phpinvoice',$cn);
//if(isset($_post['submit']))
//{
    echo $sql="INSERT INTO inv (inv_no,inv_date)VALUES('{$_POST['inv_no']}','{$_POST['inv_date']}')";

$query=mysql_query($sql);
$id = mysql_insert_id();
$_p_name =  $_POST['p_name'];
$_qty =  $_POST['qty'];
$_price =  $_POST['price'];

for($i = 0;$i < count($_p_name);$i++)
{
    echo $sql1="INSERT INTO inv_detail SET
 inv_id='{$id}',
 p_name='$_p_name[$i]',
 qty='$_qty[$i]',
 price='$_price[$i]',



 ";
 $qyer=mysql_query($sql1);
header('Location:http://www.pingbd.com');
}


//}


?>

Answer 1

Javascript及其JQuery使用事件处理程序。要让浏览器知道要处理的任何用户操作要执行哪个函数，您需要绑定一个事件处理程序。

在JQuery的情况下，事件的绑定，在你的情况下，也是在执行javascript时完成的，在这种情况下是在运行时。在初始事件绑定之后添加的任何项目都没有附加到它们的事件处理程序，并且因此永远不会执行函数。

要解决此问题，您需要将相同的事件处理程序添加到您添加到html中的任何新元素，您要从中运行函数。

示例1（jsfiddle（DOT）net / jLrcx2q6 /）：

<button class="button">Show alert</button>

$(document).ready(function(){
    $(".button").click(function(){
        alert("test");
    });
});

在此示例（示例1）中，当页面加载时，单击事件被“绑定”到按钮，因此当用户单击它时会弹出一个带有“test”文本的警告。

示例2（http://jsfiddle.net/ceney0jg/）：

<div id="example-wrapper">
    <button class="button">Show alert</button>
</div> 

$(document).ready(function(){
    $(".button").click(function(){
        alert("test");
        $("#example-wrapper").append('<button class="button">Show alert</button>');
    });
});

在此示例中，当用户按下按钮时，将再次显示带有文本“test”的弹出窗口。但是，还会发生一个新的按钮添加到div（example-wrapper）。添加按钮后，没有事件处理程序被“绑定”，因此当用户按下按钮时不会发生任何事情。

示例3 - 解决方案（jsfiddle.net/p8q4mfmv /）：

<div id="example-wrapper">
    <button class="button">Show alert</button>
</div> 

$(document).ready(function(){
    $(".button").click(function(){
        addButton()
    });
}); 

function addButton()
{
     alert("test");
     $("#example-wrapper").append('<button class="button">Show alert</button>');   

     $(".button").click(function(){
        addButton()
     });
}

在您的代码中，您有一个函数addnewrow（）。此函数添加新表行。加载页面时

$('#inv_detail').delegate('.p_name','change',function(){

为p_name添加一个事件处理程序。但是，在执行addnewrow（）函数之后，会添加一个新的表行，但上面的事件处理程序永远不会绑定到新元素。因此，浏览器不会执行您希望执行的任何代码。

解决方案是绑定事件处理程序，例如：

function addnewrow()
{
    var n = ($('#inv_detail tr').length-0)+1;
    var row ='<tr>'+
    '<th><b class="no">'+ n +'</b></th>'+   
    '<td><input type="text" name="p_name[]" class="menu_name"/></td>'+  
    '<td><input type="text" name="qty[]" class="qty"/></td>'+
    '<td><input type="text" name="price[]" class="menu_price"/></td>'+
    '<td allign="right"><b class="amt"></b></td>'+
    '</tr>';
    $('#inv_detail').append(row);

    $('#inv_detail').delegate('.p_name','change',function(){
    var p_name = $('.p_name:last').val();
    if(p_name !='')
    {
        addnewrow();
        }
        if($(this).val()== '' && $('.p_name').length > 1 && p_name == '')
        {
            $('.p_name:last').parent().parent().remove();   
            total();
        }

    });

    $('#inv_detail').delegate('.qty,.menu_price',function(){
        var tr = $(this).parent().parent();
        var qty = tr.find('.qty').val()-0;
        var menu_price = tr.find('.menu_price').val()-0;
        var amt = qty * menu_price;
        tr.find('.amt').html(amt);
        total();
    });
}

这不是很好的代码，但我认为它会起作用。您最好使用javascript文件而不是内联javascript，以使您的代码更具可读性和单独的功能。

同样在编写软件时，您应该始终尽量使功能尽可能少。最佳情况下的函数只有1个任务。

为了更好地理解这一点，我建议阅读http://courses.cs.washington.edu/courses/cse403/96sp/coupling-cohesion.html

从Invoice中的数据库中获取值

1 个答案: