[Javascript] [SOLVED] JS Help: Dynamic form control

Michael Hulse micky at ambiguism.com
Sun Mar 5 04:59:44 CST 2006


  Actually, I just got it my code working by doing this:

<snip>

var counter = 0;

function moreFields() {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    newFields.firstChild.nodeValue=counter + '. ';
    changeId(newFields, counter);
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);
}
function delField() {
    var writeroot = document.getElementById('writeroot');
    if(counter >= 1) {
        writeroot.parentNode.removeChild(writeroot.previousSibling);
        counter--;
    }
}
function changeId(r, c) {
    var rKids = r.getElementsByTagName('*');
    var i = rKids.length;
    var rKid;
    while(i--) {
        rKid = rKids[i];
        if (rKid.id) rKid.id = rKid.id + c;
        if (rKid.name) rKid.name = rKid.name + c;
    }
}
//setTimeout(moreFields, 100);
/*window.onload = moreFields;*/
event_attach('onload', moreFields);

</snip>

XHTML:

<snip>

<div id="readroot" style="display: none">
	
	<div class="fm-req">
		<label for="item_">* Item name:</label>
		<input name="item_" id="item" type="text" title="Item name" />
	</div>
	
	<div class="fm-req">
		<label for="product_">* Product #:</label>
		<input name="product_" id="product" type="text" title="Product 
number" />
	</div>
	
	<div class="fm-opt">
		<label for="quantity_">Quantity desired:</label>
		<input name="quantity_" id="quantity" type="text" title="Desired 
quantity" />
	</div>
	
	<input class="fm-remove" id="remove" type="button" value="Remove Item" 
onclick="delField();" />

	<div class="horizRule"></div>

</div>

</snip>

Above seems to work... not yet fully tested.

Thanks again for help.
Cheers,
Micky
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: text/enriched
Size: 2111 bytes
Desc: not available
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20060305/72e8b1de/attachment.bin>


More information about the Javascript mailing list