Question

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

我尝试按照以下主题中的说明操作： Creating a dynamic html form

但是我无法在我的服务器上运行它。我真的不熟悉HTML中的JavaScript（通常我更喜欢使用Python），所以请原谅我这个虚拟问题。

下面是我试过的HTML代码之一（

）

＆＃13;

$('#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');

＆＃13;

<!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>

＆＃13;

提前致谢

PS：顺便说一下，如果有人有任何想法在Python中做同样的事情（简单）请随时分享：）

Answer 1

您有以下几点：

仅在文档准备好时执行您的js
禁用/ enble而不是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>

动态HTML表单问题

1 个答案: