How do i clear input,select and textarea fields after cloning

Question

i'm create form for expose item i want fresh text field. when user click button ADD

 function fncAdd() { //ADD ROW AND CLONE var tb = document.getElementById('tbl'); var tbody = document.createElement('tbody'); // fixed IE :> tb.insertBefore(tbody, null); var clone = document.getElementById('cln').cloneNode(true); tbody.insertBefore(clone, null); } function fncDelete() { //DELETE ROW var tb = document.getElementById('tbl'); var del = tb.rows.length; if (del > 1) { tb.deleteRow(del - 1); } } 

 <tr id="cln"> //CALL CLONE FUNCTION <div align="center">1</div> </td> <?php //CONNECT DATABASE include 'dbConfig.php'; $query = $db->query("SELECT * FROM accountcode ORDER BY acc_id ASC "); $rowCount = $query->num_rows; ?> <td> <select id="accountcode"> //DROPDOWN 2ND BY AJAX <option value=""> - - Please select - - </option> <?php if($rowCount > 0){ while($row=$query->fetch_assoc()){ echo '<option value="'.$row['acc_id'].'">'.$row['acc_name'].'</option>'; } }else{ echo '<option value="">Accountcode not available</option>'; } ?> </select> </td> <td> <select id="item"> //DROPDOWN 2ND BY AJAX <option value=""> - - Select accountcode first - -</option> </select> </td> <td> //DETAIL BOX <textarea rows=4 cols=25 class="txtDETAIL" maxlength="100"> </textarea> </td> <td> <input type="text" class="txtAMOUNT" size="5"> //AMOUNT BOX </td> <td> <input type="text" class="txtUNIT" size="5"> //UNIT BOX </td> <td> //NOTE BOX <textarea rows=4 cols=15 class="note" maxlength="60"> </textarea> </td> <td> //UPLOADFILE FOR PICTURE OR STOCK <a href='upload.php?id={$row[' id="id" ']}'>CLICK</a> </td> </table> <p> <input type="button" value="ADD" onClick="fncAdd()"> //BUTTON ADD <input type="button" value="DELETE" onClick="fncDelete()"> //BUTTON DELETE </p> 

I am having trouble to create text field value when user click button i want to clone function not copy old value from 1st row and column NO can auto increment

how can i do that

EXAMPLE

Answer 1

To clear form data you can use,

document.getElementById("form1").reset();

Your form should look like,

<form id="form1">
   <input .....
</form>

Answer 2

Something to be aware of, is the cloned element has unique ID's (eg, append -1 etc onto the original ID).

Also, I've recently done this using jQuery, however, I used string.replace(regex, ''); instead of this method.

Oh yeah, an example to edit to suit your situation:

var element = document.getElementById('id-of-element').cloneNode(true);

element.childNodes[x].nextSibling.childNodes[y].value = '';

document.getElementById('target-element').insertBefore(element, null);

Kind regards,