遞增表單元素的名稱javascript

我有一堆表單元素可以連續添加一個「添加字段」按鈕。現在我想給這些領域，如遞增表單元素的名稱javascript

輸入名稱-XYZ-1，輸入名稱-XYZ-2增量的名字，....

輸入名稱-ABC-1，輸入名稱-abc-2，.....

FOO-1，FOO-2，FOO-3，....

等。

「Add Field」按鈕調用一個名爲addField（）的函數，該函數操縱dom元素來複制節點。

我遇到了爲增量名稱創建邏輯的問題。你們能幫助我嗎？

下面是我的工作（表單元素生成laravel）

/*THE HTML*/ 
<section class="input"> 
     {{ Form::label('achievements', 'Achievements:') }} 
     <input class="count" name="achievements-count" type="hidden" value="1"> 
     <p class="addedField input"> 
      {{ Form::input('input-name-xyz-1', $competition_games, Input::old('achievement-competition'), array('id' => 'achievement-competition')); }} 
      {{ Form::select('input-name-abc-1', array('Year - Place'), Input::old('achievement-year'), array('id' => 'achievement-year')) }} 
      {{ Form::select('foo-1', array('Position', 'Gold' => 'Gold', 'Silver' => 'Silver', 'Bronze' => 'Bronze', 'Participant' => 'Participant'), Input::old('achievement-achieved'), array('id' => 'achievement-achieved')) }} 
     </p> 
     <a onclick="addField(this)">+</a> 
    </section>

和JavaScript

function addField(elem){ 
    var parent = elem.parentNode; 
    var addName = parent.id; 
    var count = ++(parent.getElementsByClassName("count")[0].value); 
    var lastNode = parent.getElementsByClassName("addedField")[count-2]; 
    var clone = lastNode.cloneNode(true); 
    var nodes = clone.childNodes; 
    for(i=0; i<nodes.length-1; i++){ 
     nodes[i].value = ""; 
     nodes[i].name = //I need the logic right here//. 
    } 
    if(count == 2) 
     clone.innerHTML += "<a class='removeLink' onClick='removeField(this)'>X</a>"; 
    parent.insertBefore(clone,elem); 
}

代碼 - 問候，Aayush什雷斯塔

來源

2012-09-23 aayush shrestha

一些代碼顯示你現在正在做的事情會有所幫助;-) – David

是的，我們可以幫助你。但要解決我們需要看到的問題...... – Bergi

使用此函數來增加字符串末尾的任何數字。

function incNumAtEnd(s) { 
    return s.replace(/\d$/, function(match, ofs, str) { 
    return (parseInt(match) + 1).toString(); 
    }); 
}

以下是代碼中的用法。

nodes[i].name = incNumAtEnd(nodes[i].name);

來源

2012-09-23 13:04:23 Jay

非常感謝。這太棒了。 :) –

遞增表單元素的名稱javascript

回答

相關問題