Question

我正在尝试为我的组织创建一个系统，以跟踪我们成员的积分。该系统的一部分是一个页面，其中官员可以为成员创建事件以在表单中注册。事件创建表单的一部分是＆＃34; shift（s）＆＃34;对于那个看起来像这样的事件：

<div id="shifts-div">
    <div class="form-inline">
        <div class="form-group">
            <label for="start">Start Time: </label>
            <input type="time" class="form-control" name="start[]" value="12:00:00">
        </div>

        <div class="form-group">
            <label for="end">End Time: </label>
            <input type="time" class="form-control" name="end[]" value="12:00:00">
        </div>

        <div class="form-group">
            <label for="end">Spots Available: </label>
            <input type="number" class="form-control" name="spots[]">
        </div>
    </div>
    <br>
</div>

由于给定事件可以有任意数量的轮班，我允许官员使用以下按钮动态添加或删除轮班：

<button type="button" class="btn btn-default" onclick="addShift()">
  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Shift
</button>
<button type="button" class="btn btn-default" onclick="removeShift()">
  <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove Shift
</button>

运行这两个javascript函数：

function addShift(){
    var shift = 
        `<div class="form-inline">
            <div class="form-group">
                <label for="start">Start Time: </label>
                <input type="time" class="form-control" name="start[]" value="12:00:00">
            </div>

            <div class="form-group">
                <label for="end">End Time: </label>
                <input type="time" class="form-control" name="end[]" value="12:00:00">
            </div>

            <div class="form-group">
                <label for="end">Spots Available: </label>
                <input type="number" class="form-control" name="spots[]">
            </div>
        </div>
        <br>`;

    document.getElementById("shifts-div").innerHTML += shift;
}

和

function removeShift() {
    $('#shifts-div').children().last().remove();
    $('#shifts-div').children().last().remove();
}

就添加和删除页面的移位而言，这很有效，但当我将表单提交到php文件时，start，end和spot不是数组，只保留最后一次移位的值。我通过在php中运行它来检查这个：

foreach($_POST as $key => $value){
    echo $key.' -> '.$value . ' ';
}

所以，假设我为每个输入添加了不同值的3个班次并单击提交，我会得到这个结果（我拿出了我认为不相关的部分，因为它们只是其他非数组事件的值，如姓名和日期，并且正常工作）：

start -> 14:00 end -> 17:00 spots -> 3

开始，结束和点数值是我为添加的第三个班次输入的内容。

经过一些研究后我发现使用innerHTML会导致一些奇怪的问题，因为它会重写div中的每个节点，所以我将addShift函数更改为以下只是为了看看这是不是问题（不是最漂亮的方法），我知道）

function addShift(){
    $("#shifts-div").append("<div class='form-inline'><div class='form-group'><label for='start'>Start Time: </label><input type='time' class='form-control' name='start[]' value='12:00:00'></div><div class='form-group'><label for='end'>End Time: </label><input type='time' class='form-control' name='end[]' value='12:00:00'></div><div class='form-group'><label for='end'>Spots Available: </label><input type='number' class='form-control' name='spots[]'></div></div><br>");
}

同样的问题仍然存在，结果相同。这是我第一次进行这种网络开发，这就是我想出来解决这个问题的方法，但我认识到可能有更好的方法来做到这一点，我不知道，所以我的问题有两部分：

为什么我的代码没有按照我的意图运行，我该如何解决？
有经验的网络开发人员如何实现我所追求的功能（假设他也只是使用基本的javascript，html和php）？

就像我说我是新手，所以随意批评我的代码的任何部分，即使它没有直接解决问题。有很多不同的方法可以做任何事情，很难知道哪个是正确的＆＃34;任何给定情况的方式。在此先感谢，如果需要提供更多代码，请告诉我。

修改

我使用此按钮提交表单：

<button type="submit" class="btn btn-default btn-lg">Submit</button>

这就是表格的样子：

<form action="../php/create-event.php" method="POST" name="event">

Answer 1

所以，事实证明我刚刚搞砸了将我的更改上传到服务器。一旦我按照问题中的描述将innerHTML更改为jquery并正确上传它，问题就解决了。

我要离开这个问题，因为即使找到解决方案花了我很长时间，我也没有找到任何人直接解决这个问题。如果您遇到上述问题，请执行从innerHTML到另一个DOM操作方法的更改。这个问题与innerHTML重写整个元素并丢失对已经存在的元素的引用有关。

如果有人能够比我更好地解释它，我会很乐意接受一个不同的答案。

动态HTML表单数组仅向PHP

1 个答案: