need help with clonning

@alexusMar 18.2005

hey,
can some one help me with cloning the parts of HTML for the form generation?

I want to add the lines of the form if the button is pressed, but then if I need I can press another button to remove last line(s) if needed.

So far I have this, but it shows only one line and no more. On another trerat I was sudjested to use Child cloaning but it seams not to be working with elements such as <select>… Dont know Im lost, and goinmg crazy, pls help!

Thanks!

[code=php] <html>

<head> <title>New Page 3</title> <script language=javascript> i=0; function action(){ i++; locDiv.innerHTML=”<input type=text name=income_name”+ i +” size=20><select size=1 name=income_type”+ i +”><option selected value=Salary>Salary</option><option value=Rental Income>Rental Income</option><option>Social Security</option><option value=Pension>Pension</option></select><input type=text name=value”+ i +” size=20><input type=text name=who”+ i +” size=20><br>”; } </script> </head> <body> <div id=locDiv>

</div> <input type=”button” value=”Action” name=”Action” onclick=action();> </body> </html> [/code]

to post a comment

JavaScript

10 Comments(s) _↴

@FangMar 18.2005 — #Concatenation:
document.getElementById('locDiv').innerHTML+="<input .....

@KorMar 18.2005 — #Try this DOM solution...

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title>Untitled Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <script language="JavaScript" type="text/JavaScript">
 var oInpN =['income_name','value'];
 var oSelN ='income_type';
 var oOptV =['Salary','Rental Income','Social Security','Pension']
 var q=0;
 function addE(){
 var root = document.getElementById('container');
 var oDiv = document.createElement('div');
 var oInp= new Array()
 for(var i=0;i<oInpN.length;i++){
 oInp[i] = document.createElement('input');
 oInp[i].setAttribute('type','text');
 oInp[i].setAttribute('size',20);
 oInp[i].setAttribute('name',oInpN[i]+q)
 }
 var oSel = document.createElement('select');
 oSel.setAttribute('size',1);
 oSel.setAttribute('name',oSelN+q);
 for(var i=0;i<oOptV.length;i++){
 var oOpt = document.createElement('option');
 var oTxt = document.createTextNode(oOptV[i]);
 oOpt.setAttribute('value',oOptV[i]);
 oOpt.appendChild(oTxt);
 oSel.appendChild(oOpt);
 }
 var oBut = document.createElement('input');
 oBut.setAttribute('type','button');
 oBut.setAttribute('value','remove');
 oDiv.appendChild(oInp[0]);
 oDiv.appendChild(oSel);
 oDiv.appendChild(oInp[1]);
 oDiv.appendChild(oBut);
 oBut.onclick=function(){
 var oRoot = this.parentNode;
 root.removeChild(oRoot);
 q--;
 if(q>0){renameE();}
 }
 root.appendChild(oDiv);
 alert(oSel.name);
 q++;
 }
 function renameE(){
 var oDivs = document.getElementById('container').getElementsByTagName('div');
 for(var i=0;i<oDivs.length;i++){
 for(var j=0;j<oInpN.length;j++){
 oDivs[i].getElementsByTagName('input')[j].setAttribute('name',oInpN[j]+i);
 }
 oDivs[i].getElementsByTagName('select')[0].setAttribute('name',oSelN+i)
 }
 }
 </script>
 </head>
 <body>
 <form>
 <div id="container"></div>
 <input type="button" value="add" onclick="addE()">
 </form>
 </body>
 </html>
 [/code]

@alexusauthorMar 18.2005 — #Kor, thanks I love yor example... I think it too complex for me for now... :-(

But is there any way now to remove the row created w/ this:
[code=php]document.getElementById('locDiv').innerHTML+="<input .....[/code]

Thanks!

@alexusauthorMar 18.2005 — #Here is what I thought to use to remuve the block oh html from the form, but it eams it doesnt work...

