Inserting Form Elements using Javascript

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
RadixDev
Forum Commoner
Posts: 66
Joined: Sun Mar 14, 2004 11:27 am
Location: U.K.

Inserting Form Elements using Javascript

Post by RadixDev »

For those who have Gmail, it'll be easy to understand. What I want to do is to have a button in which a user clicks to add extra textboxes just like you can do it in Gmail with attachments etc. I have analysed the Gmail code (yes, it's real complicated and came up with this...)

Code Found in Gmail:

Code: Select all

function j(win,id){return win.document.getElementById(id)}

function W(win,id){return S(win).CM_formїid]}

function vg(win,Xh,II){var f=win.document.createElement(II);Xh.appendChild(f);return f}

function OH(win,id)&#123;var b=W(win,id);var Ku=b.attachmentcounter++;var af=j(win,"atts_"+id);var U=vg(win,af.childNodes&#1111;1],"div");var PF=aa?'style="position:absolute;visibility:hidden"':"";U.innerHTML="<span></span><input type=file size=50 "+PF+" name=file"+Ku+' onchange="top.js._CM_OnAttach(window,this)"'+"> "+"<span class=s "+(aa?'style="display:none"':"")+">"+V("remove","da_"+Ku,true)+"</span>";win.setTimeout(function()&#123;var D=U.childNodes&#1111;1];if(aa)&#123;D.click()&#125;else&#123;D.focus()&#125;&#125;
,0);if(!aa)&#123;b.attachments++;Gg(win,id)&#125;Mo(win,id);Vi(win,id,true)&#125;
Think that's about all you need... Gmail really likes to make it confusing so people like me can't copy... Cheers :cry:

Anyways, from the above code I have deduced the following:

Code: Select all

<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
<!--
var menuNum = 1;

function addMenu() &#123;
	var af	= document.getElementById("atts_compose");
	var f = document.createElement("div");
	af.childNodes&#1111;1].appendChild(f);
	f.innerHtml = '<input name="td2" type="text" class="td" size="25">';
&#125;
//-->
</script>
</head>
<body>
<input name="td1link" type="button" class="td" value="OK" onclick="addMenu();">
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td id="atts_compose"><div></div></td>
	</tr>
</table>
</body>
</html>
And guess what! it doesn't work... In IE you get no error but in FireFox I get this,
Error: uncaught exception: [Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)" location: "file:///C:/******/test.htm Line: 14"]
Any ideas what I could do to solve this?
Black Unicorn
Forum Commoner
Posts: 48
Joined: Mon Jun 16, 2003 9:19 am
Location: United Kingdom

Post by Black Unicorn »

Personally I don't know, even though I used the whole createElement etc DOM stuff mybe a year ago ... and remember it being a pain unless you get really used to it. Whenever I want something to pop up that wasn't there before I usually stick to CSS, i.e.

Code: Select all

<input type="text" disabled="true" name="textbox23" id="textbox23" style="display:none" />
And when I want it to show, trigger it like this:

Code: Select all

document.getElementById('textbox23').style.display='';
document.forms&#1111;0]&#1111;'textbox23'].disabled=''
Using the disabled attribute means that it doesn't POST, either.
I hope this was useful.
H
Post Reply