Javascript 按顺序保存表单数据，同时具有多个同名输入元素

我想创建一个表单来创建新页面。我添加了按钮来动态创建不同的输入，比如h1标题、p段落和代码字段。所有h1输入都具有相同的名称，例如：“e-h1[]”。现在我想按照创建的输入元素的顺序保存所有表单数据

HTML:

PHP:

"; } $result=$heading.$paration.$code； } 正如你所看到的，我试图通过元素循环，但显然我没有得到正确的顺序。有什么想法吗

例如：

<form id="editor" method="post">
  <input name="e-h1[]" type="text" class="e-h1"/>
  <textarea name="e-p[]" rows="7" class="e-p"></textarea>
  <textarea name="e-p[]" rows="7" class="e-p"></textarea>
  <textarea name="e-code[]" rows="12" class="e-code"></textarea>
  <textarea name="e-p[]" rows="7" class="e-p"></textarea>
  <textarea name="e-code[]" rows="12" class="e-code"></textarea>
</form>

PHP:

"; 打破 } } } }

---

为什么不创建一个const nameAppend=0，您可以在每个函数的末尾增加它，只需在输入名称处添加此nameAppend即可。 这样，您将拥有所有输入/段落或其他内容，名称如下：

// i don't know if those functions are inside of a class or not so you will need to chose yourself how you define those variables.
const headingConcat = 0;
const paragraphConcat = 0;
const codeAreaConcat = 0;

function CreateNewHeadingOne() {
    var DOMHeadingOne = document.createElement("input");
    DOMHeadingOne.setAttribute("name", "e-h" + headingConcat);
    DOMHeadingOne.setAttribute("type", "text");
    DOMHeadingOne.setAttribute("placeholder", "Überschrift");
    DOMHeadingOne.classList.add("e-h1");
    document.getElementById("editor").appendChild(DOMHeadingOne);
    headingConcat ++;
}

function CreateNewParapgraph(){
    var DOMParagraph = document.createElement("textarea");
    DOMParagraph.setAttribute("name", "e-p" + paragraphConcat);
    DOMParagraph.setAttribute("rows", "7");
    DOMParagraph.setAttribute("placeholder", "Dies ist ein Paragraph-Feld. Bitte für jeden Paragraph ein eigenes Feld erstellen.");
    DOMParagraph.classList.add("e-p");
    document.getElementById("editor").appendChild(DOMParagraph);
paragraphConcat ++;
}

function CreateNewCodeArea(){
    var DOMCodeArea = document.createElement("textarea");
    DOMCodeArea.setAttribute("name", "e-code" + codeAreaConcat);
    DOMCodeArea.setAttribute("rows", "12");
    DOMCodeArea.setAttribute("placeholder", "Code-Bereich");
    DOMCodeArea.classList.add("e-code");
    document.getElementById("editor").appendChild(DOMCodeArea);
codeAreaConcat ++;

}

当您访问PHP并搜索文章中的每个元素时，这里的问题就会出现，但是您可以在foreach循环中搜索您已经设置的模式，如“e-h”或“e-p”。 例如：

