troubleshooting Question

Javascript dynamically add fields and style

Avatar of leapingleon
leapingleon asked on
JavaScript
6 Comments1 Solution603 ViewsLast Modified:
Hi experts

Could you please see dev.leonbrits.com/test.php and click the "Add new line" link.

I want the new line to replicate the style etc. of the above textarea. I am using ckeditor and ckfinder to do the job, however I cannot replicate the style of the dynamically created textarea.

I am using the below snippet to replicate the script part (which works fine if I use an alert('hello;); for example:

var scriptText = document.createElement('script');
var scr = ' var editor = CKEDITOR.replace( "Description_2" ); CKFinder.setupCKEditor( editor, "/ckfinder/" ); ';
scriptText.text = scr;
div.appendChild(scriptText);

My code for the page is attached in the snippet.

Your help is much appreciated.

Thanks
Leon
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="/ckeditor/ckeditor.js">
        CKEDITOR.replace( 'editor1', toolbar : 'MyToolbar');
    </script>
    <script type="text/javascript" src="/ckfinder/ckfinder.js"></script>

    <script language="javascript" type="text/JavaScript">

        function removeField(removeNum)
        {
            var check = window.confirm("Are you sure you want to delete this line?");
            if (check)
            {
                var d = document.getElementById("lines_area");
                var removeFields = document.getElementById("div_"+removeNum);
                d.removeChild(removeFields);
            } else {
                exit();
            }
        }

        function addField(area,code,quan,desc,total,limit)
        {
            if(!document.getElementById) return;
               
            var field_area = document.getElementById(area);
            var all_inputs = field_area.getElementsByTagName("div");
            var last_item = all_inputs.length - 1;
            var last = all_inputs[last_item].id;
            var count = Number(last.split("_")[1]) + 1;
       
            if(count > limit && limit > 0) return;
            if(count > limit && limit > 0) return;
               
            var inputDescription = document.createElement("textarea");
            var inputUnitPrice = document.createElement("input");
            var inputQuantity = document.createElement("input");
            var inputLineTotal = document.createElement("input");
            var removeButton = document.createElement("input");
            var div = document.createElement("div");
            var removeString = "removeField("+count+")";
           
            inputDescription.id = desc+count;
            inputDescription.name = desc+count;
            inputDescription.className = "ckeditor";
            inputDescription.style.cols = "5";
            inputDescription.style.rows = "2";
            inputDescription.style.marginLeft = "25px";
            inputDescription.style.verticalAlign = "top";
           
            inputUnitPrice.id = code+count;
            inputUnitPrice.name = code+count;
            inputUnitPrice.type = "text";
            inputUnitPrice.className = "form_textbox_left";
            inputUnitPrice.style.width = "70px";
            inputUnitPrice.style.verticalAlign = "top";
           
            inputQuantity.id = quan+count;
            inputQuantity.name = quan+count;
            inputQuantity.type = "text";
            inputQuantity.className = "form_textbox_left";
            inputQuantity.style.width = "70px";
            inputQuantity.style.marginLeft = "25px";
            inputQuantity.style.verticalAlign = "top";
           
            inputLineTotal.id = total+count;
            inputLineTotal.name = total+count;
            inputLineTotal.type = "text";
            inputLineTotal.className = "form_textbox_left";
            inputLineTotal.style.width = "70px";
            inputLineTotal.style.marginLeft = "25px";
            inputLineTotal.style.verticalAlign = "top";
           
            removeButton.type = "button";
            removeButton.value = "DEL";
            removeButton.style.marginLeft = "20px";
            removeButton.style.marginTop = "3px";
            removeButton.onclick = new Function(removeString);
           
            var scriptText = document.createElement('script');
            var scr = ' var editor = CKEDITOR.replace( "Description_2" ); CKFinder.setupCKEditor( editor, "/ckfinder/" ); ';
            scriptText.text = scr;



            div.id = "div_"+count;
           
            div.appendChild(inputDescription);
            div.appendChild(inputUnitPrice);
            div.appendChild(inputQuantity);
            div.appendChild(inputLineTotal);
            div.appendChild(removeButton);
            div.appendChild(scriptText);
            field_area.appendChild(div);
        }
       
    </script>
   
</head>

<body>
       
    <form>
   
        <div id = "lines_area" style = "margin-left:25px;">
            <div id = "div_1" style = "valign: top;">
                <table width = "100%">
                    <td style = "width: 470px">
                        <textarea rows="2" cols="5" class="ckeditor" name="Description_1" id="Description_1"></textarea>   
                        <script>var editor = CKEDITOR.replace( "Description_1" ); CKFinder.setupCKEditor( editor, "/ckfinder/" ); </script>
                    </td>
                    <td style = "vertical-align:top;">
                        <input type="text" style="width:70px; margin-left:10px; vertical-align:top;" name="UnitPrice_1" id="UnitPrice_1">
                        <input type="text" style="width:70px; margin-left:10px; vertical-align:top;" name="Quantity_1" id="Quantity_1">
                        <input type="text" style="width:70px; margin-left:10px; vertical-align:top;" name="LineTotal_1" id="LineTotal_1">
                        <input type="button" value = "DEL" style = "vertical-align:top; margin-top: 3px; margin-left: 10px;" onclick = "removeField(1)">
                    </td>
                </table>
            </div>
        </div>
       
        <br>

        <ul>
            <li style = "float:left"><a href="javascript: addField('lines_area','Description_','UnitPrice_','Quantity_','LineTotal_',20);">Add new line</a></li>
        </ul>
                   
    </form>
   
</body>
   
</html>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 6 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros