从发票中的数据库中获取值答案

【问题标题】：fetching value from database in Invoice从发票中的数据库中获取值
【发布时间】：2014-12-23 06:19:46
【问题描述】：

我正在尝试在 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');
}


//}


?>

【问题讨论】：

更好地描述您的问题会有所帮助。第二排什么？发生了什么，抛出错误等。当您说自动完成问题时，不确定为什么要发布插入数据库代码
当我点击添加更多第二行时出现......并且自动完成在那里不起作用。
哦，我什至没有看到底部的所有代码。将新元素添加到 DOM 后，您必须初始化它们的自动完成功能。当代码在页面加载时运行时，它只会包含当时存在的元素
函数 addnewrow() { var n = ($('#inv_detail tr').length-0)+1; var row =''+ ''+ n +''+ ''+ ''+ ''+ ''+''; $('#inv_detail').append(row); } });我实际上已经在这里添加了我的自动完成类......这里生成了新行。仍然没有响应。 ://
是的，但你必须在插入新行后调用$('#inv_detail tr:last .street').autocomplete(/* options*/) 之类的东西

标签： jquery html invoice

【解决方案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（示例包装器）中。添加按钮后，没有“绑定”事件处理程序，因此当用户按下按钮时不会发生任何事情。

示例 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

【讨论】：

函数 addnewrow() { var n = ($('#inv_detail tr').length-0)+1; var row =''+ ''+ n +''+ ''+ ''+ ''+ ''+''; $('#inv_detail').append(row); } }); $(document).ready(function(){ $("#inv_detail").click(function(){ addnewrow(); }); 甚至没有关闭.. :'(
请帮助我们帮助您。你到底做了什么，出了什么问题？你看懂我的例子了吗？您的回复仅包含大量代码但没有解释。我将编辑我的答案，希望能进一步帮助您。
谢谢你的帮助.. :)