$data = $_POST;
$paragraphData = [];
$headingData = [];
$codeAreaData = [];
foreach ($data as $key => $value) {
       if(substr('e-p',$key) { // search with kind of input it is
            $paragraphData[$key] = $value;
        } 
       if(substr('e-h',$key) { // search with kind of input it is
            $headingData[$key] = $value;
        } 
       if(substr('e-code',$key) { // search with kind of input it is
            $codeAreaData[$key] = $value;
        } 
    }

---

最后，您将有3个数组变量和所有输入数据。。。希望这与您的问题相关。

发布的参数应该以与文档中控件相同的顺序出现，但是您可以通过将它们分组到数组来推翻这一点。如果您为每个控件指定一个唯一的名称，例如

e-code1

，

e-code2

，

e-code3

，等等，并按照它们在

$\u POST

数组中出现的顺序对其进行处理，这将是最简单的方法。我理解您的方法，而且它确实是相关的。我设法用另一种方法使它工作。我使用了两个数组作为输入

DOMHeadingOne.setAttribute（“name”，“inputs[][e-h1]”）<form id="editor" method="post">
  <input name="e-h1[]" type="text" class="e-h1"/>
  <textarea name="e-p[]" rows="7" class="e-p"></textarea>
  <textarea name="e-p[]" rows="7" class="e-p"></textarea>
  <textarea name="e-code[]" rows="12" class="e-code"></textarea>
  <textarea name="e-p[]" rows="7" class="e-p"></textarea>
  <textarea name="e-code[]" rows="12" class="e-code"></textarea>
</form>

function CreateNewHeadingOne() {
  var DOMHeadingOne = document.createElement("input");
  DOMHeadingOne.setAttribute("name", "inputs[][e-h1]");
  DOMHeadingOne.setAttribute("type", "text");
  DOMHeadingOne.setAttribute("placeholder", "Überschrift");
  DOMHeadingOne.classList.add("e-h1");
  document.getElementById("editor").appendChild(DOMHeadingOne);
}

function CreateNewParapgraph(){
  var DOMParagraph = document.createElement("textarea");
  DOMParagraph.setAttribute("name", "inputs[][e-p]");
  DOMParagraph.setAttribute("rows", "7");
  DOMParagraph.setAttribute("placeholder", "Dies ist ein Paragraph-Feld. Bitte für jeden Paragraph ein eigenes Feld erstellen.");
  DOMParagraph.classList.add("e-p");
  document.getElementById("editor").appendChild(DOMParagraph);
}

function CreateNewCodeArea(){
  var DOMCodeArea = document.createElement("textarea");
  DOMCodeArea.setAttribute("name", "inputs[][e-code]");
  DOMCodeArea.setAttribute("rows", "12");
  DOMCodeArea.setAttribute("placeholder", "Code-Bereich");
  DOMCodeArea.classList.add("e-code");
  document.getElementById("editor").appendChild(DOMCodeArea);
}

    if(isset($_POST['createPage'])) {
    $arrayInputs = $_POST['inputs'];
    $result = "";
    foreach($arrayInputs as $position){
        foreach($position as $index => $value){
            switch($index){
                case "e-h1":
                    $result .= "<h1>".$value."</h1>";
                    break;
                case "e-p":
                    $result .= "<p>".$value."</p>";
                    break;
                case "e-code":
                    $result .= "<pre class='code'><code>".$value."</code></pre>";
                    break;
            }
        }
    }
    }

// i don't know if those functions are inside of a class or not so you will need to chose yourself how you define those variables.
const headingConcat = 0;
const paragraphConcat = 0;
const codeAreaConcat = 0;

function CreateNewHeadingOne() {
    var DOMHeadingOne = document.createElement("input");
    DOMHeadingOne.setAttribute("name", "e-h" + headingConcat);
    DOMHeadingOne.setAttribute("type", "text");
    DOMHeadingOne.setAttribute("placeholder", "Überschrift");
    DOMHeadingOne.classList.add("e-h1");
    document.getElementById("editor").appendChild(DOMHeadingOne);
    headingConcat ++;
}

function CreateNewParapgraph(){
    var DOMParagraph = document.createElement("textarea");
    DOMParagraph.setAttribute("name", "e-p" + paragraphConcat);
    DOMParagraph.setAttribute("rows", "7");
    DOMParagraph.setAttribute("placeholder", "Dies ist ein Paragraph-Feld. Bitte für jeden Paragraph ein eigenes Feld erstellen.");
    DOMParagraph.classList.add("e-p");
    document.getElementById("editor").appendChild(DOMParagraph);
paragraphConcat ++;
}

function CreateNewCodeArea(){
    var DOMCodeArea = document.createElement("textarea");
    DOMCodeArea.setAttribute("name", "e-code" + codeAreaConcat);
    DOMCodeArea.setAttribute("rows", "12");
    DOMCodeArea.setAttribute("placeholder", "Code-Bereich");
    DOMCodeArea.classList.add("e-code");
    document.getElementById("editor").appendChild(DOMCodeArea);
codeAreaConcat ++;

$data = $_POST;
$paragraphData = [];
$headingData = [];
$codeAreaData = [];
foreach ($data as $key => $value) {
       if(substr('e-p',$key) { // search with kind of input it is
            $paragraphData[$key] = $value;
        } 
       if(substr('e-h',$key) { // search with kind of input it is
            $headingData[$key] = $value;
        } 
       if(substr('e-code',$key) { // search with kind of input it is
            $codeAreaData[$key] = $value;
        } 
    }