想要添加三个新的字段与添加更多按钮

Want to Add three new fields with add more button

本文关键字：添加 字段 按钮 三个      更新时间：2023-09-26

我正在研究一个php, booststrap脚本收集网站地址。默认情况下，有一个字段可以收集链接到my sql中的address1的网站名称。我在mysql中添加了两个值，分别是address2, address3。

我想在address1字段下添加更多按钮，这样用户就可以点击它们并添加另一个网站，如果他们有。下面是我使用的代码:

             <div class="span12">
             <form class="form-horizontal" id="registerHere" method='post' action=''>
  <fieldset>
<div class="control-group">
      <label class="control-label" for="input01">Website Address 1</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="address1" name="address1">
      </div>
</div>
       <div class="control-group">
      <label class="control-label" for="input01">Website Address 2</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="address2" name="address2">
      </div>
         </div> 
        <div class="control-group">
      <label class="control-label" for="input01">Website Address 3</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="address3" name="address3">
      </div>
          </div>    
          </div>

正如你在上面的代码中看到的，我想隐藏网站地址2和网站地址3字段隐藏，但显示当点击添加更多的按钮，我想把网站地址1下。我赶时间，请给我带路。请不要忘记限制只有2个以上的字段，我不希望有人点击一次又一次，结果很多新的字段。

感谢

Demo Image https://i.stack.imgur.com/lOm7d.png

当前面的地址字段集中时，可以显示下一个地址字段，如下所示:

http://jsfiddle.net/KfQbb/

var $group = $('.control-group');
$group.hide().first().show();
$group.on('focus', 'input', function(e) {
    $(this).closest('.control-group').next('.control-group').slideDown();
});

下面是使用添加更多按钮的版本:http://jsfiddle.net/KfQbb/4/

var $group = $('.control-group');
$group.hide().first().show();
$group.on('click', '.more', function(e) {
    var $next = $(this).closest('.control-group').next('.control-group').slideDown();
    $(e.currentTarget).hide();    
    if ($next.find('.more').hasClass('last')) {
        $next.find('.more').hide();
    }
});
相关文章：