How to place the value in cloned input type file field

Question

When i click + sign, new row will be cloned. I have already done the some work, for that copy the first row value and placed that value in cloned row. Everything will be fine, but file upload values are not palced in new row.

function insRow()
{
    var x=document.getElementById('scrolltable');
    var new_row = x.rows[1].cloneNode(true);
    var len = x.rows.length;

    var code=document.getElementById('code1').value;
    var product=document.getElementById('product1').value;
    var first=document.getElementById('first1').value;
    var additn=document.getElementById('additn1').value;
    var qty=document.getElementById('qty1').value;
    var oldfname=document.getElementById('oldfilename1').value;
    var lastIndex = oldfname.lastIndexOf("\\");
    if (lastIndex >= 0) {
      oldfname = oldfname.substring(lastIndex + 1);
    }

    var inp1 = new_row.cells[0].getElementsByTagName('input')[0];
    inp1.id += len;
    inp1.value = code;
    inp1.setAttribute('readonly', 'readonly');

    var inp2 = new_row.cells[1].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = product;
    inp2.setAttribute('readonly', 'readonly');

    var inp3 = new_row.cells[2].getElementsByTagName('input')[0];
    inp3.id += len;
    inp3.value = first;
    inp3.setAttribute('readonly', 'readonly');

    var inp4 = new_row.cells[3].getElementsByTagName('input')[0];
    inp4.id += len;
    inp4.value = additn;
    inp4.setAttribute('readonly', 'readonly');

    var inp5 = new_row.cells[4].getElementsByTagName('input')[0];
    inp5.id += len;
    inp5.value = qty;
    inp5.setAttribute('readonly', 'readonly');

    var inp6 = new_row.cells[5].getElementsByTagName('input')[0];
    inp6.id += len;
    //inp6.value = oldfname;
    inp6.setAttribute("type", "file"); 

    var button = new_row.cells[6].getElementsByTagName('input')[0];
    button.value = "#";
    button.onclick = function() {editRow(this)}; 
    var button = new_row.cells[6].getElementsByTagName('input')[1];
    button.value = "-";
    button.disabled=false;

    x.appendChild( new_row );
    document.getElementById('code1').value='';
    document.getElementById('product1').value='';
    document.getElementById('first1').value='';
    document.getElementById('additn1').value='';
    document.getElementById('qty1').value='';
    document.getElementById('oldfilename1').value='';
    document.getElementById('code1').focus();
}

html code is,

<table id="scrolltable" class="table">
  <thead>
  <tr>
  <th>Code</th>
  <th>Product</th>
  <th>First</th>
  <th>Add</th>
  <th>Qty</th>
  <th>File</th>
  <th>Action</th>
  </tr>
  </thead>
 <tbody>
    <tr><td><input type="text" name="code" id="code1"   /> </td>
    <td><input type="text" name="product[]" value=""  class="input-medium" id="product1"  /> </td>
  <td><input type="text" name="first[]" value=""  class="input-small" id="first1"/></td>
  <td><input type="text" name="additn[]" value=""  class="input-small" id="additn1" /></td>
 <td><input type="text" name="qty[]" value=""  class="input-small" id="qty1" /></td>
 <td><input type="file" name="oldfilename[]" value=""  class="input-small" id="oldfilename1" /></td>
  <td><input type="button" id="addmorePOIbutton" style="width:25px;" value="+" onClick="insRow()"/>
      <input type="button" id="delPOIbutton" style="width:25px;" value="-" onClick="deleteRow(this)" disabled />
   </td></tr>
 </tbody>
   </table>

my fiddle file is http://jsfiddle.net/c9dccnua/

When you clone an element, the value isn't cloned, and you can't set the value of a file input for security reasons, so what you're asking probably can't be done ! — adeneo, Dec 31 '14 at 13:31
yes, i have set the value, text field value will be place correctly, but uploaded file name not to be place, have some error — abdul, Dec 31 '14 at 13:33
http://stackoverflow.com/questions/1696877/how-to-set-a-value-to-a-file-input-in-html — Jack, Dec 31 '14 at 18:53

How to place the value in cloned input type file field

0 Answers0