[code=php]<html> 
 
 <head> 
 <title>New Page 3</title> 
 <script language=javascript> 
 i=0; 
 function action(){ 
 i++; 
 document.getElementById('locDiv').innerHTML+="<div id=rowDiv"+i+"><input type=text name=income_name"+ i +" size=20 id="+ i +"><select size=1 name=income_type"+ i +"><option selected value=Salary>Salary</option><option value=Rental Income>Rental Income</option><option>Social Security</option><option value=Pension>Pension</option></select><input type=text name=value"+ i +" size=20><input type=text name=who"+ i +" size=20><br></div>"; 
 } 
 
 function kill(){
 // document.getElementById('locDiv').innerHTML+="0";
 //document.removeNode("locDiv");
 newDiv="rowDiv"+i;
 //alert(newDiv);
 // newDiv.removeNode(newDiv);
 document.getElementById('newDiv').innerHTML+="";
 i--;
 }
 
 </script> 
 </head> 
 <body> 
 <div id=locDiv> 
 
 </div> 
 <input type="button" value="Action" name="Action" onclick=action();> 
 <input type="button" value="Kill" name="kill" onclick=kill();>
 </body> 
 </html>
 [/code]

@FangMar 18.2005 — #Possible but it will quickly become complex as you have to store all data before removal and replace it after for all fields.

@alexusauthorMar 18.2005 — #Fang, Im not sure what you mean?

@Willy_DuittMar 18.2005 — #[i]Originally posted by alexus [/i]

[B]Kor, thanks I love yor example... I think it too complex for me for now... :-(

But is there any way now to remove the row created w/ this:

[code=php]document.getElementById('locDiv').innerHTML+="<input .....[/code]

Thanks! [/B][/QUOTE]

LOL...

Kor provides you an example of cloning that works as you wished but instead of trying to study how and why it works... You continue upon the folly from which you started which has no chance of ever working the way you would like...

Here's a hint... What you have done is not a clone... It is a string, albiet one that contains HTML, but a string nonetheless and there is no stored reference to it to find it again and remove it...

The correct thing would have been to return and ask for clarification - NOT return and request that your folly be revisited... :rolleyes:

Good Luck;

.....Willy

@alexusauthorMar 18.2005 — #:-(

ok, will dig in the Kor's example...

PS: I didnt want to learn java I just wanted to simplify GUI for PHP program

@FangMar 18.2005 — #See if you can return data from this:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;New Page 3&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!--
 var i=0;
 function add() {
 i++;
 document.getElementById('locDiv').innerHTML+="&lt;div id=row"+ i +"&gt;&lt;input type=text name=income_name"+ i +" size=20&gt;&lt;select size=1 name=income_type"+ i +"&gt;&lt;option selected value=Salary&gt;Salary&lt;/option&gt;&lt;option value=Rental Income&gt;Rental Income&lt;/option&gt;&lt;option&gt;Social Security&lt;/option&gt;&lt;option value=Pension&gt;Pension&lt;/option&gt;&lt;/select&gt;&lt;input type=text name=value"+ i +" size=20&gt;&lt;input type=text name=who"+ i +" size=20&gt;&lt;/div&gt;";
 }
 
 function remove() { 
 if(i) {
 var loc=document.getElementById('locDiv');
 last = document.getElementById('row'+i);
 dump=loc.removeChild(last);
 i--;
 }
 }
 //--&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form&gt;
 &lt;div id="locDiv"&gt;&lt;/div&gt;
 &lt;div&gt;
 &lt;button type="button" name="Action" onclick="add();"&gt;Action&lt;/button&gt;
 &lt;button type="button" name="Remove" onclick="remove();"&gt;Remove&lt;/button&gt;
 &lt;/div&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

If you want to do it the DOM way: http://www.quirksmode.org/dom/domform.html

@alexusauthorMar 18.2005 — #Thanks Fang!

I like this way, at least it is easy to use(w/ my level of java)?

Also in #JavaScript _↴

how can i format correctly a UTC time to output 01 instead of 1?[RESOLVED] function to save an html document as an microsoft word document.How to get value for filled input field?

Success!

Help @alexus spread the word by sharing this article on Twitter...

Tweet This

need help with clonning

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