使用javascript動態添加字段到表單

Question

我正在嘗試編寫一種表單，用戶可以在其中自己添加其他字段。 他們將能夠添加多達5個新的“選項”。 在每個選項部分中，我希望它們最多可以添加50個“變體”。

選項的一個示例是“大小”，而變體為“小，中，大”。 然后，他們可以為“顏色”添加第二個選項，並帶有“紅色，藍色，黃色”變體

它看起來像這樣：

這是表格腳本

<form method="POST" action="./form.php">
    <div id="static input">
    <p>Store Name: <input name="store" id="store" required></input></p>
    </div>

<div id="optionInput">
    <p>Option Name: <input name="option" id="option" required></input></p>
    <div><div class="col">Variant Name</div><div class="col">Price Modifier</div><div>Swatch Url</div></div>
        <div id="variantInput">
            <input type="text" name="myInputs[]"><input type="number" step="any" name="mods[]"><input type="text" step="any" name="urls[]">
        </div>
        <input type="button" value="+" onClick="addInput('variantInput');">
        <hr>
</div>
<p><input type="button" value="new option" onClick="addOption('optionInput');"></p>

<br><p><input type="submit"></input></p>
</form>

因此，單擊“ +”按鈕應添加一組新變量，單擊“添加選項”按鈕應創建一個新選項。

這是添加新選項並在選項內添加新變量的JavaScript。

var counter = 1;
var counter2 = 1;
var limit = 50;
var limit2 = 5;

function addInput(divName) {
    if (counter === limit) {
          alert("You have reached the limit of adding " + counter + " inputs");
    } else {
        var newdiv = document.createElement("div");
        newdiv.innerHTML = "<input type='text' name='myInputs[]'><input type='number' step='any' name='mods[]'><input type='text' step='any' name='urls[]'>";
        document.getElementById(divName).appendChild(newdiv);
        counter++;
    }
}

function addOption(divName) {
    if (counter2 === limit2) {
          alert("You have reached the limit of adding " + counter2 + " options");
    } else {
        var newdiv = document.createElement("div");
        newdiv.innerHTML = "<p>Option Name: <input name='option"+counter2+"' id='option"+counter2+"' required></input></p><div><div class='col'>Variant Name</div><div class='col'>Price Modifier</div><div>Swatch Url</div></div><div id='variantInput"+counter2+"'><input type='text' name='myInputs"+counter2+"[]'><input type='number' step='any' name='mods"+counter2+"[]'><input type='text' step='any' name='urls"+counter2+"[]'></div><input type='button' value='+' onClick='addInput('variantInput"+counter2+"');'><hr>";
        document.getElementById(divName).appendChild(newdiv);
        counter2++;
    }
}

當addOption終止工作時，它會添加新的選項集（最多5個）。單擊第一個選項（寫在表單中的選項）下的+按鈕可以添加新的變體。

動態添加的選項下的加號按鈕不起作用。 控制台顯示錯誤“未捕獲的SyntaxError：意外令牌}”

有人可以指出我要去哪里了嗎？

Answer 1

您在addOption函數中使用三重嵌套報價。 您必須像這樣逃脫其中之一：

newdiv.innerHTML = "[...] onClick='addInput(\"variantInput" + counter2 + "\");'><hr>";

進一步的解釋：您開始使用雙引號"打開HTML字符串，然后對HTML屬性使用單引號' 。然后您要調用javascript函數，該函數需要在屬性的內部傳遞一個字符串，已經使用了' 。現在，您必須使用反斜杠\\對該字符串的最后一個引號進行轉義，以免破壞嵌套。

Answer 2

我同意此代碼

newdiv.innerHTML = "[...] onClick='addInput(\\"variantInput" + counter2 + "\\");'><hr>";

但是仍然存在一些問題，那就是整個克隆系統仍然存在。

例如您的輸入限制2.您可以在第一個選項中添加2個輸入，然后在第二個選項中添加兩個輸入。 因為已經添加了2個輸入。

完整的克隆解決方案波紋管代碼：請遵循波紋管功能counter = 1

function addOption(divName) {
    if (counter2 === limit2) {
          alert("You have reached the limit of adding " + counter2 + " options");
    } else {
        var newdiv = document.createElement("div");
        newdiv.innerHTML = "<p>Option Name: <input name='option"+counter2+"' id='option"+counter2+"' required></input></p><div><div class='col'>Variant Name</div><div class='col'>Price Modifier</div><div>Swatch Url</div></div><div id='variantInput"+counter2+"'><input type='text' name='myInputs"+counter2+"[]'><input type='number' step='any' name='mods"+counter2+"[]'><input type='text' step='any' name='urls"+counter2+"[]'></div><input type='button' value='+' onClick='addInput(\"variantInput" + counter2 + "\");'><hr>";
        document.getElementById(divName).appendChild(newdiv);
        counter2++;
    }
    counter = 1;
}

我剛在function addOption(divName)初始化了counter = 1

@Jamie Moffat現在您可以順利克隆。

謝謝

Answer 3

@ user2415266的答案非常完美，可以解釋您的錯誤是什么 。

另一方面，檢查如何避免這種錯誤 ，同時使代碼更具可讀性（實際上，這是避免很多錯誤的最佳方法！），可能很有用。

因此，第一點是要打破長行以清楚地區分內容結構（即使乍一看似乎更為復雜）。
對於錯誤所在的部分，它可能看起來像這樣（這里我沒有糾正錯誤，希望可以清楚地出現在所涉及的行中）：

function addOption(divName) {
    if (counter2 === limit2) {
          alert("You have reached the limit of adding " + counter2 + " options");
    } else {
        var newdiv = document.createElement("div");
        newdiv.innerHTML = 
            "<p>Option Name: "
            + "<input name='option" + counter2 + "' id='option" + counter2 + "'"
            + "required></input>"
          + "</p>"
          + "<div>"
            + "<div class='col'>Variant Name</div>"
            + "<div class='col'>Price Modifier</div>"
            + "<div>Swatch Url</div>"
          + "</div>"
          + "<div id='variantInput" + counter2 + "'>"
            + "<input type='text' name='myInputs" + counter2 + "[]'>"
            + "<input type='number' step='any' name='mods" + counter2 + "[]'>"
            + "<input type='text' step='any' name='urls" + counter2 + "[]'>"
          + "</div>"
          + "<input type='button' value='+' "
            + "onClick='addInput('variantInput" + counter2 + "');'>"
          + "<hr>";
        document.getElementById(divName).appendChild(newdiv);
        counter2++;
    }
}

一種更高級的方法是使用模板文字表示法，如下所示：

function addOption(divName) {
    if (counter2 === limit2) {
          alert("You have reached the limit of adding " + counter2 + " options");
    } else {
        var newdiv = document.createElement("div");
        newdiv.innerHTML = "
<p>
  Option Name:
  <input name='option${counter2}' id='option${counter2}' required></input>
</p>
<div>
  <div class='col'>Variant Name</div>
  <div class='col'>Price Modifier</div>
  <div>Swatch Url</div>
</div>
  <div id='variantInput" + counter2 + "'>
    <input type='text' name='myInputs${counter2}[]'>
    <input type='number' step='any' name='mods${counter2}[]'>
    <input type='text' step='any' name='urls${counter2}[]'>
  </div>
  <input type='button' value='+' onClick='addInput('variantInput${counter2}');'>
  <hr>
        ";
        document.getElementById(divName).appendChild(newdiv);
        counter2++;
    }
}

它不僅完全避免了遇到錯誤的情況，而且還提高了可讀性，使HTML部分看起來像是“獨立的”，就像它是當前語言一樣。