innerhtml need help

Deaf Topics - Debt Consolidation - Debt Consolidation - Links of Movies - Debt Consolidation

psim

Feb 24th 2009, 1:28 pm

hello all,
i thought not to paste my code...only to paste the exact part in whick i need help..
i am very confused...read comments to understand what exactly i want to do...
i want to create with innerhtml a input text and a button...and with that button to create also with innerhtml another element, for example an input textarea..
please help its very important for me...

<script>
function addfield() {
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;
var divIdName = "my"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
newdiv.innerHTML = "<input type=\"text\" name=\"firstname\"><INPUT type=\"button\" name=\"addfield\" value=\"add!\ onclick=\"addfield(XXXXX)\">";
/*i want the value in addfield to be unique for a specific "my"+num+"Div" so for every field a create to be able to create as many subfields as i want..for example i want this...
create my1div then press add! and create for example my1.1div press again and create my1.2div
create my2div
create my3div then press add! and create for example my3.1div press again and create my3.2div
*/

ni.appendChild(newdiv);
}
function addsubfield(){//here i want to create <input type=\"text\" name=\"something else\">
XXXXXXXXX
}

</script>

<body>

<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:;" onclick="addfield();">Add Some Elements</a></p>
<div id="myDiv"> </div>
</body>

cjburkha

Feb 24th 2009, 4:30 pm

I am note 100% sure what you want, but I think this comes close. Full page, tested in FF3

<html>
<head>
<script type="text/javascript">
//Track how many divs added
var numDiv = 0;

//Add a div to the page
//
function addDiv() {

numDiv += 1;

//need something to append to
parentDiv = document.body;

//set the name
var divIdName = "myDiv" + numDiv;
//create object
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
//set style so we can see it
newdiv.setAttribute("style", "width: 200px; height:200px; border-style: solid; border-color: black;");
//create the button
var newButton = document.createElement('input');
newButton.setAttribute('type', 'button');
newButton.value = 'add';
//Set the onclick handler. Note how we pass 'this' to the function.
newButton.setAttribute('onclick', 'addField(this);');
newdiv.appendChild(newButton);
parentDiv.appendChild(newdiv);
}

//add the field. Remember how we pass 'this' above? now it is refObj (Reference Object)
function addField(refObj)
{
//Get the buttons parent. So we know who to add the field to.
var parentDiv = refObj.parentNode;
//Add a custome field to the parentDiv object. We need to track how many fields are in the div to name it
if (!parentDiv.numFields)
parentDiv.numFields = 1;
else
parentDiv.numFields += 1;
//basic create
var inputBox = document.createElement('input');
inputBox.setAttribute('type', 'text');
//Get the parents id + how many fields gives us a unique id
inputBox.id = parentDiv.id + 'input' + parentDiv.numFields;
inputBox.setAttribute('onfocus', 'showId(this)');

parentDiv.appendChild(inputBox);
}

//Just to show the names of the fields. Testing only
function showId(refObj)
{
alert(refObj.id);
}
</script>
</head>
<body>
<input type="button" value="AddDiv" onclick="addDiv();"/>

<input type="hidden" value="0" id="theValue" />
</body>
</html>

cjburkha

Feb 24th 2009, 4:35 pm

I don't know if I can link, but here is a link to it live dynamic javascript (http://www.210computing.com/dhtml.html)