フォームの動的セクション

私はフォームを作成しています。クライアント情報用のフィールドセットと、必要に応じて別のクライアント用の別のフィールドセットを追加する機能があります。
追加フィールドセットのフィールドIDは1つ追加されますが、それは良いですが、フィールドセットの各フィールドが1だけ加算されるようにしたいと思います。フォームの動的セクション

var _counter = 0; 
function Add() { 
_counter++; 
var oClone = document.getElementById("client1").cloneNode(true); 
oClone.id += (_counter + ""); 
document.getElementById("placehere").appendChild(oClone);

出典

2012-01-04 PlatiNUM

ここインクリメントクローンとページがありますフィールドセット、およびセット内の子要素が含まれます。フィールドセットと子の両方の入力に数字の接尾辞があると仮定しています。フィールドセット1およびテキストフィールド2など

乾杯。

<!DOCTYPE html> 
<html> 
<head> 


    <script type='text/javascript'> 
    // store a reference to the last clone so I can increment off that. 
    window.lastClone = null; 

    function incrementId(id) { 
     // regexp is looking for text with a number suffix. adjust accordingly. 
     var numberSuffixRegExp = /(.*?)(\d*)$/; 
     var regExpMatch = numberSuffixRegExp.exec(id); 
     // assuming a match will be made here, and position 1 and 2 are populated. 
     var prefix = regExpMatch[1]; 
     var counter = parseInt(regExpMatch[2]); 
     counter++; 
     return prefix + counter; 
    } 

    function cloneFieldSet() { 

     if (!window.lastClone) { 
     window.lastClone = 'fieldset1'; 
     } 

     var newFieldSet = document.getElementById(lastClone).cloneNode(true); 

     newFieldSet.id = incrementId(newFieldSet.id); 

     var tagNames = ['input', 'select', 'textarea']; // insert other tag names here 
     var elements = []; 

     for (var i in tagNames) { 
     // find all fields for each tag name. 
     var fields = newFieldSet.getElementsByTagName(tagNames[i]); 
     for(var k = 0; k < fields.length; k++){ 
      elements.push(fields[k]); 
     } 
     } 

     for (var j in elements) { 
     // increment the id for each child element 
     elements[j].id = incrementId(elements[j].id); 
     } 

     document.getElementById("placehere").appendChild(newFieldSet); 
     window.lastClone = newFieldSet.id; 
    } 

    </script> 


</head> 
<body> 
<input type='button' value='Clone' onclick='cloneFieldSet()'/><br/> 
<fieldset id='fieldset1'> 
    <table> 

    <tr> 
     <td>Label One:</td> 
     <td><input type='text' id='fieldOne1'/></td> 
    </tr> 
    <tr> 
     <td>Label Two:</td> 
     <td><input type='text' id='fieldTwo1'/></td> 
    </tr> 
    <tr> 
     <td>Label Three:</td> 
     <td><select id='selectOne1'> 
     <option>Some Value</option> 
     </select></td> 
    </tr> 
    </table> 
</fieldset> 
<div id='placehere' style='margin:10px 0; border:1px solid black'> 
</div> 

</body> 
</html>

出典

2012-01-04 22:04:31

感謝を助けました！ – PlatiNUM

おそらくあなたもこれを手助けすることができます。 OUの選択に基づいてOU＃をJob＃フィールドに追加するonchangeイベントがあります。すなわちonchange = "document.form.jobid_1.value = {$ job_id} = this.value フィールドセットが複製されると、新しいセクションはjobid_2の代わりにjobid_1を見続けます。書き直す方法はありますか – PlatiNUM

関数updateCounterPart（選択）{ VAR numberSuffixRegExp = /(.*?)(\d*)$/; にconsole.log（select.id）; VAR regExpMatch = numberSuffixRegExp.exec（select.id）。 var suffix = regExpMatch [2]; console.log（サフィックス）。 var target = document.getElementById（ 'fieldTwo' + suffix）; if（target）{ target.value = select.options [select.selectedIndex] .value; } else { console.log（ "ターゲットが見つかりません"）; } } –

このをお試しください：それが唯一のユーザー入力フォーム要素に更新IDを追加します。

あなたがフィールドセットで更新され、すべての子要素にする場合は、 if文を削除:)

var _counter = 0, _fcounter = 0; 

function add(){ 

    var i, j, 
     oClone = document.getElementById("client1").cloneNode(true), 
     fldTypes = "INPUT SELECT TEXTAREA CHECKBOX RADIO", 
     fields = oClone.children; 

    _counter++; 
    oClone.id += (_counter + ""); 

    for(i=0, j= fields.length; i<j; i++){ 
     if(fldTypes.indexOf(fields[i].nodeName) > -1){ //checks for user input form elements 
      _fcounter ++; 
      fields[i].id += (_fcounter + ""); 
     } 
    } 

    document.getElementById("placehere").appendChild(oClone); 

    return oClone; 
}

を参照してください例：http://jsfiddle.net/yfn6u/8/

出典

2012-01-04 21:10:09

おかげで、これはだけでなく、これは本当に助け – PlatiNUM

フォームの動的セクション

答えて

関連する問題