动态 HTML 表单问题答案

【问题标题】：Dynamic HTML form issue动态 HTML 表单问题
【发布时间】：2017-01-11 12:33:23
【问题描述】：

我正在尝试创建一个动态 HTML 表单，以便创建一些来宾用户并将其填充到数据库中。

我尝试按照以下线程中的说明进行操作： Creating a dynamic html form

但我无法让它在我的服务器上运行。我真的不熟悉 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 中做同样的事情（很简单），请随时分享:)

【问题讨论】：

您的代码在页面完成加载之前执行。您可能希望在标记之后移动第二个脚本元素。
从删除按钮中删除禁用的属性，如下所示：$('#btnDel').attr('disabled', false); 或使用$('#btnDel').removeAttr('disabled') ...对添加按钮执行相同操作

标签： javascript jquery html forms dynamic

【解决方案1】：

你有以下几点：

只有在文档准备好时才执行你的 js
要禁用/启用而不是 attr，您需要使用 prop
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>

【讨论】：

感谢提醒使用 prop() ... 另请注意第二行 newElem.children 指向错误的元素。使用:last 或:eq(1) 或:nth-of-type(2)
好吧，还有另一种方法可以做到这一点......但最好让它与 OP 的代码相似
非常感谢，但我认为我的服务器有问题，因为即使我在之后添加脚本，当我点击按钮时也没有任何反应......
是的，我把它放在我的脚本之前：
您忘记了起始 https。试试：this link 并告诉我。您是否准备好将代码包装在文档中？ ($(function () {)