时间戳

首页 > 解决方案 > 如何通过 JavaScript 添加额外的字段

javascript - 如何通过 JavaScript 添加额外的字段

问题描述

我有 2 个单选按钮，我可以在其中选择我喜欢使用的输入类型，text field, text-area, etc.现在我想添加Add&Remove按钮以添加额外字段或删除它们。

这是我的代码

HTML

<div class="form-group">
  <div id="moreless"></div> //show buttons
  <div class="fields" id="fields"></div> //show fields
</div>

JavaScript

<script>
  $( document ).ready( function() {

    $(".fieldtype").on('change', function() {
      var date_al = $(".fieldtype:checked").val();
      if(date_al == 'textfield') {
        $('#fields').empty();
        $('#moreless').empty();
        $('#fields').append('<input class="form-control" type="text" name="" id="">');
        $('#moreless').append('<button type="button" class="btn btn-success btn-xs">Add</button> <button type="button" class="btn btn-danger btn-xs">Remove</button>');
      }else{
        $('#fields').empty();
        $('#moreless').empty();
        $('#fields').append('<textarea class="form-control" name="" id="" cols="50" rows="4"></textarea>');
        $('#moreless').append('<button type="button" class="btn btn-success btn-xs">Add</button> <button type="button" class="btn btn-danger btn-xs">Remove</button>');
      }
  });
</script>

Screenshot

一 二

问题

我应该怎么做才能让我的Add&Remove按钮工作？

标签： javascript

解决方案

您的 javascript 应如下所示：

var textFieldsCount = 0;

function addTextField(){
textFieldsCount++;
$('#fields').append('<div id="textField-' + textFieldsCount + '"><input class="form-control" type="text" name="" id="'+ textFieldsCount.toString() +'"><button type="button" class="btn btn-danger btn-xs" onclick="removeTextField(\'textField-' + textFieldsCount.toString() + '\')">Remove</button></div></div>');
}

function removeTextField(elementId){
    var selector = "#" + elementId;
    console.log(selector);
    $(selector).remove();
    textFieldsCount--;
}

$(document).ready(function() {

  $(".fieldtype").on('change', function() {
    var date_al = $(".fieldtype:checked").val();
    if (date_al == 'textfield') {
      textFieldsCount++;
      $('#fields').empty();
      $('#moreless').empty();
      $('#fields').append('<div id="textField-' + textFieldsCount + '"><input class="form-control" type="text" name="" id="'+ textFieldsCount.toString() +'"><button type="button" class="btn btn-danger btn-xs" onclick="removeTextField(\'textField-' + textFieldsCount.toString() + '\')">Remove</button></div></div>');
      $('#moreless').append('<button type="button" class="btn btn-success btn-xs" onclick="addTextField();">Add</button>');
    } else {
      $('#fields').empty();
      $('#moreless').empty();
      $('#fields').append('<textarea class="form-control" name="" id="" cols="50" rows="4"></textarea>');
      $('#moreless').append('<button type="button" class="btn btn-success btn-xs">Add</button> <button type="button" class="btn btn-danger btn-xs">Remove</button>');
    }
  });
});

另外，我建议您在每个文本框前面都有一个删除按钮，而不是一个删除按钮。

类似的逻辑可用于文本区域。

推荐阅读