动态HTML表单问题
[英]Dynamic HTML form issue
问题描述
我正在尝试创建动态HTML表单，以便创建一些来宾用户并将其填充到数据库中。
我试图按照以下线程中的说明进行操作： 创建动态html表单
但是我无法使其在我的服务器上运行。 我真的不熟悉HTML中的JavaScript（通常我更喜欢使用Python），所以请问这个问题。
以下是我尝试过的HTML代码之一：
$('#btnAdd').click(function() { var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have var newNum = new Number(num + 1); // the numeric ID of the new input field being added // create the new element via clone(), and manipulate it's ID using newNum value var newElem = $('#input' + num).clone().attr('id', 'input' + newNum); // manipulate the name/id values of the input inside the new element newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum); newElem.children(':first').attr('id', 'email' + newNum).attr('name', 'email' + newNum); // insert the new element after the last "duplicatable" input field $('#input' + num).after(newElem); // enable the "remove" button $('#btnDel').attr('disabled', ''); // business rule: you can only add 5 names if (newNum == 5) { $('#btnAdd').attr('disabled', 'disabled'); } }); $('#btnDel').click(function() { var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have $('#input' + num).remove(); // remove the last element // enable the "add" button $('#btnAdd').attr('disabled', ''); // if only one element remains, disable the "remove" button if (num - 1 == 1) { $('#btnDel').attr('disabled', 'disabled'); } }); $('#btnDel').attr('disabled', 'disabled');
<!DOCTYPE html> <html> <head> <Title>My First dynamic form test</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <form id="myForm"> <div id="input1" style="margin-bottom:4px;" class="clonedInput"> Name: <input type="text" name="name1" id="name1" /> Email: <input type="text" name="email1" id="email1" /> </div> <div> <input type="button" id="btnAdd" value="add another entry" /> <input type="button" id="btnDel" value="remove last entry" /> </div> </form> </body> </html>
提前致谢
PS：顺便说一句，如果有人有想法在Python中做同样的事情（简单），请随时分享:)
1 个解决方案
解决方案1
0 2016-09-03 16:13:57
您有以下几点：
- 仅在文档准备就绪时执行js
- 禁用/启用而不是attr，您需要使用道具
- length属性始终是一个数字，因此您不需要Number构造函数
// // wrap your code in document ready: // running rour code before the elements are not yet loaded is an error // $(function () { $('#btnAdd').click(function () { var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have var newNum = num + 1; // the numeric ID of the new input field being added // create the new element via clone(), and manipulate it's ID using newNum value var newElem = $('#input' + num).clone().find('[id]').andSelf().attr('id', function(index, attr) { return attr.replace(/[0-9]*$/, '') + newNum; }).attr('name', function(index, attr) { return (attr === undefined) ? undefined : attr.replace(/[0-9]*$/, '') + newNum; }).eq(0); // insert the new element after the last "duplicatable" input field $('#input' + num).after(newElem); // enable the "remove" button $('#btnDel').prop('disabled', false); // business rule: you can only add 5 names if (newNum == 5) $('#btnAdd').attr('disabled', 'disabled'); }); $('#btnDel').click(function () { var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have $('#input' + num).remove(); // remove the last element // enable the "add" button $('#btnAdd').prop('disabled', false); // if only one element remains, disable the "remove" button if (num - 1 == 1) $('#btnDel').prop('disabled', true); }); $('#btnDel').prop('disabled', true); });
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <form id="myForm"> <div id="input1" style="margin-bottom:4px;" class="clonedInput"> Name: <input type="text" name="name1" id="name1"/> Email: <input type="text" name="email1" id="email1"/> </div> <div> <input type="button" id="btnAdd" value="add another entry"/> <input type="button" id="btnDel" value="remove last entry"/> </div> </form>
角动态形式的问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.