...

View Full Version : Adding Elements (form fields) to a page with JS or DHTML



robocop
10-01-2003, 04:19 PM
Hey there yall....youve been a great help in the past and now i think someone can help me again....

I need a way to have a page add more form elements to itself when the user clicks a "+" button. basically, we're making a newsletter and making 3 paragraphs or so available....if they click the "+", it'll add another, and another, and another...up to 15...without REFRESHING the page....ive include the mockup i did...has anyone seen this?
thanks a million to all of you!

robocop

http://www.pyroblue.com/kc/newsletter.gif

allida77
10-01-2003, 07:07 PM
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<script language="Javascript">
var _iCounter =0;
function AddElement() {
_iCounter += 1;
if (_iCounter <= 15) {
var o = document.getElementById("txtBoxHolder");
var txtFld = document.createElement("input");
txtFld.setAttribute("type","text");
txtFld.setAttribute("name","txtNew")
//txtDT.setAttribute("value",o.innerText);

o.appendChild(txtFld);
} else {
alert("Sorry but no more fields can be added (15 is the Max).");
}

}
</script>
</HEAD>

<BODY>
<form>
Add a Textbox:<input type="button" value="+" onClick="AddElement()"><br/>
<p id="txtBoxHolder" style="width:25px;">
</p>

</form>
</BODY>
</HTML>




To add a textarea are you would just do:
var txtArea= document.createElement("textarea")
txtArea.setAttribute("name","txtStatLog");
txtArea.setAttribute("value","fill er up"
txtArea.setAttribute("cols","30");
txtArea.setAttribute("rows","10");


Hope this is enough to get you started.

robocop
10-01-2003, 07:24 PM
wow....cool man, ill keep that as an option....

do you know how to include a variable in something like

document.all.row1.style.display = 'none';

but where the "1" is, id like to dynamically put in something...like a variable name

would it be like this?

document.all.row[currentRow].style.display = ' ';


anyone got any pointers?

Mr J
10-01-2003, 10:53 PM
Just like to point out that

document.all.row[currentRow].style.display = ' ';

is IE4

you should be going

document.getElementById("currentRow").style.display = ' ';

for later versions and cross browser



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum