php - 使用 Jquery 增加 HTML 值并将输入数据提交给 PHP

标签 php jquery html mysql

所以我目前正在开发一个工作正常的发票工具,但是我想要做的是在添加的每个新行中增加插入的数据。完成后,我希望能够获取所有这些数据并使用 php 将其提交到 MySQL 数据库。有人知道这是怎么做到的吗?

老实说,我从来没有研究过 Jquery,所以我不知道从哪里开始。谢谢

<html lang="en">
<head>
<meta charset="utf-8">
<title>Invoce Report</title>
<style type="text/css">
    form{
        margin: 20px 0;
    }
    form input, button{
        padding: 5px;
    }
    table{
        width: 100%;
        margin-bottom: 20px;
        border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;
    }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".add-row").click(function(){
            var name = $("#name").val();
            var variants = $("#variants").val();
            var markup = "<tr><td><input type='checkbox' name='record'></td><td name>" + name + "</td><td>" + variants + "</td></tr>";
            $("table tbody").append(markup);
        });

        // Find and remove selected table rows
        $(".delete-row").click(function(){
            $("table tbody").find('input[name="record"]').each(function(){
                if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });
    });    
</script>
</head>
<?php 
    $mg = "mg";
    $cb = "Classic Tobacco - 10ml";
    $sh = "Sahara Tobacco - 10ml";
    $ed = "Energy Drink - 10ml";
    ?>
<body>
    <form id="invoice" action="invoicereg.php" method="POST">
        <select id="name" name="name">
            <option value="<?php echo $cb; ?>">Aramax Classic Tobacco</option>
            <option value="<?php echo $sh; ?>">Aramax Sahara</option>
            <option value="<?php echo $ed; ?>">Aramax Energy Drink</option>
        </select>
        <select id="variants" placeholder="Variants - If Applicable">
            <option></option>
            <option value="3<?php echo $mg; ?>">3mg</option>
            <option value="6<?php echo $mg; ?>">6mg</option>
            <option value="12<?php echo $mg; ?>">12mg</option>
        <input type="button" class="add-row" value="Add Row">
    </form>
    <table>
        <thead>
            <tr>
                <th>Select</th>
                <th>Product</th>
                <th>Variant - If Applicable</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <button type="button" class="delete-row">Delete Row</button><br><br>
    <input type="submit" form="invoice">
</body> 
</html>     

最佳答案

没有测试 que jquery 部分,但这似乎缺少提交后您想要的表单中的字段。在:

var markup = "<tr><td><input type='checkbox' name='record'></td><td name>" + name + "</td><td>" + variants + "</td></tr>";

您需要在表单中包含您需要提交的数据。示例:

var markup = '<tr><td><input type="checkbox" name="record"></td><td name><input type="hidden" name="values[]" value="' + name + ' ' +variants+ '" >' + name + '</td><td>' + variants + '</td></tr>';

提交后,在 $_POST 中您将获得数组 $_POST['values'] 中的值。

不要忘记检查 isset,它可以与任何值一起提交。并将适当的转义值转义到 sql。

关于php - 使用 Jquery 增加 HTML 值并将输入数据提交给 PHP,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41636053/

相关文章:

PHP正则表达式模式匹配递归

php - 基于两个 mysql 字段进行计算

php - 创建基于二维合并数组的值

jquery - 使用JQuery选择dom并更改它

javascript - Chrome 扩展程序包含错误

jquery - 如何将列移动到容器中文档的右侧

html - 如何在 UL 的十个列表中给出前五里或后五里的颜色?

javascript - 如何在 css 表中使用 js 文件中的数字?

php - 使用 Dompdf 的 While 循环输出表

php - 基于mysql值选择的多个select表单值