javascript - 如何使用 post 方法根据添加的行表将数据保存在数组中？

Question

如果我使用添加行表和功能单击添加，我如何发布数据？这是我的代码:

<form id="login" action = "product2.php" method = "POST" name="product-form">
    <table border="0">
    <tr>
        <td>
            Max Item
        </td>
        <td>
            :
        </td>
        <td>
            <select name="max" id="maxitem">
                <?php
                for($i=1; $i<=6; $i++)
                {
                    echo "<option value=".$i.">".$i."</option>";
                }
                ?>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            Product
        </td>
        <td>
        :
        </td>
        <td>
            <input type="text" name="product" id="product" value="" placeholder="Add Product" size="40">
        </td>
        <td>
            <input type="button" id="ADD" value="Add Item">
        </td>
    </tr>
    </table>
    </br>
    <table border="1" id="tblname" cellpadding="5" cellspacing="5">
        <thead>
        <tr>
            <td>
                Total Item
            </td>
            <td>
                Name Item
            </td>
            <td>
                DELETE
            </td>
        <tr>
        </thead>
        <tbody align="center">
        </tbody>
    </table>
    </br>
    <input type="submit" value="SUBMIT">
    </form>

这是 JavaScript 代码:

$(document).ready(function(){
var item = 1;
$('#ADD').click(function(){
    var maxitem = parseInt($("#maxitem").val(), 10); //from max item in html
    var iCount = 0;
    if($('#product').val()){  // check input product
        if( item <= maxitem )
        {
            iCount = $('#tblname tbody tr').length + 1;
            szTr = "<tr><td>";
            szTr = szTr + iCount + "</td>";
            szTr = szTr +   "<td>" +$('#product').val() +"</td>";
            szTr = szTr +   "<td><input type='button' class='DEL' value='DELETE'></td>";
            szTr = szTr +   "</tr>";                     
            $('#tblname tbody').append(szTr);
            item +=1;
        }
        else
        {
            alert ("Max Limit !!!");
        }
    }else{alert('Enter Text');}
});

// for delete row
$('body').on('click', 'input.DEL', function() {
    $(this).parents('tr').remove();  
    item -= 1;
});
});

此代码 html 和 js 已经运行良好，但我不知道如何发布数据产品???

这是我在product2.php 中的代码

<?php
$maxitem = $_POST['max'];
$products = array();
$products [] = $_POST['product']; // ??? how i can keep each value product with array ??
?>

Answer 1

尝试一下，您需要更改您的 JavaScript 代码并将产品名称定义为数组......我认为这可能会帮助您。

<form id="login" action = "" method = "POST" name="product-form">
    <table border="0">
    <tr>
        <td>
            Max Item
        </td>
        <td>
            :
        </td>
        <td>
            <select name="max" id="maxitem">
                <?php
                for($i=1; $i<=6; $i++)
                {
                    echo "<option value=".$i.">".$i."</option>";
                }
                ?>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            Product
        </td>
        <td>
        :
        </td>
        <td>
            <input type="text" name="product[]" id="product" value="" placeholder="Add Product" size="40">

        </td>
        <td>
            <input type="button" id="ADD" value="Add Item">
        </td>
    </tr>
    </table>
    </br>
    <table border="1" id="tblname" cellpadding="5" cellspacing="5">
        <thead>
        <tr>
            <td>
                Total Item
            </td>
            <td>
                Name Item
            </td>
            <td>
                DELETE
            </td>
        <tr>
        </thead>
        <tbody align="center">
        </tbody>
    </table>
    </br>
    <input type="submit" name="submit" value="SUBMIT">
    </form>  

    <script>
    $(document).ready(function(){
var item = 1;
$('#ADD').click(function(){
    var maxitem = parseInt($("#maxitem").val(), 10); //from max item in html
    var iCount = 0;
    if($('#product').val()){  // check input product
        if( item <= maxitem )
        {
            iCount = $('#tblname tbody tr').length + 1;
            szTr = "<tr><td>";
            szTr = szTr + iCount + "</td>";
            szTr = szTr +   "<td><input type='hidden' name='product[]' value='"+$('#product').val()+"' />" +$('#product').val() +"</td>";
            szTr = szTr +   "<td><input type='button' class='DEL' value='DELETE'></td>";
            szTr = szTr +   "</tr>";                     
            $('#tblname tbody').append(szTr);
            item +=1;
        }
        else
        {
            alert ("Max Limit !!!");
        }
    }else{alert('Enter Text');}
});

// for delete row
$('body').on('click', 'input.DEL', function() {
    $(this).parents('tr').remove();  
    item -= 1;
});
});
    </script>