Question

我正在开发一个测验应用程序，并希望根据用户键入的值生成许多表示答案的输入字段。我正在使用名为“创建”的按钮使用 JavaScript 执行此操作，但是当单击该按钮时，它会提交表单。

请检查下面的两张图片。

HTML 代码

{% load static %}

{% block body %}

<button class="btn btn-primary new">Add a question</button>

<form class="question" method="POST" style="display: none">
    {% csrf_token %}
    <div class="form-group">
        <label for="exampleInputEmail1">Title</label>
        <input type="text" class="form-control" id="title" placeholder="Question title">
    </div>
    <div class="form-group" id="answers_num">
        <label for="exampleInputPassword1">Number of answers</label>
        <input type="number" class="form-control" id="ans_number">
        <button class="create_answers">Create</button>
    </div>

    <div class="form-group">
        {% comment %} Generated input fields {% endcomment %}

    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>



{% block script %}
    <script src="{% static 'mcq/index.js' %}"></script>
{% endblock %}

{% endblock %}```

JS代码

document.querySelector(".new").addEventListener("click", ()=> {

    document.querySelector(".question").style.display = 'block';

    document.querySelector("#create_answers").addEventListener("click", ()=> {
        answers = this.value;

        console.log(answers);

        // Create input fields
        for (let i = 0; i < answers; i++) {
            input = document.createElement("input");
            input.classList.add('form-control');
            answersDiv = document.querySelector("#answers").appendChild(input);
        }

    })
})```

Answer 1

你需要明确设置按钮的类型，比如

<button class="create_answers" type="button">Create</button>

为了避免在点击时提交表单。

使用 JavaScript 在表单内创建输入字段

1 个答案: