遞增文本字段的名稱屬性

Question

好吧，這是嘗試增加文本字段的名稱屬性。

我不知道jquery/js，所以我搜索了一個腳本，並found one。

它適用於大多數情況，但我不得不稍作修改，使文本框的名稱屬性將在其數，即on0，on1，on2，on3等

增加的原因因爲這是Paypal's optional variable：ON0

這是我到目前爲止有：jsfiddle demo

但是，如果你看一下通過螢火蟲的文本框，你可以看到的第一個名字屬性是on0，但隨後跳到on2沒有on1。

爲什麼？

我想我需要保持有序的增量，否則Paypal可能不接受可選變量。他們是需要的。

有什麼建議？

Answer 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>

Answer 2

下降我做了你的js代碼

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

VARñ一些變化= $（'。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){ 

$（本）的.text（索引）;

}); 
}); 
return false; 

}）; }）;