フィールドのリストに動的フィールドを追加するためにjqueryコードに取り組んでいます。いくつかのWebリンクがありますが、ライブコマンドを使用してそれらのほとんどが期待どおりに機能しません.jquery UIタブ内でこれを行っています
このコードはうまく機能しますが、いくつかの問題があるため、このコードを試してみました。
function trimNums(stringToTrim)
{
return stringToTrim.replace(/\d+$/,"");
}
function dupForm(divId, divClass, btnAdd, btnRm)
{
//alert(divId+' '+divClass);
var num = $(divClass).length;
var newNum = new Number(num + 1);
var i;
var newElem = $('#' + divId + num).clone().attr('id', divId + newNum);
for (i=0; i < newElem.children().length; i++)
{
var attrId = trimNums(newElem.children(':eq('+i+')').attr('id'));
var attrName = trimNums(newElem.children(':eq('+i+')').attr('name'));
newElem.children(':eq('+i+')').attr('id', attrId + newNum).attr('name', attrName + newNum);
}
$('#' + divId + num).after(newElem);
$('#' + btnRm).attr('disabled',false);
//if (newNum == 15)
//$('#' + btnAdd).attr('disabled','disabled');
}
function rmForm(divId, divClass, btnAdd, btnRm)
{
var num = $(divClass).length;
$('#' + divId + num).remove();
//$('#' + btnAdd).attr('disabled','');
if (num-1 == 1) {
$('#' + btnRm).attr('disabled','disabled');
$('#' + btnAdd).attr('disabled',false);
}
}
<div>
<input type="button" id="btnAdd" class="btn" onclick="dupForm('input', '.clonedInput', 'btnAdd', 'btnDel');" value="Add" />
<input type="button" id="btnDel" class="btn" onclick="rmForm('input', '.clonedInput', 'btnAdd', 'btnDel');" value="Remove" /><br /><br />
</div>
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
<input type="text" class="input-block-level-inputfields" name="product1" id="product1" placeholder="Product Details" />
<input type="text" class="input-block-level-inputfields" name="price1" id="price1" style="width:50px;" placeholder="Price" />
</div>
コードに関する問題:
- また、1 つのフィールドに値を入力し、不要な [追加] をクリックすると、値が複製されます。
- 価格フィールドに価格値を入力したいのですが、div ボックスですぐに計算する必要があります。後で定義します。削除をクリックすると、すぐに金額が差し引かれます
ありがとう