Avatar of leapingleon
leapingleon
 asked on

Javascript dynamically add fields and style

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>

Open in new window

JavaScript

Avatar of undefined
Last Comment
leapingleon

8/22/2022 - Mon
Minh Võ Công

leapingleon

ASKER
I will look at that later as I am not near my machine at the moment. However, I would prefer it fixed with the code I use as I have this in quite a few places and dont want to change everything. Would prefer if I got it working with what I had.
ASKER CERTIFIED SOLUTION
Robert Schutt

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Robert Schutt

some more minor problems I think:

1) when I alert the variable "last" it contains more than 1 underscore. So to get the correct new number use:

			var spl = last.split("_");
			var count = Number(spl[spl.length - 1]) + 1;

Open in new window


2) the parameters to the function call addField(...) don't match the parameters in the function itself (I believe) so the new elements get wrong names like Quantity_2 for the new text area. Either the function should read "area,desc,code,quan,..." or the order of the arguments in the function call should be adjusted.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
leapingleon

ASKER
Yes, that what happens when you copy and paste code from other places. Thanks...

I will have to look at this later as I am no where near my dev box, but this looks good.
leapingleon

ASKER
Thanks robert, you truly are a master.