使用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.单击第一个选项（写入表单的选项）下的+按钮可以添加新的变体。

动态添加选项下的加号按钮不起作用。控制台显示错误“Uncaught SyntaxError：Unexpected token}”

有人可以指出我哪里出错了吗？

Answer 1

您在addOption函数中使用了三重嵌套引号。你必须逃避其中一个，如：

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

进一步解释：您开始使用双引号"打开HTML字符串，然后对HTML属性使用单引号'。然后你想调用一个javascript函数，它需要一个字符串传递给属性INSIDE，它已经使用了'。现在你必须使用反向间距\来转义该字符串的最后一个引号，以免破坏嵌套。

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

我再次在counter = 1

中初始化function addOption(divName)

@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++;
    }
}

更高级的方法是使用template literals表示法，如下所示：

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部分出现在某个地方＃34;独立＆＃34;，就好像它是当前语言一样。< / p>