Question

我有三个字段将由用户填写。一个问题，另外两个问题。我想让用户单击添加命题时就可以添加第三个或任意数量的命题。我开始对该函数进行编码，但仍然错过了

<head>
    <script>
      function myFunction(){
        var x = document.createElement("LABEL");
        var t = document.createTextNode("Titre");
        x.appendChild(t);
      }
    </script>
</head>

<body>
    <form id="myForm" method="POST" action="./exam_coordinates">
        <label for="question"> Question </label> <br>
        <input class="champ" type="textarea" name="question" id="question" value=""><br><br>
        <label for="ans"> Answers </label> <br>
        <input type="checkbox" name="ans1" id="ans1" values="" />
        <input type="text" name="ans1" id="ans1" value=""><br>
        <input type="checkbox" name="ans2" id="ans2" />
        <input type="text" name="ans2" id="ans2" value=""><br>
        <br>
        <button onclick="myFunction()">Add proposition</button> <br><br><br>
        <input type="submit" value="submit">
    </form>
</body>

Answer 1

在您的函数中，您还必须在标签的父项中附加标签。如下所示-

function myFunction() {
    var form = document.getElementById("myForm");
    var input = document.createElement("input");
      

    form.appendChild(input)
}

<form id="myForm" method="POST" action="./exam_coordinates">
    <label for="question"> Question </label> <br>
    <input class="champ" type="textarea" name="question" id="question" value=""><br><br>

    <label for="ans"> Answers </label> <br>

    <input type="checkbox" name="ans1" id="ans1" values="" />
    <input type="text" name="ans1" id="ans1" value=""><br>

    <input type="checkbox" name="ans2" id="ans2" />
    <input type="text" name="ans2" id="ans2" value=""><br>
    <br>

    <button type="button" onclick="myFunction()">Add proposition</button> <br><br>

    <input type="submit" value="submit">
</form>

如果要将元素放置在任何特定位置，则应在表单元素中创建包装器，如下所示-

function myFunction() {
  let wrapper = document.getElementById("dynamic-fields");
  var input = document.createElement("input");
  wrapper.appendChild(input)
}

<form>
    <!-- ...input fields... -->
    <div id="dynamic-fields"></div> <br>
    <!-- ...buttons.... -->
    <button type="button" onclick="myFunction()">Add proposition</button>
</form>

通过这种方式，会将那些动态生成的元素放在表单页面的特定位置。

尝试一下-https://jsitor.com/IO08f-WBx

Answer 2

如果我的问题是对的，则需要添加输入以根据用户的需要从用户那里获得更多答案。如果是这样，请参阅以下内容-

var addButton = $('#add_button');
var wrapper = $('#more_answers');
$(addButton).click(function(e) {
    e.preventDefault();
    var lastID = $("#myForm input[type=text]:last").attr("id");
    var nextId = parseInt(lastID.replace( /^\D+/g, '')) + 1;
    $(wrapper).append(`<div><input type="checkbox" name="ans${nextId}" id="ans${nextId}" values="" />&nbsp;<input type="text" name="ans${nextId}" id="ans${nextId}" value=""/><a href="#" class="delete">Delete</a><div>`);
});

$(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <form id="myForm" method="POST" action="./exam_coordinates">
        <label for="question"> Question </label> <br>
        <input class="champ" type="textarea" name="question" id="question" value=""><br><br>
        <label for="ans"> Answers </label> <br>
        <input type="checkbox" name="ans1" id="ans1" values="" />
        <input type="text" name="ans1" id="ans1" value=""><br>
        <input type="checkbox" name="ans2" id="ans2" />
        <input type="text" name="ans2" id="ans2" value=""><br>
        <div id="more_answers"></div>
        <br>
        <button id="add_button">Add proposition</button> <br><br><br>
        <input type="submit" value="submit">
    </form>
</body>

使用dom Javascript将新创建的标签和输入文本添加到表单吗？

2 个答案: