Question

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

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."</code></pre>";
    }

    $result = $heading.$paragraph.$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."</code></pre>";
                    break;
            }
        }
    }
    }

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中搜索每个元素时，但是您可以在已经设置为'e-h'或'e-p'的模式之后的foreach循环中进行搜索。用于eaxample：

$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个数组变量以及所有输入数据...希望这与您的问题有关。

有多个具有相同名称的输入元素时，依次保存表单数据

1 个答案: