动态HTML表单问题

Dynamic HTML form issue

本文关键字：问题 表单 HTML 动态      更新时间：2023-09-26

我正在尝试创建一个动态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>

Thanks in advance

PS:顺便说一下，如果有人有任何想法在Python中做同样的(简单的)，请随时分享:)

您有以下几点:

  • 只在文档准备好时执行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>

相关文章：