Question

Following is my JavaScript code for cloning:

function addCloneRow(obj) {                                
        if(obj) {               
            var tBody = obj.parentNode.parentNode.parentNode;                        
            var trTable = tBody.getElementsByTagName("tr")[tBody.getElementsByTagName("tr").length-1];                        
            var trClone = trTable.cloneNode(true);            
            if(trClone) {      
                var txt  = trClone.getElementsByTagName("input");                
                var srno  = trClone.getElementsByTagName("label");
                var dd   = trClone.getElementsByTagName("select");                                   

                for(var i=0; i<dd.length; i++) {
                    dd[i].options[0].selected=true;
                    var nm = dd[i].name;                    
                    var nNm = nm.substring((nm.indexOf("_")+1),nm.indexOf("["));                                        
                    dd[i].name = nNm+"[]";                    
                }                
                for(var j=0; j<txt.length; j++) {
                    var nm = txt[j].name;                    
                    var nNm = nm.substring((nm.indexOf("_")+1),nm.indexOf("["));                    
                    txt[j].name = nNm+"[]";                            
                    if(txt[j].type == "hidden"){ 
                        txt[j].value = "0"; 
                    }else if(txt[j].type == "text") {               
                        txt[j].value = "";              
                    }else if(txt[j].type == "checkbox") {               
                        txt[j].checked = false;
                    }
                }                   
                tBody.insertBefore(trClone, tBody.getElementsByTagName("tr")[tBody.getElementsByTagName("tr").length]);
            }
        }
    }

and Following is my HTML code:

<table id="step_details" style=" padding: 0px; margin: 5px; border-color: #fff;" align="center" frame="box" cellspacing="15">
        <tr>            
            <th width="45%">Step details</th>
            <th>Expected Results</th>
            <th width="25">Execution</th>
            <th><img src="gui/themes/default/images/ico_add.gif" onclick="addCloneRow(this);"/></th>            
        </tr>
        {foreach from=$gui->viewSteps item=step_info }
        <tr>            
            <input type="hidden" name="existing_id[]" value="{$step_info->id}">
                <td><textArea id="step_details" name="step_details[]">{$step_info->actions|strip_tags|trim}</textArea></td>
                <td><textArea id="expected_results" name="expected_results[]">{$step_info->expected_results|strip_tags|trim}</textArea></td>
                <td style="vertical-align: top;">

                    <select onchange="content_modified = true"  name="etype[]">
                        <option {if $step_info->execution_type eq  1 }selected="selected"  {/if} value="1" label="Manual">Manual</option>
                        <option  {if $step_info->execution_type eq  2 } selected="selected"  {/if}  value="2" label="Automated">Automated</option>
                    </select>
                </td>
                <td style="vertical-align: top;"><img src="gui/themes/default/images/ico_del.gif" onclick="removeCloneRow(this);"/></td>
        </tr>                
        {/foreach} 
        {if $smarty.post.doAction neq "edit"}
        <tr>            
            <td><textArea name="step_details[]"></textArea></td>
            <td><textArea name="expected_results[]"></textArea></td>
            <td style="vertical-align: top;">
                <select onchange="content_modified = true"  name="etype[]">
                    <option selected="selected" value="1" label="Manual">Manual</option>
                    <option value="2" label="Automated">Automated</option>
                </select>
            </td>
            <td style="vertical-align: top;"><img src="gui/themes/default/images/ico_del.gif" onclick="removeCloneRow(this);"/></td>
        </tr>
        {/if}   
    </table>

The cloning is working properly but the issue is if I am on editing page then its cloning it with textarea value instead I want blank value in textarea. How can I add blank value dynamically after cloning in textarea.

Thanks

Answer 1

After the following line:

var dd   = trClone.getElementsByTagName("select");

put these lines:

var textarea   = trClone.getElementsByTagName("textarea");
for(var i=0; i<textarea.length; i++) {
   textarea[i].value = '';
}

Hope this helps.