Сохранение данных формы по порядку при наличии нескольких элементов ввода с одинаковым именем

Question

Я хочу создать форму для создания новых страниц. Я добавил кнопки для динамического создания различных входов, таких как заголовок h1, параграф p и поле кода. Все h1-входы получают одно и то же имя, например: «e-h1 []». Теперь я хочу сохранить все Form-данные в порядке созданных input-элементов.

HTML:

<div class="button-bar">
  <button id="e-h1" name="e-h1" onclick="CreateNewHeadingOne()">Überschrift H</button>
  <button id="e-p" name="e-p" onclick="CreateNewParapgraph()">Paragraph P</button>
  <button id="e-code" name="e-code" onclick="CreateNewCodeArea()">Codebereich C</button>
</div>
<form id="editor" method="post">
</form>

JS:

function CreateNewHeadingOne() {
  var DOMHeadingOne = document.createElement("input");
  DOMHeadingOne.setAttribute("name", "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", "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", "e-code[]");
  DOMCodeArea.setAttribute("rows", "12");
  DOMCodeArea.setAttribute("placeholder", "Code-Bereich");
  DOMCodeArea.classList.add("e-code");
  document.getElementById("editor").appendChild(DOMCodeArea);
}

PHP:

    if(isset($_POST['createPage'])) {
    $title = $_POST['e-title'];
    $category = $_POST['e-category'];
    $arrayHeading = $_POST['e-h1'];
    $arrayParagraph = $_POST['e-p'];
    $arrayCode = $_POST['e-code'];

    foreach ($arrayHeading as $head){
        $heading = "<h1>".$head."</h1>";
    }
    foreach ($arrayParagraph as $par){
        $paragraph = "<p>".$par."</p>";
    }
    foreach ($arrayCode as $cod){
        $code = "<pre class='code'><code>".$cod."

"; } $ result = $ heading. $ para. $ 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>

Поэтому я хочу сохранить порядок, в котором элементы были созданы. В этом случае: H1 -> P -> P -> Код -> P -> Код

РЕДАКТИРОВАТЬ:

Я использовал другое измерение массива, чтобы получить позицию через индекс. Поэтому я изменил название элементов ввода, например DOMHeadingOne.setAttribute("name", "inputs[][e-h1]");, и дважды зациклил, чтобы получить позиции.

JS:

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);
}

PHP:

    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."

"; перерыв; } } } }

Answer 1

почему бы не создать 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 и ищете каждый элемент в POST, но вы можете искать в цикле 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 переменные массива со всеми вашими входными данными ... Надеюсь, это было актуально для вашего вопроса.