如何在表单中创建html元素，而无需重新加载页面？

Question

我正在寻找一种方法来添加html元素到表单中，例如使用一个按钮。我一直在看一些例子，但是它们非常大（比如我想要构建的实际表单的3倍大小），所以我想知道是否有更好的方法来修复这个问题。

我的想法是这样的：

<form action='blabla.php' method='post'>
    <!-- Insert button here to add a new element -->
    <input type='text' name='desc_1'>
</form>

通过单击按钮，应该呈现以下内容：

<form action='blabla.php' method='post'>
    <!-- Insert button here to add a new element -->
    <input type='text' name='desc_1'>
    <input type='text' name='desc_2'>
</form>

我希望创建一个新的输入字段，而不必重新加载和释放表单中输入的ev数据。我猜这是我应该通过javascript甚至jquery实现的。我知道如何编辑一个现有的输入字段，但我不知道如何创建一个新的输入字段并使其符合其编号排列。有人知道如何使用javascript函数实现这一点吗？或者我应该花些时间研究jquery以获得更平滑的解决方案？

Answer 1

AJAX是您的答案。它可以让你更新网站内容，而无需反复刷新页面。

Answer 2

$("button").click(function(){
    var count = $("input").length + 1;
    
    $("form").prepend("<input type='text' value='desc_" + count + "' name='desc_" + count + "'><br>");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<button>add input</button>
<br>

<form action='blabla.php' method='post'>
    <input type='text' name='desc_1'>
</form>

Answer 3

你可以做的

html

<button onclick="create();">Create Field</button><br><br>
<form id="frm">

    <input type='text' name='desc_1' placeholder="Input Field 1"><br>
</form>

JavaScript

var count=1;
function create(){
//alert();
    count++;
    document.getElementById('frm').innerHTML+='<br/><input type="text" id="'+count+'" placeholder="Input Field'+count+'"  /><br/>';
    e.prventDefault();
}

小提琴