Script berikut ini berfungsi untuk membuat dynamic form element yang bisa expand/bertambah setiap kali javascript expand function di panggil dengan limit yang bisa di set sesuai keinginan (bisa pula unlimited). Script ini sangat berguna untuk membuat Multi Files uploader sehingga user tinggal meng-klik button expand setiap user perlu files Field untuk mengupload lebih banyak file.
Dengan menggunakan fungsi Javascript insertAdjacentHTML kita bisa menambahkan element di dalam HTML. Fungsi insertAdjacentHTML memiliki 2 parameter yaitu posisi & Element_yang_di_add. untuk parameter posisi ini ada 4 nilai yang bisa dipake antara lain : beforeBegin, afterBegin, beforeEnd, dan afterEnd.
Javascript Source
nMax=9; // maximum field
// expand function
function Expand(){
oName=document.getElementById(‘files’);
if (nCount<nmax){>
nCount++
var addElement = ‘File ‘+nCount+‘
<input size="35" name="file’+nCount+‘" type="file" />’;
self.document.getElementById(‘files’).insertAdjacentHTML(‘beforeEnd’,addElement);
return true;
}else{
alert(‘Max Element is ‘+nMax);
return true;
}
}
HTML Form Source
<p id=“files”>File 1 <input size=“35″ name=“file1″ type=“file” /></p>
<p id=“buttons”> <input name=“Submit” value=“Upload” type=“submit” />
<input value=“MoreFile” onclick=“return Expand();” type=“button” />
<input value=“Close” onclick=“self.close();return false;” type=“button” />
Updated Check Cross Browser Fixed
sorry, itu link di kolom Update Check nya kok ke localhost..?? ^^v
he eh sorry, skarang udah fixed. thanks