增加文本字段的名称属性答案

【问题标题】：Incrementing name attribute of text field增加文本字段的名称属性
【发布时间】：2015-11-21 03:15:34
【问题描述】：

好的，这是增加文本字段的名称属性的尝试。

我不知道 jquery/js，所以我用 Google 搜索了一个脚本，然后found one。

它在大多数情况下都可以使用，但我必须对其进行一些修改，以便文本框的名称属性将增加其数量，即on0、on1、on2、on3、等等。

原因是Paypal's optional variable: on0

这是我目前所拥有的：jsfiddle demo

但是如果你通过firebug查看文本框，你可以看到名字属性是on0，但是没有on1就跳转到on2。

为什么？

我认为我需要有序地保持增量，否则 Paypal 可能不接受可选变量。他们是需要的。

有什么建议吗？

【问题讨论】：

标签： jquery html paypal

【解决方案1】：

这是一个非常简单的修复。在您的 box_html 变量（第 4 行）中，我将值减少了 1。

jQuery(document).ready(function($) {
  $('.my-form .add-box').click(function() {
    var n = $('.text-box').length + 1;
    var box_html = $('<p class="text-box"><label for="box' + n + '">Box <span class="box-number">' + n + '</span></label> <input type="text" name="on' + (n - 1) + '" value="" id="box' + n + '" /> <a href="#" class="remove-box">Remove</a></p>');
    box_html.hide();
    $('.my-form p.text-box:last').after(box_html);
    box_html.fadeIn('slow');
    return false;
  });

  $('.my-form').on('click', '.remove-box', function() {
    $(this).parent().css('background-color', '#FF6C6C');
    $(this).parent().fadeOut("slow", function() {
      $(this).remove();
      $('.box-number').each(function(index) {
        $(this).text(index + 1);
      });
    });
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-form">
  <form role="form" method="post">
    <p class="text-box">
      <label for="box1">Box <span class="box-number">1</span>
      </label>
      <input type="text" name="on0" value="" id="box1" />
      <a class="add-box" href="#">Add More</a>
    </p>
    <p>
      <input type="submit" value="Submit" />
    </p>
  </form>
</div>

【讨论】：

嘿，谢谢。使用你的答案。感谢您抽出宝贵时间回复。
没问题;)。如果您需要帮助，尽管问。
一定会的！ =) 我还有几个问题要解决，但要逐步解决。换句话说就是慢。

【解决方案2】：

我对你的 js 代码做了一些修改

jQuery(document).ready(function($){
$('.my-form .add-box').click(function(){

var n = $('.text-box').length -1 + 1;

    var box_html = $('<p class="text-box"><label for="box' + n + '">Box <span class="box-number">' + n + '</span></label> <input type="text" name="on' + n + '" value="" id="box' + n + '" /> <a href="#" class="remove-box">Remove</a></p>');
    box_html.hide();
    $('.my-form p.text-box:last').after(box_html);
    box_html.fadeIn('slow');
    return false;
});

$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
    $(this).remove();
    $('.box-number').each(function(index){

$(this).text(index);

    });
});
return false;

}); });

【讨论】：

嘿，谢谢。没有使用您的答案，但我感谢您抽出时间回复。 =)