代码之家 › 专栏 › 技术社区 › yaylitzis

当用户按下按钮时,添加表单的两个输入

html jquery javascript

yaylitzis · 技术社区 · 6 年前

在HTML表单中,当用户按 + 按钮。但是,它复制了提交按钮,而不是2个输入。 是否可以选择 form-group 那 + 按钮属于什么? 然后复制?

var counter = 1;
$('#form-notifications1')
  .on('click', '.addInput', function() {
    var $template = $('.form-group').slice(-1).clone(true, true).find('input').end()
      .find('.addInput').removeClass('addInput').addClass('removeInput').end()
      .find('[name^="mould-"]').attr('name', 'mould-' + counter).val("").end()
      .find('[name^="email-"]').attr('name', 'email-' + counter).val("").end()
      .find('i').removeClass('fa-plus').addClass('fa-minus').end();
    $template.insertAfter('.form-group:last');
    $('.form-control:last').focus();
    console.log("+: " + counter);
    counter++;
  })

  // Remove button click handler
  .on('click', '.removeInput', function() {
    var $row = $('.form-group').slice(-1);
    counter--;
    $row.remove();
    console.log("-: " + counter);
  });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <form id="form-notifications1" method="post " action="# " class="form-horizontal " role="form ">
        <fieldset>
          <div class="form-group">
            <div class="row">
              <label for="inputName " class="col-xs-2 control-label ">input</label>
              <div class="col-xs-2">
                <select class="js-states form-control " name="mouldId-1">
                  <option></option>
                  <option value="1 ">1</option>
                </select>
              </div>
            </div>

            <div class="row">
              <label for="inputName" class="col-xs-2 control-label ">Email</label>
              <div class="col-xs-6">
                <input type="email" class="form-control" name="email-1" />
              </div>

              <div class="col-xs-1">
                <button type="button" class="btn btn-default addInput"><i class="fa fa-plus"></i></button>
              </div>
            </div>
          </div>

          <div class="form-group">
            <div class="col-xs-12 ">
              <button type="submit " class="btn btn-primary ">Submit</button>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

编辑

我有一个空间 id="form-notifications1 " 这就是它不运行的原因…但是,它复制了按钮,而不是2个输入。

2 回复 | 直到 6 年前

yaylitzis 6 年前

我认为下面的片段是你所期望的,你有一个多余的 .slice(-1) 在里面 var $template = $('.form-group').slice(-1).clone(true, true).find('input').end() 很多人都不知道 (空白)在结束课程之前。


   
    另外,如果要删除它,则需要修复
    
     var $row = $('.form-group').slice(-1);
    
    进入之内
    
     .slice(-2)
    
   
   
    
     .slice(-x)
    
    哪里
    
     x
    
    是用于选择最后一个
    
     X
    
    要选择的元素。
   
   
    阅读以下链接
    
     
      .slice()
     
    
    更多信息。
   
   
   
   
    
     var counter = 1;
$('#form-notifications1')
  .on('click', '.addInput', function() {
    var $template = $('.form-group').clone(true, true).find('input').end()
      .find('.addInput').removeClass('addInput').addClass('removeInput').end()
      .find('[name^="mould-"]').attr('name', 'mould-' + counter).val("").end()
      .find('[name^="email-"]').attr('name', 'email-' + counter).val("").end()
      .find('i').removeClass('fa-plus').addClass('fa-minus').end();
    $template.insertBefore('#mybtn');
    $('.form-control:last').focus();
    console.log("+: " + counter);
    counter++;
  })

  // Remove button click handler
  .on('click', '.removeInput', function() {
    var $row = $('.form-group').slice(-1);
    counter--;
    $row.remove();
    console.log("-: " + counter);
  });
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <form id="form-notifications1" method="post" action="#" class="form-horizontal" role="form">
        <fieldset>
          <div class="form-group">
            <div class="row">
              <label for="inputName" class="col-xs-2 control-label">input</label>
              <div class="col-xs-2">
                <select class="js-states form-control" name="mouldId-1">
                  <option></option>
                  <option value="1">1</option>
                </select>
              </div>
            </div>

            <div class="row">
              <label for="inputName" class="col-xs-2 control-label">Email</label>
              <div class="col-xs-6">
                <input type="email" class="form-control" name="email-1" />
              </div>

              <div class="col-xs-1">
                <button type="button" class="btn btn-default addInput"><i class="fa fa-plus"></i></button>
              </div>
            </div>
          </div>

          <div id="mybtn" class="row">
            <div class="col-xs-12">
              <button type="submit " class="btn btn-primary">Submit</button>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

KHansen 6 年前

你有很多不属于任何空间的空间

古老的

<form id="form-notifications1 " method="post " action="# " class="form-horizontal " role="form ">

新的

<form id="form-notifications1" method="post" action="#" class="form-horizontal" role="form">