如何在表单中创建html元素,而无需重新加载页面
How to create html elements in a form, without reloading the page?
我正在寻找一种将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以获得更流畅的解决方案吗?
您可以进行
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
$("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>
示例
XMLhttpRequest可以实现您想要的致敬。http://www.w3schools.com/xml/xml_http.asphttp://www.w3schools.com/dom/tryit.asp?filename=try_dom_xmlhttprequest_first祝好运
相关文章:
- 创建新数据和加载现有数据需要单独的视图吗
- 钛 - HTTPClient:打开新的控制器加载
- 保持 JavaScript 在浏览器控制台中运行,即使在新的页面加载之后也是如此
- 路由到新页面时加载不起作用
- 如何在新窗口完成加载后执行某些内容
- 使用新标题重新加载 html 页面
- Primefaces在打开新页面时加载数据消息
- Wordpress音频播放器和平滑状态.在新页面重新加载播放器时调用什么回调函数
- 用新数据重新加载renderer3d
- 文本不被渲染后,新的页面加载- JQuery移动
- 需要在新标签中加载pdf/doc文件,而不是下载,只是想在浏览器中阅读
- 用新参数重新加载页面
- Js和CSS不检测新页面何时加载
- 在新页面上加载一个flash视频,它在上一页上的位置
- 在新窗口中加载代码编写器视图
- 在控制台中使用新脚本重新加载页面
- 如何在加载新页面后加载AJAX数据
- 如何使用jQuery在新窗口中加载页面,然后关闭它们
- Jquery没有看到新的HTML加载到对话框中
- 无法用新值重新加载JGrid