带有java add的PHP表单

我有一个PHP页面，表单可以在其中添加多行。然而，我被困在如何提交的所有行包括在提交的形式。我正在尝试建立一个系统来添加和删除库存

---

好吧，既然你不介意我用什么方法来解决你的问题，那么我就继续使用AJAX。我假设您已经了解了如何添加（或克隆）行，所以我不会介绍这一点，但我将向您介绍使用AJAX发送表单的简单方法，它甚至不会重新加载页面

它的基本原理是创建一个函数，并向按钮添加一个
onclick
事件来触发该函数。该函数将收集来自输入标签的所有信息，并选择标签和所有这些内容重要的一点是停止使用mysql_*函数。请改用mysqli_*函数，但我会保留您的原始mysql_*函数，因为我希望您现在可以简单地复制和粘贴它。

这是修改后的HTML。您会注意到我注释掉了
标记，因为在本例中我们不需要它，并且我为每个
和
添加了一个ID，因为我必须使用JavaScript检索它们的值。另外，您正在使用大量的
，但我认为使用
阅读起来更好、更容易

<div class="panel-body">
<!-- <form> -->
        <div id="msg"></div> <!-- This is a div I am adding just to output a message each time you send info to the database -->
        <div class="row">
            <div class="form-group col-lg-4">
                <label for="date">Date</label>
                <input class="form-control" type="date" id="date">
            </div>
            <div class="form-group col-lg-4">
                <label for="station">Station</label>
                <select class="form-control" id="station">
                    <option value="0">Please Select</option>
                    <?php    
                        include 'connection.php';
                        $supplies = "SELECT * FROM `stations` ORDER BY station";
                        $result_supplies = mysql_query($supplies);
                        while($row_supplies = mysql_fetch_array($result_supplies)){
                            echo '<option value="'.$row_supplies['id'].'">'.$row_supplies['station'].'</option>';
                        }
                    ?>
                </select>
            </div>
            <div class="form-group col-lg-4">
                <input class="form-control" type="hidden" id="requester" value=""> <!-- I don't know what to do with this one, by the way -->
            </div>
        </div>
        <div class="row">
            <div class="form-group col-lg-1">
                <label for="add-row">Add Row</label>
                <button id="add-row" class="btn btn-success">+</button>
            </div>
        </div>
        <div class="row" id="clone-row">
            <div class="row timesheet-row">
                <div class="form-group col-lg-6">
                    <label for="position">Item</label>
                    <select class="form-control" name="position"> <!-- Note that I'm using the 'name' attribute now instead of 'id', multiple IDs are not acceptable ;) -->
                        <option value="0">Please Select</option>
                        <?php    
                            include 'connection.php';
                            $supplies = "SELECT * FROM `supplies` ORDER BY name";
                            $result_supplies = mysql_query($supplies);
                            while($row_supplies = mysql_fetch_array($result_supplies)){
                                echo '<option value="'.$row_supplies['id'].'">'.$row_supplies['name'].'</option>';
                            }
                        ?>
                    </select>
                </div>
                <div class="form-group col-lg-3">
                    <label for="total_removed">Total Removed</label>
                    <input class="form-control" type="number" name="total_removed">
                </div>
            </div>
            <button onclick="sendData()">Save Information</button> <!-- Here's the button to send the form when you click it -->
        </div>
<!-- </form> -->
</div>

当然，您可以将其修改为您希望它执行的任何操作，例如为每个值更新数据库。（这就是为什么它被称为
foreach
，对吗？）

另外，对输出消息使用
echo
，因此不要在foreach中回显任何内容，只对输出HTML使用echo内容，然后将其放置在我之前创建的
中

我希望这能有所帮助，如果我打错了什么，我很抱歉，因为我不得不考虑很多，以适应你的具体情况，这不是最容易做到的。
在实际回答之前。。。让我确认一下我是对的。。您正试图通过单击按钮了解如何将表单中的所有信息发送到数据库，并且希望使用JavaScript/jQuery。。。我说得对吗？如果是这样的话，使用AJAX非常简单，发送一个XMLHttpRequest打开一个PHP文件，该文件将处理数据，然后保存数据。我可以告诉你怎么做，但在写完整的遗嘱作为答案之前，请告诉我。这是最重要的。但是我不在乎它是通过AJAX还是Java实现的，我想这是唯一的方法。在发送每一行数据时，我都不知所措。好吧，很简单，但这需要很长的回答，所以请给我几分钟时间为您编写完整的代码，并向您解释它是如何工作的。我将使用AJAX（JavaScript）和一个外部PHP文件来进行数据处理。我的错，你有很多HTML验证问题哈哈。非常感谢你的回复，我会再联系你，让你知道它是如何进行的
<script type="text/javascript">
    function sendData(){
        var xhttp = new XMLHttpRequest(),
            formData = new FormData(),
            date = document.getElementById('date').value, // get the value searching by ID.
            station = document.getElementById('station').value,
            item = document.getElementsByName('position'), // you can't get the values yet because it's an array (see below).
            total_removed = document.getElementsByName('total_removed');

        // The following function will run only when the server
        // has responded to your request.

        xhttp.onreadystatechange = function(){
            if(xhttp.readyState == 4 && xhttp.status == 200){
                document.getElementById("msg").innerHTML = xhttp.responseText;
                // Actually, here you can do whatever you want, but I'll just
                // add the message echoed by the PHP file (see below).
            }
        };

        // Next, I'm adding the values on the variables I created before (second parameter)
        // to the form and giving them a new name (first parameter, as string).

        formData.append("date", date);
        formData.append("station", station);
        for(var i = 0; i < item.length; i++) {
            formData.append('item[]', item[i]); // loop through all rows and append the values as arrays.
        }
        for(var i = 0; i < total_removed.length; i++) {
            formData.append('total_removed[]', total_removed[i]);
        }
        xhttp.open("POST", "save-data.php", true); // Set the file and method
        xhttp.send(formData); // Send the form
    }
</script>

foreach($_POST['item'] as $k => $v){
    // $v[$k] is the 'item' variable value.
    // $_POST['total_removed'][$k]; is the 'total_removed' variable value related to the 'item' variable above.
    // In other words, $k is the index number for each element in the array.
}