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

你可以做到

<强> 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();
}

FIDDLE

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>

EXAMPLE

Answer 3

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

Answer 4

使用XMLhttpRequest可以找到您正在寻找的解决方案。 http://www.w3schools.com/xml/xml_http.asp http://www.w3schools.com/dom/tryit.asp?filename=try_dom_xmlhttprequest_first 祝你好运

如何在不重新加载页面的情况下在表单中创建html元素？

4 个答案: